透過 JavaScript 使用 Google 驗證

您可以讓使用者透過 Google 帳戶，使用 Firebase 驗證服務。您可以選擇使用 Firebase SDK 執行 Google 登入流程，也可以使用「使用 Google 帳戶登入」程式庫手動執行登入流程，並將產生的 ID 權杖傳遞至 Firebase。

事前準備

將 Firebase 新增至 JavaScript 專案。
在 Firebase 控制台中啟用 Google 做為登入方法：
1. 在 Firebase 控制台中，開啟「Auth」(驗證) 區段。
2. 在「登入方式」分頁標籤中，啟用「Google」登入方式，然後按一下「儲存」。
提示：如要使用 Firebase CLI，請執行 firebase init auth 來設定驗證供應商，然後執行 firebase deploy --only auth，將變更部署至專案。

使用 Firebase SDK 處理登入流程

如果您要建構網頁應用程式，最簡單的方法是使用 Firebase JavaScript SDK 處理登入流程，讓使用者透過 Google 帳戶驗證 Firebase。(如要在 Node.js 或其他非瀏覽器環境中驗證使用者，您必須手動處理登入流程)。

如要使用 Firebase JavaScript SDK 處理登入流程，請按照下列步驟操作：

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

Web

import { GoogleAuthProvider } from "firebase/auth";

const provider = new GoogleAuthProvider();auth_google_provider_create.js

Web

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

選用：指定要向驗證供應商要求的其他 OAuth 2.0 範圍。如要新增範圍，請呼叫 addScope。例如： <0x

Web

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

Web

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

請參閱驗證供應商說明文件。

選用：如要將供應商的 OAuth 流程本地化為使用者偏好的語言，而不需明確傳遞相關的自訂 OAuth 參數，請在啟動 OAuth 流程前，更新 Auth 執行個體上的語言代碼。例如： <0x

Web

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

Web

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

選用：指定要隨 OAuth 要求傳送的其他自訂 OAuth 供應商參數。如要新增自訂參數，請在已初始化的供應商上呼叫 setCustomParameters，並使用包含鍵的物件 (如 OAuth 供應商文件所指定) 和對應的值。例如： <0x
Web
```
provider.setCustomParameters({
  'login_hint': 'user@example.com'
});auth_google_provider_params.js
```
Web
```
provider.setCustomParameters({
  'login_hint': 'user@example.com'
});google-signin.js
```
系統不允許使用保留的必要 OAuth 參數，且會忽略這類參數。詳情請參閱驗證供應商參考資料。

使用 Google 供應商物件向 Firebase 進行驗證。您可以開啟彈出式視窗或重新導向至登入頁面，提示使用者登入 Google 帳戶。行動裝置偏好使用重新導向方法。

如要使用彈出式視窗登入，請呼叫 signInWithPopup：

Web

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

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 Reference Docs」。

如要重新導向至登入頁面來登入，請呼叫 signInWithRedirect：使用 `signInWithRedirect` 時，請遵循最佳做法。

Web

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

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

Web

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

然後，您也可以在網頁載入時呼叫 getRedirectResult，擷取 Google 供應商的 OAuth 權杖：

Web

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

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 控制台中啟用「每個電子郵件地址只能有一個帳戶」設定，當使用者嘗試使用已存在於其他 Firebase 使用者供應商 (例如 Facebook) 的電子郵件登入供應商 (例如 Google) 時，系統會擲回 auth/account-exists-with-different-credential 錯誤和 AuthCredential 物件 (Google ID 權杖)。如要完成登入預期供應商的程序，使用者必須先登入現有供應商 (Facebook)，然後連結至前者 AuthCredential (Google ID 權杖)。

如果您使用 signInWithPopup，可以透過下列範例程式碼處理 auth/account-exists-with-different-credential 錯誤：

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

