Google uses AI technology to translate content into your preferred language. AI translations can contain errors.

搭配 JavaScript 使用 GitHub 進行驗證

在應用程式中整合 GitHub 驗證功能，即可讓使用者透過 GitHub 帳戶向 Firebase 驗證身分。您可以透過 Firebase SDK 執行登入流程，或是手動執行 GitHub OAuth 2.0 流程，然後將產生的存取權杖傳遞至 Firebase，藉此整合 GitHub 驗證功能。

事前準備

將 Firebase 新增至 JavaScript 專案。
在 Firebase 控制台中，依序前往「安全性」>「驗證」。
在「Sign-in method」(登入方法) 分頁中，啟用「GitHub」登入供應商。
將該供應商開發人員控制台的「用戶端 ID」和「用戶端密鑰」新增至供應商設定：
1. 在 GitHub 上將應用程式註冊為開發人員應用程式，並取得應用程式的 OAuth 2.0 用戶端 ID 和用戶端密鑰。
2. 請確認 Firebase OAuth 重新導向 URI (例如 my-app-12345.firebaseapp.com/__/auth/handler) 已在 GitHub 應用程式設定的應用程式設定頁面中，設為授權回呼網址。
按一下「儲存」。

使用 Firebase SDK 處理登入流程

如果您要建構網頁應用程式，最簡單的方法是使用 Firebase JavaScript SDK 處理登入流程，讓使用者透過 GitHub 帳戶驗證 Firebase。(如要在 Node.js 或其他非瀏覽器環境中驗證使用者，您必須手動處理登入流程)。

如要使用 Firebase JavaScript SDK 處理登入流程，請按照下列步驟操作：

建立 GitHub 提供者物件的執行個體：

Web

import { GithubAuthProvider } from "firebase/auth";

const provider = new GithubAuthProvider();auth_github_provider_create.js

Web

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

選用：指定要向驗證供應商要求的其他 OAuth 2.0 範圍。如要新增範圍，請呼叫 addScope。例如：
Web
```
provider.addScope('repo');auth_github_provider_scopes.js
```
Web
```
provider.addScope('repo');github.js
```
請參閱驗證供應商說明文件。
選用：指定要隨 OAuth 要求傳送的其他自訂 OAuth 供應商參數。如要新增自訂參數，請在已初始化的供應商上呼叫 setCustomParameters，並使用包含鍵的物件 (如 OAuth 供應商文件所指定) 和對應的值。例如： <0x
Web
```
provider.setCustomParameters({
  'allow_signup': 'false'
});auth_github_provider_params.js
```
Web
```
provider.setCustomParameters({
  'allow_signup': 'false'
});github.js
```
系統不允許使用保留的必要 OAuth 參數，且會忽略這類參數。詳情請參閱驗證供應商參考資料。

使用 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);
    // ...
  });auth_github_signin_popup.js

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

另請注意，您可以擷取 GitHub 供應商的 OAuth 權杖，用於透過 GitHub API 擷取其他資料。

您也可以在這裡擷取及處理錯誤。如需錯誤代碼清單，請參閱「Auth Reference Docs」。

如要重新導向至登入頁面來登入，請呼叫 signInWithRedirect：使用 `signInWithRedirect` 時，請遵循最佳做法。

Web

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

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

Web

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

然後，您也可以在網頁載入時呼叫 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);
    // ...
  });auth_github_signin_redirect_result.js

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.js

您也可以在這裡擷取及處理錯誤。如需錯誤代碼清單，請參閱「Auth Reference Docs」。

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

如果您在 Firebase 控制台中啟用「每個電子郵件地址只能有一個帳戶」設定，當使用者嘗試透過電子郵件登入供應商 (例如 GitHub)，但該電子郵件已用於其他 Firebase 使用者的供應商 (例如 Google)，系統會擲回 auth/account-exists-with-different-credential 錯誤和 AuthCredential 物件 (GitHub 存取權杖)。如要完成登入預期供應商的程序，使用者必須先登入現有供應商 (Google)，然後連結至前者 AuthCredential (GitHub 存取權杖)。

