使用 Google 和 JavaScript 進行驗證

您可以讓使用者使用其 Google 帳號透過 Firebase 進行身份驗證。您可以使用 Firebase SDK 執行 Google 登入流程，也可以使用「使用 Google 登入」庫手動執行登入流程，並將產生的 ID 令牌傳遞給 Firebase。

在你開始之前

  1. 將 Firebase 新增到您的 JavaScript 專案。
  2. 在 Firebase 控制台中啟用 Google 作為登入方法：
    1. 在Firebase 控制台中，開啟「驗證」部分。
    2. 在登入方法標籤上，啟用Google登入方法並點擊儲存。

使用 Firebase SDK 處理登入流程

如果您正在建立網頁應用，使用 Google 帳戶對 Firebase 使用者進行身份驗證的最簡單方法是使用 Firebase JavaScript SDK 處理登入流程。 （如果您想在 Node.js 或其他非瀏覽器環境中對使用者進行身份驗證，則必須手動處理登入流程。）

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

  1. 建立 Google 提供者物件的實例：

    Web modular API

    import { GoogleAuthProvider } from "firebase/auth";

const provider = new GoogleAuthProvider();
    auth_google_provider_create.js

    Web namespaced API

    var provider = new firebase.auth.GoogleAuthProvider();
    google-signin.js
  2. 選用：指定您想要從身分驗證提供者要求的其他 OAuth 2.0 範圍。若要新增範圍，請呼叫addScope 。例如：

    Web modular API

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

    Web namespaced API

    provider.addScope('https://www.googleapis.com/auth/contacts.readonly');
    google-signin.js
    請參閱身份驗證提供者文件。
  3. 選用：若要將提供者的 OAuth 流程在地化為使用者的首選語言而不明確傳遞相關的自訂 OAuth 參數，請在啟動 OAuth 流程之前更新 Auth 實例上的語言程式碼。例如：

    Web modular 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

    Web namespaced API

    firebase.auth().languageCode = 'it';
// To apply the default browser preference instead of explicitly setting it.
// firebase.auth().useDeviceLanguage();
    index.js
  4. 可選：指定要與 OAuth 請求一起傳送的其他自訂 OAuth 提供者參數。若要新增自訂參數，請使用包含 OAuth 提供者文件指定的鍵和對應值的物件對初始化的提供者呼叫setCustomParameters 。例如：

    Web modular API

    provider.setCustomParameters({
  'login_hint': 'user@example.com'
});
    auth_google_provider_params.js

    Web namespaced API

    provider.setCustomParameters({
  'login_hint': 'user@example.com'
});
    google-signin.js
    不允許保留所需的 OAuth 參數，這些參數將被忽略。有關更多詳細信息，請參閱身份驗證提供者參考。
  5. 使用 Google 提供者物件透過 Firebase 進行身份驗證。您可以透過開啟彈出視窗或重定向到登入頁面來提示使用者使用其 Google 帳戶登入。重定向方法在行動裝置上是首選。
    • 若要使用彈出視窗登錄，請呼叫signInWithPopup ：

      Web modular 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

      Web namespaced 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 Reference Docs 。

    • 若要透過重定向到登錄頁面進行登錄，請呼叫signInWithRedirect ：遵循使用「signInWithRedirect」時的最佳實務。

      Web modular API

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

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

      Web namespaced API

      firebase.auth().signInWithRedirect(provider);
      index.js
      然後，您也可以在頁面載入時透過呼叫getRedirectResult來檢索 Google 提供者的 OAuth 令牌：

      Web modular 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

      Web namespaced 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 Reference Docs 。

在 Chrome 擴充功能中使用 Firebase 進行驗證

如果您正在建立 Chrome 擴充功能應用程式，則必須新增您的 Chrome 擴充功能 ID：

  1. 在Firebase 控制台中開啟您的專案。
  2. 在「身份驗證」部分中，開啟「登入方法」頁面。
  3. 將如下所示的 URI 加入到授權網域清單中： 
    chrome-extension://CHROME_EXTENSION_ID

Chrome 擴充功能只能使用彈出操作（ signInWithPopup 、 linkWithPopup和reauthenticateWithPopup ），因為 Chrome 擴充功能無法使用 HTTP 重新導向。您應該從後台頁面腳本而不是瀏覽器操作彈出視窗呼叫這些方法，因為身份驗證彈出視窗將取消瀏覽器操作彈出視窗。彈出方法只能在使用Manifest V2 的擴充中使用。較新的Manifest V3只允許 Service Worker 形式的後台腳本，根本無法執行彈出操作。

在 Chrome 擴充功能的清單檔案中，請確保將https://apis.google.com網址新增至content_security_policy白名單中。

下一步

使用者首次登入後，系統會建立新的使用者帳戶，並將其連結到使用者登入時所使用的憑證（即使用者名稱和密碼、電話號碼或驗證提供者資訊）。此新帳戶將作為 Firebase 專案的一部分存儲，並且可用於識別專案中每個應用程式中的用戶，無論用戶如何登入。

  • 在您的應用程式中，了解使用者身份驗證狀態的建議方法是在Auth物件上設定觀察者。然後，您可以從User物件中取得使用者的基本個人資料資訊。請參閱管理用戶。

  • 在 Firebase 即時資料庫和雲端儲存安全性規則中，您可以從auth變數取得登入使用者的唯一使用者 ID，並使用它來控制使用者可以存取哪些資料。

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

若要登出用戶，請呼叫signOut ：

Web modular 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

Web namespaced API

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