JavaScript による Google を使用した認証

ユーザーは Firebase での認証に Google アカウントを使用できます。これには、Firebase SDK を使用して Google ログインフローを実行する方法と、「Google でログイン」ライブラリを使用し、生成された ID トークンを Firebase に渡すことでログインフローを手動で実行する方法があります。

始める前に

  1. Firebase を JavaScript プロジェクトに追加します
  2. Firebase コンソールで、ログイン方法として Google を有効にします。
    1. Firebase コンソールで [Authentication] セクションを開きます。
    2. [Sign-in method] タブで [Google] を有効にし、[保存] をクリックします。

Firebase SDK を使用したログインフローの処理

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

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

  1. Google プロバイダ オブジェクトのインスタンスを作成します。

    ウェブ向けのモジュラー API

    import { GoogleAuthProvider } from "firebase/auth";
    
    const provider = new GoogleAuthProvider();

    名前空間が指定されたウェブ API

    var provider = new firebase.auth.GoogleAuthProvider();
  2. 省略可: 認証プロバイダにリクエストする追加の OAuth 2.0 スコープを指定します。スコープを追加するには、addScope を呼び出します。次に例を示します。

    ウェブ向けのモジュラー API

    provider.addScope('https://www.googleapis.com/auth/contacts.readonly');

    名前空間が指定されたウェブ API

    provider.addScope('https://www.googleapis.com/auth/contacts.readonly');
    認証プロバイダのドキュメントをご覧ください。
  3. 省略可: 関連するカスタム OAuth パラメータを明示的に渡すことなく、プロバイダの OAuth フローをローカライズしてユーザーの使用言語にするには、OAuth フローを開始する前に Auth インスタンスの言語コードを更新します。次に例を示します。

    ウェブ向けのモジュラー API

    import { getAuth } from "firebase/auth";
    
    const auth = getAuth();
    auth.languageCode = 'it';
    // To apply the default browser preference instead of explicitly setting it.
    // auth.useDeviceLanguage();

    名前空間が指定されたウェブ API

    firebase.auth().languageCode = 'it';
    // To apply the default browser preference instead of explicitly setting it.
    // firebase.auth().useDeviceLanguage();
  4. 省略可: OAuth リクエストと一緒に送信する追加のカスタム OAuth プロバイダ パラメータを指定します。カスタム パラメータを追加するには、OAuth プロバイダのドキュメントで指定されたキーと、対応する値を含むオブジェクトで初期化されたプロバイダで setCustomParameters を呼び出します。

    ウェブ向けのモジュラー API

    provider.setCustomParameters({
      'login_hint': 'user@example.com'
    });

    名前空間が指定されたウェブ API

    provider.setCustomParameters({
      'login_hint': 'user@example.com'
    });
    予約済みの必須 OAuth パラメータは許可されず、無視されます。詳細については、認証プロバイダのリファレンスをご覧ください。
  5. Google プロバイダ オブジェクトを使用して Firebase での認証を行います。ユーザーに Google アカウントでログインするよう促すために、ポップアップ ウィンドウを表示するか、ログインページにリダイレクトします。モバイル デバイスではリダイレクトすることをおすすめします。
    • ポップアップ ウィンドウでログインを行う場合は、signInWithPopup を呼び出します。

      ウェブ向けのモジュラー API

      import { getAuth, signInWithPopup, GoogleAuthProvider } from "firebase/auth";
      
      const auth = getAuth();
      signInWithPopup(auth, provider)
        .then((result) => {
          // This gives you a Google Access Token. You can use it to access the Google API.
          const credential = GoogleAuthProvider.credentialFromResult(result);
          const token = credential.accessToken;
          // The signed-in user info.
          const user = result.user;
          // IdP data available using getAdditionalUserInfo(result)
          // ...
        }).catch((error) => {
          // Handle Errors here.
          const errorCode = error.code;
          const errorMessage = error.message;
          // The email of the user's account used.
          const email = error.customData.email;
          // The AuthCredential type that was used.
          const credential = GoogleAuthProvider.credentialFromError(error);
          // ...
        });

      ウェブ向けの名前空間付き API

      firebase.auth()
        .signInWithPopup(provider)
        .then((result) => {
          /** @type {firebase.auth.OAuthCredential} */
          var credential = result.credential;
      
          // This gives you a Google Access Token. You can use it to access the Google API.
          var token = credential.accessToken;
          // The signed-in user info.
          var user = result.user;
          // IdP data available in result.additionalUserInfo.profile.
            // ...
        }).catch((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 を呼び出します。「signInWithRedirect」を使用する場合は、ベスト プラクティスに従ってください。

      ウェブ向けのモジュラー API

      import { getAuth, signInWithRedirect } from "firebase/auth";
      
      const auth = getAuth();
      signInWithRedirect(auth, provider);

      ウェブ向けの名前空間付き API

      firebase.auth().signInWithRedirect(provider);
      次に、ページが読み込まれたときに getRedirectResult を呼び出すことによって、Google プロバイダの OAuth トークンを取得することもできます。

      ウェブ向けのモジュラー API

      import { getAuth, getRedirectResult, GoogleAuthProvider } from "firebase/auth";
      
      const auth = getAuth();
      getRedirectResult(auth)
        .then((result) => {
          // This gives you a Google Access Token. You can use it to access Google APIs.
          const credential = GoogleAuthProvider.credentialFromResult(result);
          const token = credential.accessToken;
      
          // The signed-in user info.
          const user = result.user;
          // IdP data available using getAdditionalUserInfo(result)
          // ...
        }).catch((error) => {
          // Handle Errors here.
          const errorCode = error.code;
          const errorMessage = error.message;
          // The email of the user's account used.
          const email = error.customData.email;
          // The AuthCredential type that was used.
          const credential = GoogleAuthProvider.credentialFromError(error);
          // ...
        });

      名前空間が指定されたウェブ API

      firebase.auth()
        .getRedirectResult()
        .then((result) => {
          if (result.credential) {
            /** @type {firebase.auth.OAuthCredential} */
            var credential = result.credential;
      
            // This gives you a Google Access Token. You can use it to access the Google API.
            var token = credential.accessToken;
            // ...
          }
          // The signed-in user info.
          var user = result.user;
          // IdP data available in result.additionalUserInfo.profile.
            // ...
        }).catch((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 のリファレンス ドキュメントをご覧ください。

Chrome 拡張機能での Firebase 認証

Chrome 拡張機能アプリを作成する場合は、Chrome 拡張機能 ID を追加する必要があります。

  1. Firebase コンソールでプロジェクトを開きます。
  2. [Authentication] セクションで、[Sign-in method] ページを開きます。
  3. 承認済みドメインのリストに、次のような URI を追加します。
    chrome-extension://CHROME_EXTENSION_ID

Chrome 拡張機能では HTTP リダイレクトを使用できないため、Chrome 拡張機能ではポップアップ オペレーション(signInWithPopuplinkWithPopupreauthenticateWithPopup)のみを使用できます。認証ポップアップはブラウザのアクション ポップアップをキャンセルするため、ブラウザのアクション ポップアップではなくバックグラウンド ページ スクリプトからこれらのメソッドを呼び出す必要があります。ポップアップ メソッドは、Manifest V2 を使用する拡張機能でのみ使用できます。新しい Manifest V3 では、Service Worker 形式のバックグラウンド スクリプトのみが許可されます。そのため、ポップアップ オペレーションは一切実行できません。

Chrome 拡張機能のマニフェスト ファイルで、https://apis.google.com URL を content_security_policy 許可リストに必ず追加してください。

次のステップ

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

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

  • Firebase Realtime Database と Cloud Storage のセキュリティ ルールでは、ログイン済みユーザーの一意のユーザー ID を auth 変数から取得し、それを使用して、ユーザーがアクセスできるデータを管理できます。

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

ユーザーをログアウトするには、signOut を呼び出します。

ウェブ モジュラー API

import { getAuth, signOut } from "firebase/auth";

const auth = getAuth();
signOut(auth).then(() => {
  // Sign-out successful.
}).catch((error) => {
  // An error happened.
});

名前空間が指定されたウェブ API

firebase.auth().signOut().then(() => {
  // Sign-out successful.
}).catch((error) => {
  // An error happened.
});