Firebase 将于 5 月 20 日至 21 日重返 Google I/O 大会！立即报名。

本頁面由 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 處理登入流程

如果您要建構網頁應用程式，透過 Firebase 驗證使用者 Google 帳戶最簡單的方法，就是使用 Firebase JavaScript SDK 處理登入流程。(如果您想在 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。例如：

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 例項的語言程式碼。例如：

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 提供者文件中指定的鍵和相應值。例如：
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 參考文件。

如要透過重新導向登入頁面來登入，請呼叫 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

您也可以在這裡捕捉及處理錯誤。如需錯誤代碼清單，請參閱驗證參考文件。

處理「account-exists-with-different-credential」錯誤

如果您在 Firebase 控制台中啟用「One account per email address」設定，當使用者嘗試使用另一個 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 登入功能。您可以在專案的 Developers Console 憑證頁面中找到專案的 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 權杖後，請使用該權杖建構憑證物件，然後使用憑證登入使用者：

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 時，可能會看到以下網域，然後再重新導向至應用程式：Continue to: 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