try {
  // Step 1: User tries to sign in using Google.
  let result = await signInWithPopup(getAuth(), new GoogleAuthProvider());
} catch (error) {
  // Step 2: User's email already exists.
  if (error.code === "auth/account-exists-with-different-credential") {
    // The pending Google credential.
    let pendingCred = error.credential;

    // Step 3: Save the pending credential in temporary storage,

    // Step 4: Let the user know that they already have an account
    // but with a different provider, and let them choose another
    // sign-in method.
  }
}

// ...

try {
  // Step 5: Sign the user in using their chosen method.
  let result = await signInWithPopup(getAuth(), userSelectedProvider);

  // Step 6: Link to the Google credential.
  // TODO: implement `retrievePendingCred` for your app.
  let pendingCred = retrievePendingCred();

  if (pendingCred !== null) {
    // As you have access to the pending credential, you can directly call the
    // link method.
    let user = await linkWithCredential(result.user, pendingCred);
  }

  // Step 7: Continue to app.
} catch (error) {
  // ...
}

重新導向模式

在重新導向模式中，系統會以類似方式處理這項錯誤，但待處理的憑證必須在網頁重新導向之間快取 (例如使用工作階段儲存空間)。

您也可以使用「使用 Google 帳戶登入」程式庫處理登入流程，透過 Google 帳戶向 Firebase 進行驗證：

按照整合指南，將「使用 Google 帳戶登入」功能整合至應用程式。請務必使用為 Firebase 專案產生的 Google 用戶端 ID 設定 Google 登入。您可以在專案的開發人員控制台「憑證」頁面中，找到專案的 Google 用戶端 ID。

在登入結果回呼中，將 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 權杖後，請使用該權杖建構 Credential 物件，然後使用該憑證登入使用者：

Web

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

// 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 擴充功能應用程式，請參閱螢幕外文件指南。

建立專案時，Firebase 會為專案佈建專屬子網域： https://my-app-12345.firebaseapp.com。

這也會做為 OAuth 登入的重新導向機制。您必須允許所有支援的 OAuth 供應商使用該網域。不過，這表示使用者在登入 Google 時，可能會看到該網域，然後系統才會將他們重新導向應用程式：繼續前往：https://my-app-12345.firebaseapp.com。

如要避免顯示子網域，可以透過 Firebase Hosting 設定自訂網域：

請按照「為 Hosting 設定網域」一文中的步驟 1 到 3 操作。驗證網域擁有權後，Hosting 會為自訂網域佈建 SSL 憑證。
在 Firebase 控制台中，將自訂網域新增至授權網域清單：auth.custom.domain.com。
在 Google 開發人員控制台或 OAuth 設定頁面中，將重新導向頁面的網址加入許可清單，該網址將可透過自訂網域存取：https://auth.custom.domain.com/__/auth/handler。

初始化 JavaScript 程式庫時，請使用 authDomain 欄位指定自訂網域：

var config = {
  apiKey: '...',
  // Changed from 'PROJECT_ID.firebaseapp.com'.
  authDomain: 'auth.custom.domain.com',
  databaseURL: 'https://PROJECT_ID.firebaseio.com',
  projectId: 'PROJECT_ID',
  storageBucket: 'PROJECT_ID.firebasestorage.app',
  messagingSenderId: 'SENDER_ID'
};
firebase.initializeApp(config);

後續步驟

使用者首次登入後，系統會建立新的使用者帳戶，並連結至使用者登入時使用的憑證 (即使用者名稱和密碼、電話號碼或驗證供應商資訊)。這個新帳戶會儲存在 Firebase 專案中，可用於識別專案中每個應用程式的使用者，無論使用者登入方式為何。

在應用程式中，如要瞭解使用者的驗證狀態，建議在 Auth 物件上設定觀察器。接著，您就可以從 User 物件取得使用者的基本個人資料資訊。請參閱「管理使用者」。
在 Firebase Realtime Database 和 Cloud Storage 安全規則中，您可以從 auth 變數取得已登入使用者的專屬使用者 ID，並使用該 ID 控制使用者可存取的資料。

您可以將驗證供應商憑證連結至現有使用者帳戶，允許使用者透過多個驗證供應商登入應用程式。

如要登出使用者，請呼叫 signOut：

Web

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

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