本頁面由 Cloud Translation API 翻譯而成。

透過 Google 登入使用者

本文說明如何使用 Identity Platform，透過 Google 登入使用者帳戶。

事前準備

本教學課程假設您已啟用 Identity Platform，並使用 HTML 和 JavaScript 編寫基本網頁應用程式。如要瞭解操作方式，請參閱快速入門導覽課程。

將 Google 設定為提供者

如要將 Google 設定為識別資訊提供者，請按照下列步驟操作：

前往 Google Cloud 控制台的「Identity Providers」(識別資訊提供者) 頁面。

前往「Identity Providers」頁面
按一下「Add A Provider」(新增提供者)。
從清單中選取「Google」。
輸入 Google 網頁用戶端 ID 和網頁密鑰。如果還沒有 ID 和密鑰，請前往「API 和服務」頁面取得。
將「設定 Google」下方列出的 URI，設定為 Google 應用程式的有效 OAuth 重新導向 URI。如果您在 Identity Platform 中設定了自訂網域，請更新 Google 應用程式設定中的重新導向 URI，改用自訂網域，而非預設網域。例如，將 https://myproject.firebaseapp.com/__/auth/handler 變更為 https://auth.myownpersonaldomain.com/__/auth/handler。
按一下「已授權網域」下方的「新增網域」，註冊應用程式的網域。為方便開發，localhost 預設為啟用狀態。

重要事項： 在 2025 年 4 月 28 日後建立的專案中，Identity Platform 不再預設將 localhost 設為授權網域。Google 強烈建議不要在正式環境專案中使用 localhost。如要授權 localhost，請在「設定」頁面的「已授權網域」中，按一下「新增網域」手動新增。
在「設定應用程式」下方，按一下「設定詳細資料」。將程式碼片段複製到應用程式的程式碼中，初始化 Identity Platform 用戶端 SDK。
按一下「儲存」。

透過用戶端 SDK 登入使用者

建立 Google 供應商物件的執行個體：

網頁版 9

import { GoogleAuthProvider } from "firebase/auth";

const provider = new GoogleAuthProvider();auth_google_provider_create.js

網頁版 8

var provider = new firebase.auth.GoogleAuthProvider();google-signin.js

選填：新增 OAuth 範圍。範圍會指定您向 Google 要求的資料。如要存取更敏感的資料，可能需要特定範圍。請參閱供應商的說明文件，判斷應用程式需要哪些範圍。
網頁版 9
```
provider.addScope('https://www.googleapis.com/auth/contacts.readonly');auth_google_provider_scopes.js
```
網頁版 8
```
provider.addScope('https://www.googleapis.com/auth/contacts.readonly');google-signin.js
```

選用：將驗證流程在地化。你可以指定語言，或使用裝置的預設語言：

網頁版 9

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

網頁版 8

firebase.auth().languageCode = 'it';
// To apply the default browser preference instead of explicitly setting it.
// firebase.auth().useDeviceLanguage();index.js

選用：指定其他自訂 OAuth 參數。這些參數是 Google 專屬參數，通常用於自訂驗證體驗。您無法傳遞 OAuth 或 Identity Platform 保留的參數。
網頁版 9
```
provider.setCustomParameters({
  'login_hint': 'user@example.com'
});auth_google_provider_params.js
```
網頁版 8
```
provider.setCustomParameters({
  'login_hint': 'user@example.com'
});google-signin.js
```

使用 Google 提供者物件登入使用者。您可以開啟彈出式視窗，或重新導向目前頁面。行動裝置使用者更容易重新導向。

如要顯示彈出式視窗，請呼叫 signInWithPopup()：

網頁版 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

網頁版 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

如要重新導向頁面，請先呼叫 signInWithRedirect()。

使用 signInWithRedirect、linkWithRedirect 或 reauthenticateWithRedirect 時，請遵循最佳做法。

網頁版 9

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

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

網頁版 8

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

然後在網頁載入時呼叫 getRedirectResult()，擷取 Google 權杖：

網頁版 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

網頁版 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

取得存取權杖後，即可用來呼叫 Google API。例如：

REST

curl -H "Authorization: Bearer [TOKEN]" https://www.googleapis.com/oauth2/v2/userinfo

手動登入使用者

如果不想使用用戶端 SDK，也可以手動處理登入流程：

按照開發人員說明文件中的步驟，將 Google 驗證功能整合至應用程式。
使用您在上一步實作的流程，透過 Google 登入使用者帳戶。

將從 Google 收到的權杖換成 Identity Platform 憑證：

網頁版 9

import { GoogleAuthProvider } from "firebase/auth";

const credential = GoogleAuthProvider.credential(idToken);auth_google_provider_credential.js

網頁版 8

var credential = firebase.auth.GoogleAuthProvider.credential(idToken);google-signin.js

使用憑證透過 Identity Platform 登入使用者：

網頁版 9

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

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

網頁版 8

// Sign in with the credential from the user.
firebase.auth()
  .signInWithCredential(credential)
  .then((result) => {
    // Signed in 
    // ...
  })
  .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;
    // ...
  });index.js

後續步驟

進一步瞭解 Identity Platform 使用者。
透過其他身分識別提供者登入使用者。