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

使用 GitHub 和 JavaScript 進行身份驗證

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

在你開始之前

添加火力地堡到你的JavaScript項目。
在火力地堡控制台，打開驗證部分。
在登錄方法選項卡，選中GitHub的供應商。
添加來自供應商的開發者控制台提供者配置的客戶端ID和客戶端密鑰：
1. 註冊您的應用程序作為在GitHub上開發的應用程序，讓你的應用程序的OAuth 2.0客戶端ID和客戶端密鑰。
2. 確保你的火力地堡的OAuth重定向URI（如my-app-12345.firebaseapp.com/__/auth/handler ）設置為你的應用程序的設置頁面的授權回調網址，您的GitHub上的應用程序的配置。
單擊保存。

使用 Firebase SDK 處理登錄流程

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

要使用 Firebase JavaScript SDK 處理登錄流程，請按以下步驟操作：

創建 GitHub 提供程序對象的實例：

網頁版 9

import { GithubAuthProvider } from "firebase/auth";

const provider = new GithubAuthProvider();auth_github_provider_create.js

網頁版 8

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

可選：指定其他的OAuth 2.0範圍要由身份驗證提供者的要求。要添加範圍，請致電addScope 。例如：
網頁版 9
了解更多關於樹可搖動的Web V9模塊化SDK和升級，從8版本。
```
provider.addScope('repo');auth_github_provider_scopes.js
```
網頁版 8
```
provider.addScope('repo');github.js
```
見身份驗證提供文檔。
可選：指定其他定制的OAuth提供者參數要使用OAuth發送請求。要添加自定義參數，調用setCustomParameters上初始化提供商與如由提供商的OAuth文檔和相應的值來指定包含密鑰的對象。例如：
網頁版 9
了解更多關於樹可搖動的Web V9模塊化SDK和升級，從8版本。
```
provider.setCustomParameters({
  'allow_signup': 'false'
});auth_github_provider_params.js
```
網頁版 8
```
provider.setCustomParameters({
  'allow_signup': 'false'
});github.js
```
不允許保留的必需 OAuth 參數，將被忽略。見身份驗證提供參考更多的細節。

使用 GitHub 提供程序對象通過 Firebase 進行身份驗證。您可以通過打開彈出窗口或重定向到登錄頁面來提示您的用戶使用他們的 GitHub 帳戶登錄。在移動設備上首選重定向方法。

要使用彈出窗口登錄，電話signInWithPopup ：

網頁版 9

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;
    // ...
  }).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 AuthCredential type that was used.
    const credential = GithubAuthProvider.credentialFromError(error);
    // ...
  });auth_github_signin_popup.js

網頁版 8

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;
    // ...
  }).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 獲取其他數據。

這也是您可以捕獲和處理錯誤的地方。有關錯誤代碼列表，看看在驗證參考文檔。

要通過重定向到登錄頁面，呼號signInWithRedirect ：

網頁版 9

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

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

網頁版 8

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

然後，你還可以通過調用檢索GitHub上提供的OAuth令牌getRedirectResult當你的頁面加載：

網頁版 9

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;
  }).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 AuthCredential type that was used.
    const credential = GithubAuthProvider.credentialFromError(error);
    // ...
  });auth_github_signin_redirect_result.js

網頁版 8

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;
  }).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

這也是您可以捕獲和處理錯誤的地方。有關錯誤代碼列表，看看在驗證參考文檔。

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

如果啟用每個電子郵件地址設置了一個帳戶，在火力地堡控制台中已經存在的另一個火力地堡用戶的供應商（如谷歌），錯誤的電子郵件，當用戶試圖在登錄提供商（如GitHub上） auth/account-exists-with-different-credential與一個拋出沿著AuthCredential對象（GitHub的訪問令牌）。完成登錄到預期的提供商，用戶必須先登錄到現有的供應商（谷歌），然後鏈接到前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 憑據：

網頁版 9

import { GithubAuthProvider } from "firebase/auth";

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

網頁版 8

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

使用 Firebase 憑據通過 Firebase 進行身份驗證：

網頁版 9

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.email;
    // ...
  });auth_signin_credential.js

網頁版 8

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

打開在項目火力地堡控制台。
在身份驗證部分，打開登錄方法頁。
添加一個URI類似下面的授權域的列表：
```
chrome-extension://CHROME_EXTENSION_ID
```

只有彈出操作（ signInWithPopup ， linkWithPopup和reauthenticateWithPopup ）可供選擇Chrome瀏覽器擴展，如Chrome擴展不能使用HTTP重定向。您應該從後台頁面腳本而不是瀏覽器操作彈出窗口調用這些方法，因為身份驗證彈出窗口將取消瀏覽器操作彈出窗口。彈出窗口的方法可以只使用擴展使用清單V2 。較新的清單V3只允許在服務人員的形式，不能在所有執行彈出操作後台腳本。

在您的Chrome擴展程序清單文件確保您添加https://apis.google.com URL到content_security_policy允許列表。

在項目創建，火力地堡將提供為你的項目唯一子： https://my-app-12345.firebaseapp.com 。

這也將用作 OAuth 登錄的重定向機制。所有受支持的 OAuth 提供程序都需要允許該域。然而，這意味著用戶可以看到該域名而重新導向到應用程序之前中GitHub上簽署：繼續：https://my-app-12345.firebaseapp.com。

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

按照步驟1至3設置您的域名託管。當您驗證域所有權時，Hosting 會為您的自定義域提供 SSL 證書。
您的自定義域添加到在授權域的列表火力地堡控制台： auth.custom.domain.com 。
在GitHub的開發者控制台或OAuth設置頁面，白名單的重定向頁面，這將是您的自定義域名訪問的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對象。請參閱管理用戶。
在你的火力地堡實時數據庫和雲存儲安全規則，你可以得到簽署的，從用戶的唯一的用戶ID auth的變量，並用它來控制哪些數據的用戶可以訪問。

您可以允許用戶通過使用多個身份驗證提供登錄到您的應用程序連接身份驗證提供憑據到現有的用戶帳戶。

要註銷用戶，請撥打signOut ：

網頁版 9

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

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

網頁版 8

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

使用 GitHub 和 JavaScript 進行身份驗證

在你開始之前

使用 Firebase SDK 處理登錄流程

網頁版 9

網頁版 8

網頁版 9

網頁版 8

網頁版 9

網頁版 8

網頁版 9

網頁版 8

網頁版 9

網頁版 8

網頁版 9

網頁版 8

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

彈出模式

重定向模式

手動處理登錄流程

網頁版 9

網頁版 8

網頁版 9

網頁版 8

在 Chrome 擴展程序中使用 Firebase 進行身份驗證

為 GitHub 登錄自定義重定向域

下一步

網頁版 9

網頁版 8