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

使用 GitHub 和 JavaScript 進行身份驗證

透過將 GitHub 驗證整合到您的應用程式中，您可以讓使用者使用其 GitHub 帳戶透過 Firebase 進行身份驗證。您可以透過使用 Firebase SDK 執行登入流程，或手動執行 GitHub OAuth 2.0 流程並將產生的存取權杖傳遞給 Firebase 來整合 GitHub 驗證。

在你開始之前

將 Firebase 新增到您的 JavaScript 專案。
在Firebase 控制台中，開啟「驗證」部分。
在登入方法標籤上，啟用GitHub提供者。
將客戶端 ID和客戶端金鑰從該提供者的開發人員控制台新增至提供者設定：
1. 在 GitHub上將您的應用程式註冊為開發人員應用程序，並獲取您的應用程式的 OAuth 2.0 Client ID和Client Secret 。
2. 確保您的 Firebase OAuth 重定向 URI （例如my-app-12345.firebaseapp.com/__/auth/handler ）在GitHub 應用程式 config 的應用程式設定頁面中設定為您的授權回調 URL 。
按一下「儲存」 。

使用 Firebase SDK 處理登入流程

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

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

建立 GitHub 提供者物件的實例：

Web modular API

import { GithubAuthProvider } from "firebase/auth";

const provider = new GithubAuthProvider();auth_github_provider_create.js

Web namespaced API

var provider = new firebase.auth.GithubAuthProvider();github.js

選用：指定您想要從身分驗證提供者要求的其他 OAuth 2.0 範圍。若要新增範圍，請呼叫addScope 。例如：
Web modular API
詳細了解可樹搖動的模組化 Web API 以及從命名空間 API進行升級。
```
provider.addScope('repo');auth_github_provider_scopes.js
```
Web namespaced API
```
provider.addScope('repo');github.js
```
請參閱身份驗證提供者文件。
可選：指定要與 OAuth 請求一起傳送的其他自訂 OAuth 提供者參數。若要新增自訂參數，請使用包含 OAuth 提供者文件指定的鍵和對應值的物件對初始化的提供者呼叫setCustomParameters 。例如：
Web modular API
詳細了解可樹搖動的模組化 Web API 以及從命名空間 API進行升級。
```
provider.setCustomParameters({
  'allow_signup': 'false'
});auth_github_provider_params.js
```
Web namespaced API
```
provider.setCustomParameters({
  'allow_signup': 'false'
});github.js
```
不允許保留所需的 OAuth 參數，這些參數將被忽略。有關更多詳細信息，請參閱身份驗證提供者參考。

使用 GitHub 提供者物件透過 Firebase 進行身份驗證。您可以透過開啟彈出視窗或重定向到登入頁面來提示使用者使用其 GitHub 帳戶登入。重定向方法在行動裝置上是首選。

若要使用彈出視窗登錄，請呼叫signInWithPopup ：

Web modular API

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

const auth = getAuth();
signInWithPopup(auth, provider)
  .then((result) => {
    // This gives you a GitHub Access Token. You can use it to access the GitHub API.
    const credential = GithubAuthProvider.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 = GithubAuthProvider.credentialFromError(error);
    // ...
  });auth_github_signin_popup.js

Web namespaced API

firebase
  .auth()
  .signInWithPopup(provider)
  .then((result) => {
    /** @type {firebase.auth.OAuthCredential} */
    var credential = result.credential;

    // This gives you a GitHub Access Token. You can use it to access the GitHub 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;
    // ...
  });github.js

另請注意，您可以檢索 GitHub 提供者的 OAuth 令牌，該令牌可用於使用 GitHub 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來檢索 GitHub 提供者的 OAuth 令牌：

Web modular API

import { getAuth, getRedirectResult, GithubAuthProvider } from "firebase/auth";