如果您使用 signInWithPopup，可以透過下列範例程式碼處理 auth/account-exists-with-different-credential 錯誤：

import {
  getAuth,
  linkWithCredential,
  signInWithPopup,
  GitHubAuthProvider,
} from "firebase/auth";

try {
  // Step 1: User tries to sign in using GitHub.
  let result = await signInWithPopup(getAuth(), new GitHubAuthProvider());
} catch (error) {
  // Step 2: User's email already exists.
  if (error.code === "auth/account-exists-with-different-credential") {
    // The pending GitHub credential.
    let pendingCred = error.credential;

    // Step 3: Save the pending credential in temporary storage,

    // Step 4: Let the user know that they already have an account
    // but with a different provider, and let them choose another
    // sign-in method.
  }
}

// ...

try {
  // Step 5: Sign the user in using their chosen method.
  let result = await signInWithPopup(getAuth(), userSelectedProvider);

  // Step 6: Link to the GitHub credential.
  // TODO: implement `retrievePendingCred` for your app.
  let pendingCred = retrievePendingCred();

  if (pendingCred !== null) {
    // As you have access to the pending credential, you can directly call the
    // link method.
    let user = await linkWithCredential(result.user, pendingCred);
  }

  // Step 7: Continue to app.
} catch (error) {
  // ...
}

重新導向模式

在重新導向模式中，系統會以類似方式處理這項錯誤，但待處理的憑證必須在網頁重新導向之間快取 (例如使用工作階段儲存空間)。

手動處理登入流程

您也可以透過呼叫 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);auth_github_provider_credential.js

Web

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

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

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

在 Chrome 擴充功能中透過 Firebase 進行驗證

如果您要建構 Chrome 擴充功能應用程式，請參閱螢幕外文件指南。

建立專案時，Firebase 會為專案佈建專屬子網域： https://my-app-12345.firebaseapp.com。

這也會做為 OAuth 登入的重新導向機制。該網域必須允許所有支援的 OAuth 供應商存取。不過，這表示使用者在登入 GitHub 時，可能會看到該網域，然後系統才會將他們重新導向應用程式：「繼續前往：https://my-app-12345.firebaseapp.com」。

如要避免顯示子網域，可以透過 Firebase Hosting 設定自訂網域：

請按照「為 Hosting 設定網域」一文中的步驟 1 到 3 操作。驗證網域擁有權後，Hosting 會為自訂網域佈建 SSL 憑證。
在 Firebase 控制台中，將自訂網域新增至授權網域清單：auth.custom.domain.com。
在 GitHub 開發人員控制台或 OAuth 設定頁面中，將重新導向頁面的網址加入許可清單，該網址可透過自訂網域存取： https://auth.custom.domain.com/__/auth/handler。

初始化 JavaScript 程式庫時，請使用 authDomain 欄位指定自訂網域：

var config = {
  apiKey: '...',
  // Changed from 'PROJECT_ID.firebaseapp.com'.
  authDomain: 'auth.custom.domain.com',
  databaseURL: 'https://PROJECT_ID.firebaseio.com',
  projectId: 'PROJECT_ID',
  storageBucket: 'PROJECT_ID.firebasestorage.app',
  messagingSenderId: 'SENDER_ID'
};
firebase.initializeApp(config);

後續步驟

使用者首次登入後，系統會建立新的使用者帳戶，並連結至使用者登入時使用的憑證 (即使用者名稱和密碼、電話號碼或驗證供應商資訊)。這個新帳戶會儲存在 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.
});auth_sign_out.js

Web

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

搭配 JavaScript 使用 GitHub 進行驗證 透過集合功能整理內容 你可以依據偏好儲存及分類內容。