Google は、黒人コミュニティのための人種的公平の促進に取り組んでいます。詳細をご覧ください。

JavaScriptでGoogleを使用して認証する

コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。

ユーザーがGoogleアカウントを使用してFirebaseで認証できるようにすることができます。 Firebase SDKを使用してGoogleサインインフローを実行するか、Sign In WithGoogleライブラリを使用して手動でサインインフローを実行し、結果のIDトークンをFirebaseに渡すことができます。

あなたが始める前に

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

FirebaseSDKを使用してログインフローを処理する

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

Firebase JavaScript SDKでサインインフローを処理するには、次の手順に従います。

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

    Web version 9

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

    Web version 8

    var provider = new firebase.auth.GoogleAuthProvider();
  2. オプション:認証プロバイダーに要求する追加のOAuth2.0スコープを指定します。スコープを追加するには、 addScopeを呼び出します。例えば:

    Web version 9

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

    Web version 8

    provider.addScope('https://www.googleapis.com/auth/contacts.readonly');
    認証プロバイダーのドキュメントを参照してください。
  3. オプション:関連するカスタムOAuthパラメーターを明示的に渡さずに、プロバイダーのOAuthフローをユーザーの優先言語にローカライズするには、OAuthフローを開始する前にAuthインスタンスの言語コードを更新します。例えば:

    Web version 9

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

    Web version 8

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

    Web version 9

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

    Web version 8

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

      Web version 9

      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;
          // ...
        }).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);
          // ...
        });

      Web version 8

      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;
          // ...
        }).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;
          // ...
        });
      また、GoogleAPIを使用して追加データをフェッチするために使用できるGoogleプロバイダーのOAuthトークンを取得できることにも注意してください。

      これは、エラーをキャッチして処理できる場所でもあります。エラーコードのリストについては、 AuthReferenceDocsをご覧ください。

    • サインインページにリダイレクトしてサインインするには、 signInWithRedirectを呼び出します。

      Web version 9

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

      Web version 8

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

      Web version 9

      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;
        }).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);
          // ...
        });

      Web version 8

      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;
        }).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;
          // ...
        });
      これは、エラーをキャッチして処理できる場所でもあります。エラーコードのリストについては、 AuthReferenceDocsをご覧ください。

Chrome拡張機能でFirebaseを使用して認証する

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

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

Chrome拡張機能はHTTPリダイレクトを使用できないため、Chrome拡張機能で使用できるのはポップアップ操作( signInWithPopuplinkWithPopup 、およびreauthenticateWithPopup )のみです。認証ポップアップはブラウザアクションポップアップをキャンセルするため、これらのメソッドはブラウザアクションポップアップではなくバックグラウンドページスクリプトから呼び出す必要があります。ポップアップメソッドは、マニフェストV2を使用する拡張機能でのみ使用できます。新しいマニフェストV3では、サービスワーカー形式のバックグラウンドスクリプトのみが許可されており、ポップアップ操作をまったく実行できません。

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

次のステップ

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

  • アプリで、ユーザーの認証ステータスを知るための推奨される方法は、 Authオブジェクトにオブザーバーを設定することです。次に、 Userオブジェクトからユーザーの基本的なプロファイル情報を取得できます。ユーザーの管理を参照してください。

  • FirebaseRealtimeデータベースとCloudStorageのセキュリティルールでは、ログインしたユーザーの一意のユーザーIDをauth変数から取得し、それを使用してユーザーがアクセスできるデータを制御できます。

認証プロバイダーのクレデンシャルを既存のユーザーアカウントにリンクすることで、ユーザーが複数の認証プロバイダーを使用してアプリにサインインできるようにすることができます。

ユーザーをサインアウトするには、 signOutを呼び出します。

Web version 9

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

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

Web version 8

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