您可以通過將 GitHub 身份驗證集成到您的應用程序中,讓您的用戶使用他們的 GitHub 帳戶通過 Firebase 進行身份驗證。您可以通過使用 Firebase SDK 執行登錄流程,或通過手動執行 GitHub OAuth 2.0 流程並將生成的訪問令牌傳遞給 Firebase 來集成 GitHub 身份驗證。
在你開始之前
- 將 Firebase 添加到您的 JavaScript 項目。
- 在Firebase 控制台中,打開Auth部分。
- 在登錄方法選項卡上,啟用GitHub提供程序。
- 將該提供商的開發人員控制台中的客戶端 ID和客戶端密碼添加到提供商配置中:
- 在 GitHub上將您的應用程序註冊為開發人員應用程序,並獲取您應用程序的 OAuth 2.0 Client ID和Client Secret 。
- 確保您的 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();
Web namespaced API
var provider = new firebase.auth.GithubAuthProvider();
- 可選:指定您要從身份驗證提供程序請求的其他 OAuth 2.0 範圍。要添加範圍,請調用
addScope
。例如:請參閱身份驗證提供程序文檔。Web modular API
provider.addScope('repo');
Web namespaced API
provider.addScope('repo');
- 可選:指定要與 OAuth 請求一起發送的其他自定義 OAuth 提供程序參數。要添加自定義參數,請使用包含 OAuth 提供程序文檔指定的密鑰和相應值的對像對已初始化的提供程序調用
setCustomParameters
。例如:保留的必需 OAuth 參數是不允許的,將被忽略。有關更多詳細信息,請參閱身份驗證提供程序參考。Web modular API
provider.setCustomParameters({ 'allow_signup': 'false' });
Web namespaced API
provider.setCustomParameters({ 'allow_signup': 'false' });
- 使用 GitHub 提供程序對象通過 Firebase 進行身份驗證。您可以通過打開彈出窗口或重定向到登錄頁面來提示您的用戶使用他們的 GitHub 帳戶登錄。在移動設備上首選重定向方法。
- 要使用彈出窗口登錄,請調用
signInWithPopup
:另請注意,您可以檢索 GitHub 提供商的 OAuth 令牌,該令牌可用於使用 GitHub API 獲取其他數據。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); // ... });
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; // ... });
這也是您可以捕獲和處理錯誤的地方。有關錯誤代碼的列表,請查看Auth Reference Docs 。
- 要通過重定向到登錄頁面登錄,請調用
signInWithRedirect
:使用 signInWithRedirect 時遵循最佳實踐。然後,您還可以通過在頁面加載時調用Web modular API
import { getAuth, signInWithRedirect } from "firebase/auth"; const auth = getAuth(); signInWithRedirect(auth, provider);
Web namespaced API
firebase.auth().signInWithRedirect(provider);
getRedirectResult
來檢索 GitHub 提供商的 OAuth 令牌:這也是您可以捕獲和處理錯誤的地方。有關錯誤代碼的列表,請查看Auth Reference Docs 。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); // ... });
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 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);
Web namespaced API
var credential = firebase.auth.GithubAuthProvider.credential(token);
- 使用 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; // ... });
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; // ... });
在 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 項目的一部分,可用於在項目中的每個應用程序中識別用戶,無論用戶如何登錄。
在您的應用程序中,了解用戶身份驗證狀態的推薦方法是在
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. });
Web namespaced API
firebase.auth().signOut().then(() => { // Sign-out successful. }).catch((error) => { // An error happened. });