const auth = getAuth();
getRedirectResult(auth)
  .then((result) => {
    const credential = GithubAuthProvider.credentialFromResult(result);
    if (credential) {
      // This gives you a GitHub Access Token. You can use it to access the GitHub API.
      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 = GithubAuthProvider.credentialFromError(error);
    // ...
  });auth_github_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 GitHub Access Token. You can use it to access the GitHub 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;
    // ...
  });github.js

這也是您可以捕獲和處理錯誤的地方。有關錯誤代碼的列表，請查看Auth Reference Docs 。

處理帳戶存在不同憑證錯誤

如果您在Firebase 控制台中啟用了每個電子郵件地址一個帳戶設置，則當使用者嘗試使用另一Firebase 使用者的提供者（例如Google）已存在的電子郵件登入提供者（例如GitHub）時，會出現以下錯誤auth/account-exists-with-different-credential與AuthCredential物件（GitHub 存取權杖）一起拋出。要完成登入目標提供者，使用者必須先登入現有提供者 (Google)，然後連結到先前的AuthCredential （GitHub 存取權杖）。

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

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

try {
  // Step 1: User tries to sign in using GitHub.
  let result = await signInWithPopup(getAuth(), new GitHubAuthProvider());
} catch (error) {
  // Step 2: User's email already exists.
  if (error.code === "auth/account-exists-with-different-credential") {
    // The pending GitHub 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 GitHub 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) {
  // ...
}

重定向模式

在重定向模式下以類似的方式處理此錯誤，不同之處在於必須在頁面重定向之間快取掛起的憑證（例如，使用會話儲存）。

手動處理登入流程

您也可以透過呼叫 GitHub OAuth 2.0 端點處理登入流程，使用 GitHub 帳戶向 Firebase 進行驗證：

依照開發人員文件將 GitHub 驗證整合到您的應用程式中。在 GitHub 登入流程結束時，您將收到 OAuth 2.0 存取權杖。
如果您需要登入 Node.js 應用程序，請將 OAuth 存取權杖發送到 Node.js 應用程式。

使用者成功登入 GitHub 後，將 OAuth 2.0 存取權杖交換為 Firebase 憑證：

Web modular API

import { GithubAuthProvider } from "firebase/auth";

const credential = GithubAuthProvider.credential(token);auth_github_provider_credential.js

Web namespaced API

var credential = firebase.auth.GithubAuthProvider.credential(token);github.js

使用 Firebase 憑證進行 Firebase 驗證：

Web modular API

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

Web namespaced API

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

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

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

在Firebase 控制台中開啟您的專案。
在「身份驗證」部分中，開啟「登入方法」頁面。
將如下所示的 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 將為您的專案提供一個唯一的子網域： https://my-app-12345.firebaseapp.com 。

這也將用作 OAuth 登入的重定向機制。所有受支援的 OAuth 提供者都需要允許該網域。但是，這表示使用者在登入 GitHub 時可能會看到該網域，然後再重定向回應用程式：繼續造訪： https://my-app-12345.firebaseapp.com 。

為了避免顯示您的子網域，您可以使用 Firebase Hosting 設定自訂網域：

請依照設定您的託管網域中的步驟 1 到 3 進行操作。當您驗證網域所有權時，託管會為您的自訂網域提供 SSL 憑證。
將您的自訂網域新增至Firebase 控制台中的授權網域清單： auth.custom.domain.com 。
在 GitHub 開發人員控制台或 OAuth 設定頁面中，將重定向頁面的 URL 列入白名單，該 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 即時資料庫和雲端儲存安全性規則中，您可以從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

使用 GitHub 和 JavaScript 進行身份驗證

在你開始之前

使用 Firebase SDK 處理登入流程

Web modular API

Web namespaced API

Web modular API

Web namespaced API

Web modular API

Web namespaced API

Web modular API

Web namespaced API

Web modular API

Web namespaced API

Web modular API

Web namespaced API

處理帳戶存在不同憑證錯誤

彈出模式

重定向模式

手動處理登入流程

Web modular API

Web namespaced API

Web modular API

Web namespaced API

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

自訂 GitHub 登入的重定向網域

下一步

Web modular API

Web namespaced API