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

使用 GitHub 和 JavaScript 進行身份驗證

您可以通過將 GitHub 身份驗證集成到您的應用程序中，讓您的用戶使用他們的 GitHub 帳戶通過 Firebase 進行身份驗證。您可以通過使用 Firebase SDK 執行登錄流程，或通過手動執行 GitHub OAuth 2.0 流程並將生成的訪問令牌傳遞給 Firebase 來集成 GitHub 身份驗證。

在你開始之前

將 Firebase 添加到您的 JavaScript 項目。
在Firebase 控制台中，打開Auth部分。
在登錄方法選項卡上，啟用GitHub提供程序。
將該提供商的開發人員控制台中的客戶端 ID和客戶端密碼添加到提供商配置中：
1. 在 GitHub上將您的應用程序註冊為開發人員應用程序，並獲取您應用程序的 OAuth 2.0 Client ID和Client Secret 。
2. 確保您的 Firebase OAuth 重定向 URI （例如my-app-12345.firebaseapp.com/__/auth/handler ）在您的GitHub 應用程序的配置頁面中設置為您的授權回調 URL 。
單擊保存。

使用 Firebase SDK 處理登錄流程

如果您正在構建 Web 應用程序，使用用戶的 GitHub 帳戶通過 Firebase 對用戶進行身份驗證的最簡單方法是使用 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
了解更多關於 tree-shakeable 模塊化 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
了解更多關於 tree-shakeable 模塊化 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錯誤：


// Step 1.
// User tries to sign in to GitHub.
auth.signInWithPopup(new firebase.auth.GithubAuthProvider()).catch(function(error) {
  // An error happened.
  if (error.code === 'auth/account-exists-with-different-credential') {
    // Step 2.
    // User's email already exists.
    // The pending GitHub credential.
    var pendingCred = error.credential;
    // The provider account's email address.
    var email = error.email;
    // Get sign-in methods for this email.
    auth.fetchSignInMethodsForEmail(email).then(function(methods) {
      // Step 3.
      // If the user has several sign-in methods,
      // the first method in the list will be the "recommended" method to use.
      if (methods[0] === 'password') {
        // Asks the user their password.
        // In real scenario, you should handle this asynchronously.
        var password = promptUserForPassword(); // TODO: implement promptUserForPassword.
        auth.signInWithEmailAndPassword(email, password).then(function(result) {
          // Step 4a.
          return result.user.linkWithCredential(pendingCred);
        }).then(function() {
          // GitHub account successfully linked to the existing Firebase user.
          goToApp();
        });
        return;
      }
      // All the other cases are external providers.
      // Construct provider object for that provider.
      // TODO: implement getProviderForProviderId.
      var provider = getProviderForProviderId(methods[0]);
      // At this point, you should let the user know that they already have an account
      // but with a different provider, and let them validate the fact they want to
      // sign in with this provider.
      // Sign in to provider. Note: browsers usually block popup triggered asynchronously,
      // so in real scenario you should ask the user to click on a "continue" button
      // that will trigger the signInWithPopup.
      auth.signInWithPopup(provider).then(function(result) {
        // Remember that the user may have signed in with an account that has a different email
        // address than the first one. This can happen as Firebase doesn't control the provider's
        // sign in flow and the user is free to login using whichever account they own.
        // Step 4b.
        // Link to GitHub credential.
        // As we have access to the pending credential, we can directly call the link method.
        result.user.linkAndRetrieveDataWithCredential(pendingCred).then(function(usercred) {
          // GitHub account successfully linked to the existing Firebase user.
          goToApp();
        });
      });
    });
  }
});

重定向模式

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

手動處理登錄流程

您還可以通過調用 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
```

只有彈出操作（ signInWithPopup 、 linkWithPopup和reauthenticateWithPopup ）可用於 Chrome 擴展，因為 Chrome 擴展不能使用 HTTP 重定向。您應該從後台頁面腳本而不是瀏覽器操作彈出窗口調用這些方法，因為身份驗證彈出窗口將取消瀏覽器操作彈出窗口。彈出方法只能在使用Manifest V2 的擴展中使用。較新的Manifest V3只允許以 service workers 的形式運行後台腳本，根本無法執行彈窗操作。

在 Chrome 擴展程序的清單文件中，確保將https://apis.google.com URL 添加到content_security_policy白名單。

在創建項目時，Firebase 將為您的項目提供一個唯一的子域：https: https://my-app-12345.firebaseapp.com 。

這也將用作 OAuth 登錄的重定向機制。所有支持的 OAuth 提供商都需要允許該域。但是，這意味著用戶在重定向回應用程序之前登錄 GitHub 時可能會看到該域：繼續訪問：https://my-app-12345.firebaseapp.com 。

為避免顯示您的子域，您可以使用 Firebase 託管設置自定義域：

按照為託管設置您的域中的步驟 1 到 3 進行操作。當您驗證您的域所有權時，Hosting 會為您的自定義域提供 SSL 證書。
將您的自定義域添加到Firebase 控制台中的授權域列表： auth.custom.domain.com 。
在 GitHub 開發人員控制台或 OAuth 設置頁面中，將重定向頁面的 URL 列入白名單，您可以在自定義域上訪問該 URL：https: 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 Realtime Database 和 Cloud Storage Security Rules中，您可以從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