JavaScript を使った Google ログインで認証する

Google ログインをアプリに統合して、ユーザーが Firebase での認証に Google アカウントを使用できるようにすることができます。Google ログインを統合するには、Firebase SDK を使用してログインフローを行うか、または Google ログインフローを手動で行って、取得した ID トークンを Firebase に渡します。

準備

  1. Firebase を JavaScript プロジェクトに追加します
  2. Firebase console で Google ログインを有効にします。
    1. Firebase console で [認証] を開きます。
    2. [ログイン方法] タブで [Google] を有効にし、[保存] をクリックします。

Firebase SDK でログインフローを処理する

ウェブアプリをビルドする場合に、Google アカウントを使用して Firebase でユーザーを認証する最も簡単な方法は、Firebase JavaScript SDK でログインフローを処理することです。(Node.js または他の非ブラウザ環境でユーザーを認証する場合、ログインフローを手動で処理する必要があります)。

Firebase JavaScript SDK でログインフローを処理するための手順は次のとおりです。

  1. Google プロバイダ オブジェクトのインスタンスを作成します。
    var provider = new firebase.auth.GoogleAuthProvider();
    
  2. 省略可: 認証プロバイダにリクエストする追加の OAuth 2.0 スコープを指定します。スコープを追加するには、addScope を呼び出します。次に例を示します。
    provider.addScope('https://www.googleapis.com/auth/plus.login');
    
    認証プロバイダ向けドキュメントをご覧ください。
  3. オプション: OAuth リクエストと一緒に送信したい追加のカスタム OAuth プロバイダ パラメータを指定します。カスタム パラメータを追加するには、OAuth プロバイダのドキュメントで指定されたキーと対応する値を含むオブジェクトで初期化されたプロバイダで setCustomParameters を呼び出します。次に例を示します。
    provider.setCustomParameters({
      'login_hint': 'user@example.com'
    });
    
    保存された必須 OAuth パラメーターは許可されず、無視されます。詳細については、認証プロバイダのリファレンスを参照してください。
  4. Google プロバイダ オブジェクトを使用して Firebase での認証を行います。ユーザーに Google アカウントでログインするよう促すために、ポップアップ ウィンドウを表示するか、ログインページにリダイレクトします。モバイル端末ではリダイレクトすることをおすすめします。
    • ポップアップ ウィンドウでログインを行う場合は、signInWithPopup を呼び出します。
      firebase.auth().signInWithPopup(provider).then(function(result) {
        // This gives you a Google Access Token. You can use it to access the Google API.
        var token = result.credential.accessToken;
        // The signed-in user info.
        var user = result.user;
        // ...
      }).catch(function(error) {
        // Handle Errors here.
        var errorCode = error.code;
        var errorMessage = error.message;
        // The email of the user's account used.
        var email = error.email;
        // The firebase.auth.AuthCredential type that was used.
        var credential = error.credential;
        // ...
      });
      
      また、Google プロバイダの OAuth トークンを取得することもできます。このトークンによって、Google API を使用して追加データをフェッチできます。

      ここではエラーの検出と対応もできます。エラーコードのリストについては、Auth のリファレンス ドキュメントをご覧ください。

    • ログインページにリダイレクトしてログインを行う場合は、signInWithRedirect を呼び出します。
      firebase.auth().signInWithRedirect(provider);
      
      次に、ページが読み込まれたときに getRedirectResult を呼び出すことによって、Google プロバイダの OAuth トークンを取得することもできます。
      firebase.auth().getRedirectResult().then(function(result) {
        if (result.credential) {
          // This gives you a Google Access Token. You can use it to access the Google API.
          var token = result.credential.accessToken;
          // ...
        }
        // The signed-in user info.
        var user = result.user;
      }).catch(function(error) {
        // Handle Errors here.
        var errorCode = error.code;
        var errorMessage = error.message;
        // The email of the user's account used.
        var email = error.email;
        // The firebase.auth.AuthCredential type that was used.
        var credential = error.credential;
        // ...
      });
      
      ここではエラーの検出と対応もできます。エラーコードのリストについては、Auth のリファレンス ドキュメントをご覧ください。

次のステップ

ユーザーが初めてログインすると新しいユーザー アカウントが作成され、ユーザーがログインに使用した認証情報(ユーザー名とパスワードや認証プロバイダ情報)にリンクされます。この新しいアカウントは Firebase プロジェクトの一部として保存され、ユーザーのログイン方法にかかわらず、プロジェクトのすべてのアプリでユーザーを識別するために使用できます。

  • アプリでユーザーの認証ステータスを把握するには、Auth オブジェクトにオブザーバーを設定することをおすすめします。これによって、ユーザーの基本的なプロフィール情報を User オブジェクトから取得できます。ユーザーの管理についての記事をご覧ください。

  • Firebase Realtime Database と Firebase Storage のセキュリティ ルールで、ログイン済みユーザーに固有のユーザー ID を auth 変数から取得し、これを使用してユーザーがアクセスできるデータを制御できます。

既存のユーザー アカウントに認証プロバイダの認証情報をリンクすることで、ユーザーが複数の認証プロバイダを使用してアプリにログインできるようになります。

ユーザーのログアウトを行うには signOut を呼び出します。

firebase.auth().signOut().then(function() {
  // Sign-out successful.
}, function(error) {
  // An error happened.
});

フィードバックを送信...