通過將GitHub身份驗證集成到您的應用中,您可以讓用戶使用其GitHub帳戶向Firebase進行身份驗證。您可以通過使用Firebase SDK進行登錄流程,或通過手動執行GitHub OAuth 2.0流程並將生成的訪問令牌傳遞給Firebase來集成GitHub身份驗證。
在你開始之前
- 將Firebase添加到您的JavaScript項目。
- 在Firebase控制台中,打開“身份驗證”部分。
- 在“登錄方法”選項卡上,啟用GitHub提供程序。
- 將來自該提供程序的開發人員控制台的客戶端ID和客戶端密鑰添加到提供程序配置中:
- 在GitHub上將您的應用註冊為開發人員應用,並獲取應用的OAuth 2.0客戶端ID和客戶端密鑰。
- 確保您的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();
- 可選:指定要從身份驗證提供程序請求的其他OAuth 2.0範圍。要添加範圍,請調用
addScope
。例如:provider.addScope('repo');
請參閱身份驗證提供程序文檔。 - 可選:指定要與OAuth請求一起發送的其他自定義OAuth提供程序參數。要添加自定義參數,請使用包含OAuth提供程序文檔中指定的鍵和相應值的對像在初始化的提供程序上調用
setCustomParameters
。例如:provider.setCustomParameters({ 'allow_signup': 'false' });
不允許的預留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提供程序的OAuth令牌,該令牌可用於使用GitHub API獲取其他數據。這也是您可以捕獲和處理錯誤的地方。有關錯誤代碼的列表,請查看Auth Reference Docs 。
- 要通過重定向到登錄頁面登錄,請調用
signInWithRedirect
:firebase.auth().signInWithRedirect(provider);
然後,您還可以在頁面加載時通過調用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; // ... });
這也是您可以捕獲和處理錯誤的地方。有關錯誤代碼的列表,請查看Auth Reference Docs 。
- 要使用彈出窗口登錄,請調用
手動處理登錄流程
您還可以通過調用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);
- 使用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; // ... });
在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項目的一部分,可用於在項目中的每個應用程序中識別用戶,而無論用戶如何登錄。
在您的應用中,建議的了解用戶身份驗證狀態的方法是在
Auth
對像上設置觀察者。然後,您可以從User
對象獲取用戶的基本配置文件信息。請參閱管理用戶。在Firebase實時數據庫和雲存儲安全規則中,您可以從
auth
變量獲取登錄用戶的唯一用戶ID,並使用它來控制用戶可以訪問哪些數據。
通過將身份驗證提供程序憑據鏈接到現有用戶帳戶,可以允許用戶使用多個身份驗證提供程序登錄您的應用程序。
要註銷用戶,請致電signOut
:
firebase.auth().signOut().then(() => { // Sign-out successful. }).catch((error) => { // An error happened. });