初心者でも簡単！FirebaseでGoogleのアカウントで認証する方法

初心者でも簡単！FirebaseでGoogleのアカウントで認証する方法

Firebase のユーザー認証（ログイン機能）は、簡単に利用できるので Web アプリや Web サービスで利用者の特定に簡単に組み込むことができます。一般的によく利用されているのが、E-Mail アドレスとパスワードによる認証です。

ところが、最近はアカウントのセキュリティを強化するために、二段階認証などを取り入れるサービスも増えています。現状では、Firebase の E-Mail アドレスとパスワードの認証では、自分で実装しない限り二段階認証はサポートされていません。

そこで、大手のサービスの認証を利用して Firebase のユーザー認証を行うと大手のサービスと同等のアカウントのセキュリティを確保することができます。

この記事では、Firebase がサポートしている Google のアカウントを利用して認証する方法を取り上げてみました。

Google のアカウントを利用した認証の仕組み

今回紹介するログインの仕組みは、一言で言うと Google が利用者の認証を行うという物です。Firebase では、Google が認証した結果を受け取って利用者の識別をすると言う物です。ユーザー名もパスワードも管理は Google が行うのでセキュリティは Firebase のシンプルな E-Mail アドレスとパスワードの認証よりは信頼性は当然高くなります。

Google のアカウントの場合、二段階認証もサポートしているので、パスワード以外の確認もできるようになるので、セキュリティは高くなります。また、パスワードの変更も Google のアカウント側で行うので、Firebase 側で実装する必要がないので開発するサービスをシンプルにすることもできます。

UI が用意されているので簡単！

では、早速実装の方法を紹介します。Firebase では予め作成されたログインのための UI がすでに用意されているので、これを使うと実装もシンプルです。

予め用意された UI を利用するには「frebaseui」のパッケージをインストールします。

$ npm install firebaseui

CDN(Contents Delivery Network)で、HTML のページからリンクを読み込んで利用することもできますが、ユーザー認証が必要になるアプリの殆どは少し規模が大きなものが多いのでここでは、React を使う前提で解説します。したがって、上記の様に npm を使ってモジュール（パッケージ）を追加します。

実装は、E ー Mail アドレスとパスワードの場合よりシンプルです。

例にあげたコードは、ログインが成功した場合は、「/material」と言うページに移動するようなコードになっています。UI は一度だけ初期化すれば良いので、既に作成されているかをチェックして、UI のインスタンスがなければ、新規に作成、既に作成されている場合は、作成したインスタンスを使って表示する様になっています。

import * as firebaseui from "firebaseui";

import firebase from "../lib/firebase";

import * as React from "react";

import "firebaseui/dist/firebaseui.css";

class Login extends React.Component {

  componentDidMount() {

    const uiConfig = {

      signInSuccessUrl: "/material",

      signInOptions: [firebase.auth.GoogleAuthProvider.PROVIDER_ID],

      credentialHelper: firebaseui.auth.CredentialHelper.GOOGLE_YOLO,

    };

    let ui = firebaseui.auth.AuthUI.getInstance();

    if (ui) {

      ui.start("#firebaseui-auth-container", uiConfig);

    } else {

      ui = new firebaseui.auth.AuthUI(firebase.auth());

      ui.start("#firebaseui-auth-container", uiConfig);

    }

  }

  render() {

    return (

      <React.Fragment>

        <div id="firebaseui-auth-container"></div>

      </React.Fragment>

    );

  }

}

export default Login;

コードはこれだけですが、Firebase 側で Google による認証を有効にする必要があります。これは Firebase コンソールからユーザー認証の設定ページ（Authentication）で「Google」を有効にします。

（＊）Firebase を使うための設定も必要です。以前に記事を書いていますが、React で npm を利用して開発を行う場合、npm で「firebase」のモジュール（パッケージ）をインストールして、Firebase のプロジェクト情報を使って初期化をする必要があります。 上のコードでは、「src/lib/firebase.ts」でこの設定を行っています。

Google で認証を行う場合の問題点

Google による認証は便利でセキュリティ上も便利なのですが、幾つか問題点というか知っていた方が良い事がいくつかあります。

一つには、Web サービスの登録で E-Mail とパスワードの認証と Google の認証の両方を提供した場合、多くのサービスで E-Mail とパスワードを利用した認証を選択する人が圧倒的に多い事が経験上わかっています。

実は、Google の認証を利用する事自体は利用者にとってもメリットが大きいのですが、仕組みをよく知らない人の場合、Google のアカウントの情報が利用できるのではという疑念を持つ方も多いようで、利用している Google のアカウントを使用したくないのではないかと考えています。

実際は、Firebase の認証では、E-Mail のアドレスや名前程度の情報しか取得できません。

ビジネスで集客などを目的に会員サイトを作成する場合は、E-Mail アドレスとパスワードの認証も並行してサポートした方が良い結果がえられる場合が多いと思われます。

利用者のメリットは、必要以上にパスワードを覚えなくても（管理しなくても）良いと言う点と高いセキュリティと言うメリットがあるので、利用の際には説明すると良いかもしれません。

上手い利用方は？

一つおすすめの利用法は、管理用のユーザーで利用するとセキュリティが高いので安心です。通常の E-Mail アドレスとパスワードの認証ではパスワードが何らかの方法で破られたり漏れたりすると、管理者の権限で Web アプリやサービスで利用している Firebase にアクセスが可能になる場合があります。

Firebase の管理を、Firebase admin SDK などを利用して、管理アプリを作成している場合などは、余り大きな問題ではありませんが、サービスの一部として管理機能を組み込んでいる場合は、管理者のパスワードの管理は重要です。

こうした、管理のためのアカウントは E-Mail アドレスとパスワードのシンプルな認証よりは、大手のサービスのユーザー認証を利用した方がより高いセキュリティを得られます。

サービスを作成する際には、検討する価値のあるオプションだと思います。

まとめ

Firebase によるユーザー認証は、Google や Facebook、Twitter など大手のサービスの認証機能を利用して行うことも可能です。シンプルな E-Mail アドレスとパスワードによる認証に比べると、二段階認証などよりセキュリティの高い方法も選択できるので、Web アプリや Web サービスの管理機能を実装する場合のユーザー認証に利用する価値が高い機能です。

実際の実装も、E-Mail アドレスとパスワードを利用する実装よりは、パスワードの変更やリセット、本人確認なども大手のサービスプロバイダーがやってくれるのでシンプルにできます。さらに、予め用意された UI もあるので、さらに簡単にユーザー認証（ログイン機能）を初心者でも簡単に実装できるのも魅力です。

是非利用の検討をしてみてください！