使用GitHub和JavaScript進行身份驗證

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

在你開始之前

將Firebase添加到您的JavaScript項目。
在Firebase控制台中，打開“身份驗證”部分。
在“登錄方法”選項卡上，啟用GitHub提供程序。
將來自該提供程序的開發人員控制台的客戶端ID和客戶端密鑰添加到提供程序配置中：
1. 在GitHub上將您的應用註冊為開發人員應用，並獲取應用的OAuth 2.0客戶端ID和客戶端密鑰。
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提供程序對象的實例：

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

可選：指定要從身份驗證提供程序請求的其他OAuth 2.0範圍。要添加範圍，請調用addScope 。例如：
```
provider.addScope('repo');github.js
```
請參閱身份驗證提供程序文檔。
可選：指定要與OAuth請求一起發送的其他自定義OAuth提供程序參數。要添加自定義參數，請使用包含OAuth提供程序文檔中指定的鍵和相應值的對像在初始化的提供程序上調用setCustomParameters 。例如：
```
provider.setCustomParameters({
  'allow_signup': 'false'
});github.js
```
不允許的預留OAuth參數，將被忽略。有關更多詳細信息，請參見身份驗證提供程序參考。

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

要使用彈出窗口登錄，請調用signInWithPopup ：

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獲取其他數據。

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

要通過重定向到登錄頁面登錄，請調用signInWithRedirect ：

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

然後，您還可以在頁面加載時通過調用getRedirectResult來檢索GitHub提供程序的OAuth令牌：

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

這也是您可以捕獲和處理錯誤的地方。有關錯誤代碼的列表，請查看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 has 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憑證：
```
var credential = firebase.auth.GithubAuthProvider.credential(token);github.js
```

使用Firebase憑證與Firebase進行身份驗證：

// 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 ），因為Chrome擴展程序無法使用HTTP重定向。您應該從後台腳本而不是瀏覽器操作彈出窗口中調用這些方法，因為身份驗證彈出窗口將取消瀏覽器操作彈出窗口。

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

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

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

要自定義消息中的URL以顯示自定義域，請執行以下操作：繼續：https://auth.custom.domain.com

為您的自定義域創建一個CNAME記錄，該記錄指向firebaseapp.com上項目的子域：
```
auth.custom.domain.com CNAME my-app-12345.firebaseapp.com
```
將您的自定義域添加到Firebase控制台的授權域列表中： auth.custom.domain.com 。
在GitHub開發人員控制台或OAuth設置頁面中，將重定向頁面的URL列入白名單，您可以在您的自定義域上訪問該頁面： https://auth.custom.domain.com/__/auth/handler : 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 ：

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