您可以將 GitHub 驗證功能整合至應用程式,讓使用者透過 GitHub 帳戶驗證 Firebase。您可以使用 Firebase SDK 執行登入流程,或手動執行 GitHub OAuth 2.0 流程,然後將產生的存取權權杖傳遞至 Firebase,以整合 GitHub 驗證功能。
事前準備
- 將 Firebase 新增至 JavaScript 專案。
- 在 Firebase 控制台中,開啟「Auth」部分。
- 在「Sign in method」分頁中,啟用 GitHub 供應器。
- 將該供應商開發人員控制台的「用戶端 ID」和「用戶端密鑰」新增至供應商設定:
- 將應用程式註冊為 GitHub 上的開發人員應用程式,並取得應用程式的 OAuth 2.0 用戶端 ID 和 用戶端密碼。
- 請確認 Firebase OAuth 重新導向 URI (例如
my-app-12345.firebaseapp.com/__/auth/handler
) 已設為 GitHub 應用程式設定中應用程式設定頁面的 授權回呼網址。
- 按一下 [儲存]。
使用 Firebase SDK 處理登入流程
如果您正在建構網路應用程式,透過 Firebase 驗證使用者 GitHub 帳戶最簡單的方法,就是使用 Firebase JavaScript SDK 處理登入流程。(如果您想在 Node.js 或其他非瀏覽器環境中驗證使用者,則必須手動處理登入流程)。
如要使用 Firebase JavaScript SDK 處理登入流程,請按照下列步驟操作:
- 建立 GitHub 提供者物件的例項:
Web
import { GithubAuthProvider } from "firebase/auth"; const provider = new GithubAuthProvider();
Web
var provider = new firebase.auth.GithubAuthProvider();
- 選用:指定您要向驗證提供者要求的其他 OAuth 2.0 範圍。如要新增範圍,請呼叫
addScope
。例如:Web
provider.addScope('repo');
Web
provider.addScope('repo');
- 選用:指定您要透過 OAuth 要求傳送的其他自訂 OAuth 供應器參數。如要新增自訂參數,請在已初始化的提供者上呼叫
setCustomParameters
,並使用物件提供 OAuth 提供者文件中指定的鍵和相應值。例如:Web
provider.setCustomParameters({ 'allow_signup': 'false' });
Web
provider.setCustomParameters({ 'allow_signup': 'false' });
- 使用 GitHub 供應器物件,透過 Firebase 進行驗證。您可以開啟彈出式視窗或重新導向至登入頁面,提示使用者使用 GitHub 帳戶登入。在行動裝置上,系統會優先採用重新導向方法。
- 如要透過彈出式視窗登入,請呼叫
signInWithPopup
:Web
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
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 參考文件。
- 如要透過重新導向登入頁面來登入,請呼叫
signInWithRedirect
: 使用 `signInWithRedirect` 時,請遵循最佳做法。Web
import { getAuth, signInWithRedirect } from "firebase/auth"; const auth = getAuth(); signInWithRedirect(auth, provider);
Web
firebase.auth().signInWithRedirect(provider);
getRedirectResult
,藉此擷取 GitHub 供應器的 OAuth 權杖:Web
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
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
import { GithubAuthProvider } from "firebase/auth"; const credential = GithubAuthProvider.credential(token);
Web
var credential = firebase.auth.GithubAuthProvider.credential(token);
- 使用 Firebase 憑證向 Firebase 進行驗證:
Web
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
// 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 擴充功能應用程式,請參閱 離線文件指南。
後續步驟
使用者首次登入後,系統會建立新使用者帳戶,並連結至使用者登入時所使用的憑證 (即使用者名稱和密碼、電話號碼或驗證服務提供者資訊)。這個新帳戶會儲存在 Firebase 專案中,無論使用者如何登入,都可以用於在專案中的每個應用程式中識別使用者。
-
在應用程式中,建議您在
Auth
物件上設定觀察器,以便瞭解使用者的驗證狀態。接著,您可以從User
物件取得使用者的基本個人資料資訊。請參閱「管理使用者」。 在 Firebase Realtime Database 和 Cloud Storage 安全性規則中,您可以從
auth
變數取得已登入使用者的專屬使用者 ID,並利用該 ID 控管使用者可存取的資料。
您可以將驗證服務供應商憑證連結至現有使用者帳戶,讓使用者透過多個驗證服務供應商登入應用程式。
如要將使用者登出,請呼叫
signOut
:
Web
import { getAuth, signOut } from "firebase/auth"; const auth = getAuth(); signOut(auth).then(() => { // Sign-out successful. }).catch((error) => { // An error happened. });
Web
firebase.auth().signOut().then(() => { // Sign-out successful. }).catch((error) => { // An error happened. });