このページは Cloud Translation API によって翻訳されました。

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

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

あなたが始める前に

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

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

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

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

Google プロバイダーオブジェクトのインスタンスを作成します。
Web version 9
ツリーシェーク可能な Web v9 モジュラー SDK とバージョン 8 からのアップグレードの詳細をご覧ください。
```
import { GoogleAuthProvider } from "firebase/auth";

const provider = new GoogleAuthProvider();auth_google_provider_create.js
```
Web version 8
```
var provider = new firebase.auth.GoogleAuthProvider();google-signin.js
```
オプション: 認証プロバイダーから要求する追加の OAuth 2.0 スコープを指定します。スコープを追加するには、 addScopeを呼び出します。例えば：
Web version 9
ツリーシェーク可能な Web v9 モジュラー SDK とバージョン 8 からのアップグレードの詳細をご覧ください。
```
provider.addScope('https://www.googleapis.com/auth/contacts.readonly');auth_google_provider_scopes.js
```
Web version 8
```
provider.addScope('https://www.googleapis.com/auth/contacts.readonly');google-signin.js
```
認証プロバイダーのドキュメントを参照してください。
オプション: 関連するカスタム OAuth パラメーターを明示的に渡さずにプロバイダーの OAuth フローをユーザーの優先言語にローカライズするには、OAuth フローを開始する前に Auth インスタンスの言語コードを更新します。例えば：
Web version 9
ツリーシェーク可能な Web v9 モジュラー SDK とバージョン 8 からのアップグレードの詳細をご覧ください。
```
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();auth_set_language_code.js
```
Web version 8
```
firebase.auth().languageCode = 'it';
// To apply the default browser preference instead of explicitly setting it.
// firebase.auth().useDeviceLanguage();index.js
```
オプション: OAuth 要求で送信する追加のカスタム OAuth プロバイダーパラメーターを指定します。カスタムパラメータを追加するには、OAuth プロバイダのドキュメントで指定されているキーと対応する値を含むオブジェクトを使用して、初期化されたプロバイダでsetCustomParametersを呼び出します。例えば：
Web version 9
ツリーシェーク可能な Web v9 モジュラー SDK とバージョン 8 からのアップグレードの詳細をご覧ください。
```
provider.setCustomParameters({
  'login_hint': 'user@example.com'
});auth_google_provider_params.js
```
Web version 8
```
provider.setCustomParameters({
  'login_hint': 'user@example.com'
});google-signin.js
```
予約済みの必須 OAuth パラメータは許可されておらず、無視されます。詳細については、認証プロバイダーのリファレンスを参照してください。

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;
    // 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

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

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

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

Web version 9

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

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

Web version 8

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

次に、ページの読み込み時に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;
    // 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

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;
    // 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 Reference Docsを参照してください。

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

Firebase コンソールで [電子メールアドレスごとに 1 つのアカウント] 設定を有効にした場合、ユーザーが別の Firebase ユーザーのプロバイダー (Facebook など) 用に既に存在する電子メールを使用してプロバイダー (Google など) にサインインしようとすると、エラーauth/account-exists-with-different-credentialがAuthCredentialオブジェクト (Google ID トークン) と共にスローされます。目的のプロバイダーへのサインインを完了するには、ユーザーはまず既存のプロバイダー (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();
        });
      });
    });
  }
});

リダイレクトモード

このエラーは、リダイレクトモードでも同様の方法で処理されますが、ページリダイレクト間で保留中の資格情報をキャッシュする必要があるという違いがあります (たとえば、セッションストレージを使用)。

統合ガイドに従って、Sign In With Google をアプリに統合します。 Firebase プロジェクト用に生成された Google クライアント ID を使用して Google ログインを構成してください。プロジェクトの Google クライアント ID は、プロジェクトの Developers Console Credentials ページで確認できます。

サインイン結果のコールバックで、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 サインインを使用します。認証応答から Google ID トークンを取得します:
```
var id_token = googleUser.getAuthResponse().id_token
```
  次に、このトークンを Node.js アプリに送信します。
- テレビなど、入力機能が制限されたデバイスでアプリを実行する場合は、テレビとデバイス向けの Google ログインフローを使用できます。

ユーザーの Google ID トークンを取得したら、それを使用して資格情報オブジェクトを作成し、資格情報を使用してユーザーをサインインさせます。

Web version 9

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

Web version 8

// 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 コンソールでプロジェクトを開きます。
[認証]セクションで、[サインイン方法] ページを開きます。
次のような URI を承認済みドメインのリストに追加します:
```
chrome-extension://CHROME_EXTENSION_ID
```

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

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

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

これは、OAuth サインインのリダイレクトメカニズムとしても使用されます。そのドメインは、サポートされているすべての OAuth プロバイダーに対して許可する必要があります。ただし、これは、アプリケーションにリダイレクトする前に、ユーザーが Google にサインインしているときにそのドメインが表示される可能性があることを意味します。

サブドメインが表示されないようにするには、Firebase 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を呼び出します。

Web version 9

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

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

Web version 8

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

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

あなたが始める前に

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

Web version 9

Web version 8

Web version 9

Web version 8

Web version 9

Web version 8

Web version 9

Web version 8

Web version 9

Web version 8

Web version 9

Web version 8

Web version 9

Web version 8

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

ポップアップモード

リダイレクト モード

高度: サインイン フローを手動で処理する

高度: Node.js で Firebase を使用して認証する

Web version 9

Web version 8

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

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

次のステップ

Web version 9

Web version 8

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

リダイレクトモード

高度: サインインフローを手動で処理する

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