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

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

始める前に

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

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

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

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

Google プロバイダオブジェクトのインスタンスを作成します。
ウェブ向けのモジュラー API

ツリーシェイキングが可能なモジュラーウェブ API の詳細と、名前空間 API からのアップグレード方法をご確認ください。
```
import { GoogleAuthProvider } from "firebase/auth";

const provider = new GoogleAuthProvider();auth_google_provider_create.js
```
名前空間が指定されたウェブ API
```
var provider = new firebase.auth.GoogleAuthProvider();google-signin.js
```
省略可: 認証プロバイダにリクエストする追加の OAuth 2.0 スコープを指定します。スコープを追加するには、addScope を呼び出します。次に例を示します。
ウェブ向けのモジュラー API

ツリーシェイキングが可能なモジュラーウェブ API の詳細と、名前空間 API からのアップグレード方法をご確認ください。
```
provider.addScope('https://www.googleapis.com/auth/contacts.readonly');auth_google_provider_scopes.js
```
名前空間が指定されたウェブ API
```
provider.addScope('https://www.googleapis.com/auth/contacts.readonly');google-signin.js
```
認証プロバイダのドキュメントをご覧ください。
省略可: 関連するカスタム OAuth パラメータを明示的に渡すことなく、プロバイダの OAuth フローをローカライズしてユーザーの使用言語にするには、OAuth フローを開始する前に Auth インスタンスの言語コードを更新します。次に例を示します。
ウェブ向けのモジュラー API

ツリーシェイキングが可能なモジュラーウェブ API の詳細と、名前空間 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();auth_set_language_code.js
```
名前空間が指定されたウェブ API
```
firebase.auth().languageCode = 'it';
// To apply the default browser preference instead of explicitly setting it.
// firebase.auth().useDeviceLanguage();index.js
```
省略可: OAuth リクエストと一緒に送信する追加のカスタム OAuth プロバイダパラメータを指定します。カスタムパラメータを追加するには、OAuth プロバイダのドキュメントで指定されたキーと、対応する値を含むオブジェクトで初期化されたプロバイダで setCustomParameters を呼び出します。
ウェブ向けのモジュラー API

ツリーシェイキングが可能なモジュラーウェブ API の詳細と、名前空間 API からのアップグレード方法をご確認ください。
```
provider.setCustomParameters({
  'login_hint': 'user@example.com'
});auth_google_provider_params.js
```
名前空間が指定されたウェブ API
```
provider.setCustomParameters({
  'login_hint': 'user@example.com'
});google-signin.js
```
予約済みの必須 OAuth パラメータは許可されず、無視されます。詳細については、認証プロバイダのリファレンスをご覧ください。

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

ウェブ向けの名前空間付き 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-signin.js

また、Google プロバイダの OAuth トークンを取得し、Google API でそのトークンを使用して追加データをフェッチすることもできます。

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

ログインページにリダイレクトしてログインする場合は、signInWithRedirect を呼び出します。「signInWithRedirect」を使用する場合は、ベストプラクティスに従ってください。

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

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

const auth = getAuth();
signInWithRedirect(auth, provider);auth_signin_redirect.js

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

firebase.auth().signInWithRedirect(provider);index.js

次に、ページが読み込まれたときに 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);
    // ...
  });auth_google_signin_redirect_result.js

名前空間が指定されたウェブ 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;
    // ...
  });google-signin.js

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

account-exists-with-different-credential エラーの処理

Firebase コンソールで [1 つのメールアドレスにつき 1 つのアカウント] 設定を有効にしている場合、Firebase ユーザーが、あるプロバイダ（Facebook など）用にすでに存在しているメールアドレスを使って別のプロバイダ（Google など）にログインしようとすると、AuthCredential オブジェクト（Google ID トークン）とともにエラー auth/account-exists-with-different-credential がスローされます。目的のプロバイダにログインするには、まず既存のプロバイダ（Facebook）にログインしてから、目的のプロバイダの AuthCredential（Google ID トークン）にリンクする必要があります。

signInWithPopup を使用する場合、次のようなコードによって auth/account-exists-with-different-credential エラーを処理できます。


// Step 1.
// User tries to sign in to Google.
auth.signInWithPopup(new firebase.auth.GoogleAuthProvider()).catch(function(error) {
  // An error happened.
  if (error.code === 'auth/account-exists-with-different-credential') {
    // Step 2.
    // User's email already exists.
    // The pending Google credential.
    var pendingCred = error.credential;
    // The provider account's email address.
    var email = error.email;
    // Get sign-in methods for this email.
    auth.fetchSignInMethodsForEmail(email).then(function(methods) {
      // Step 3.
      // If the user has several sign-in methods,
      // the first method in the list will be the "recommended" method to use.
      if (methods[0] === 'password') {
        // Asks the user their password.
        // In real scenario, you should handle this asynchronously.
        var password = promptUserForPassword(); // TODO: implement promptUserForPassword.
        auth.signInWithEmailAndPassword(email, password).then(function(result) {
          // Step 4a.
          return result.user.linkWithCredential(pendingCred);
        }).then(function() {
          // Google account successfully linked to the existing Firebase user.
          goToApp();
        });
        return;
      }
      // All the other cases are external providers.
      // Construct provider object for that provider.
      // TODO: implement getProviderForProviderId.
      var provider = getProviderForProviderId(methods[0]);
      // At this point, you should let the user know that they already have an account
      // but with a different provider, and let them validate the fact they want to
      // sign in with this provider.
      // Sign in to provider. Note: browsers usually block popup triggered asynchronously,
      // so in real scenario you should ask the user to click on a "continue" button
      // that will trigger the signInWithPopup.
      auth.signInWithPopup(provider).then(function(result) {
        // Remember that the user may have signed in with an account that has a different email
        // address than the first one. This can happen as Firebase doesn't control the provider's
        // sign in flow and the user is free to login using whichever account they own.
        // Step 4b.
        // Link to Google credential.
        // As we have access to the pending credential, we can directly call the link method.
        result.user.linkAndRetrieveDataWithCredential(pendingCred).then(function(usercred) {
          // Google account successfully linked to the existing Firebase user.
          goToApp();
        });
      });
    });
  }
});

リダイレクトモード

このエラーはリダイレクトモードでも同様の方法で処理されますが、ページをリダイレクトする間、保留された認証情報をキャッシュに保存する必要がある点が異なります（セッションストレージなどを使用します）。

Google アカウントを使用して Firebase で認証を行えるようにするために、「Google でログイン」ライブラリを使用してログインフローを処理することもできます。

統合ガイドに沿って、「Google でログイン」をアプリに統合します。必ず Firebase プロジェクト用の生成された Google クライアント ID を使用して Google ログインを構成します。プロジェクトの Google クライアント ID は、プロジェクトの Developers Console の認証情報ページにあります。

ログインによって発生するコールバックで、Google の認証応答からの ID トークンを Firebase 認証情報と交換し、それを使用して Firebase での認証を行います。

function handleCredentialResponse(response) {
  // Build Firebase credential with the Google ID token.
  const idToken = response.credential;
  const credential = GoogleAuthProvider.credential(idToken);

  // Sign in with credential from the Google user.
  signInWithCredential(auth, credential).catch((error) => {
    // Handle Errors here.
    const errorCode = error.code;
    const errorMessage = error.message;
    // The email of the user's account used.
    const email = error.email;
    // The credential that was used.
    const credential = GoogleAuthProvider.credentialFromError(error);
    // ...
  });
}

高度: Node.js 内で Firebase に対する認証を行う

Node.js アプリケーションで Firebase により認証する手順は、次のとおりです。

Google アカウントにログインし、Google ID トークンを取得します。これには複数の方法があります。例:
- アプリにブラウザのフロントエンドがある場合、手動でログインフローを処理するセクションに記載されている Google ログインを使用します。auth レスポンスから Google ID トークンを取得します。
```
var id_token = googleUser.getAuthResponse().id_token
```
  次に、このトークンを Node.js アプリに送信します。
- アプリがテレビなどの入力機能が制限されたデバイス上で実行される場合、テレビおよびデバイスでの Google ログインの手順を行います。

ユーザーの Google ID トークンを取得した後、そのトークンを使用して認証情報オブジェクトをビルドしてから、認証情報でユーザーにログインします。

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

import { getAuth, signInWithCredential, GoogleAuthProvider } from "firebase/auth";

// Build Firebase credential with the Google ID token.
const credential = GoogleAuthProvider.credential(id_token);

// Sign in with credential from the Google user.
const auth = getAuth();
signInWithCredential(auth, credential).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);
  // ...
});auth_google_build_signin.js

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

// Build Firebase credential with the Google ID token.
var credential = firebase.auth.GoogleAuthProvider.credential(id_token);

// Sign in with credential from the Google user.
firebase.auth().signInWithCredential(credential).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-signin.js

Chrome 拡張機能での Firebase 認証

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

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

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

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

プロジェクトの作成時に、Firebase は次のようなプロジェクト固有のサブドメインをプロビジョニングします。https://my-app-12345.firebaseapp.com

これは、OAuth ログインのリダイレクトメカニズムとしても使用されます。このドメインは、サポートされているすべての OAuth プロバイダに許可される必要があります。この場合、ユーザーが Google にログインしている間、アプリケーションにリダイレクトする前に、Continue to: https://my-app-12345.firebaseapp.com のようにドメインを含むメッセージが表示される可能性があります。

サブドメインが表示されないようにするには、Firebase Hosting でカスタムドメインを設定します。

Hosting 用にドメインを設定するの手順 1～3 を行います。ドメインの所有権を確認すると、Hosting はカスタムドメイン向けに SSL 証明書をプロビジョニングします。
Firebase コンソールで、認可済みドメインのリストにカスタムドメイン auth.custom.domain.com を追加します。
Google のデベロッパーコンソールまたは OAuth 設定ページで、リダイレクトページの URL（https://auth.custom.domain.com/__/auth/handler）を許可リストに登録します。これにより、カスタムドメインでアクセス可能になります。

JavaScript ライブラリを初期化するときに、authDomain フィールドにカスタムドメインを指定します。

var config = {
  apiKey: '...',
  // Changed from 'my-app-12345.firebaseapp.com'.
  authDomain: 'auth.custom.domain.com',
  databaseURL: 'https://my-app-12345.firebaseio.com',
  projectId: 'my-app-12345',
  storageBucket: 'my-app-12345.appspot.com',
  messagingSenderId: '1234567890'
};
firebase.initializeApp(config);

次のステップ

ユーザーが初めてログインすると、新しいユーザーアカウントが作成され、ユーザーがログイン時に使用した認証情報（ユーザー名とパスワード、電話番号、または認証プロバイダ情報）にアカウントがリンクされます。この新しいアカウントは 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.
});auth_sign_out.js

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

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

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

始める前に

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

account-exists-with-different-credential エラーの処理

ポップアップ モード

リダイレクト モード

高度: 手動によるログインフローの処理

高度: Node.js 内で Firebase に対する認証を行う

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

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

Chrome 拡張機能での Firebase 認証

Google ログインのリダイレクト ドメインのカスタマイズ

次のステップ

ウェブ モジュラー API

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

ポップアップモード

リダイレクトモード

Google ログインのリダイレクトドメインのカスタマイズ

ウェブモジュラー API