在網頁應用程式中使用 OpenID Connect 驗證

如果您已透過 Identity Platform 升級至 Firebase 驗證，則可以選擇符合 OpenID Connect (OIDC) 規定的供應商，透過 Firebase 驗證使用者。因此您可以使用 Firebase 未原生支援的識別資訊提供者。

事前準備

如要使用 OIDC 提供者登入使用者，您必須先向提供者收集一些資訊：

  • 用戶端 ID：供應商專用的字串，用於識別應用程式。供應商可能會為您支援的每個平台指派不同的用戶端 ID。這是供應商核發的 ID 權杖中 aud 憑證附加資訊的其中一個值。

  • 用戶端密鑰：供應商用於確認用戶端 ID 擁有權的密鑰字串。每個用戶端 ID 都需要相符的用戶端密鑰。 (只有在使用驗證碼流程時，才需要提供這個值，我們強烈建議使用)。

  • 核發者：可識別供應器的字串。這個值必須是網址，附加 /.well-known/openid-configuration 時是提供者 OIDC 探索文件的位置。舉例來說，如果核發者是 https://auth.example.com，則探索文件必須可在 https://auth.example.com/.well-known/openid-configuration 存取。

取得上述資訊後，啟用 OpenID Connect 做為 Firebase 專案的登入提供者：

  1. 將 Firebase 新增至您的 JavaScript 專案。

  2. 如果您尚未透過 Identity Platform 升級至 Firebase 驗證，請進行升級。只有已升級的專案才能使用 OpenID Connect 驗證。

  3. 在 Firebase 控制台的「Sign-in providers」 (登入供應商) 頁面上，依序點選「Add new provider」(新增供應商) 和「OpenID Connect」(OpenID Connect)。

  4. 選擇要使用授權碼流程還是隱含授權流程。

    如果供應商支援程式碼流程，建議您一律使用程式碼流程。隱含流程的安全性較低，強烈建議不要使用。

  5. 為這個供應商命名。記下產生的提供者 ID，例如 oidc.example-provider。在應用程式中新增登入程式碼時，會需要用到這個 ID。

  6. 指定您的用戶端 ID 和用戶端密鑰，以及供應商的核發者字串。這些值必須與供應商指派給您的值完全相符。

  7. 儲存變更。

使用 Firebase SDK 處理登入流程

如要使用 OIDC 供應商透過 Firebase 驗證使用者，最簡單的方式就是使用 Firebase SDK 處理整個登入流程。

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

  1. 使用您在 Firebase 控制台取得的提供者 ID，建立 OAuthProvider 的執行個體。

    網頁模組 API

    import { OAuthProvider } from "firebase/auth";

const provider = new OAuthProvider('oidc.example-provider');

    網路命名空間 API

    var provider = new firebase.auth.OAuthProvider('oidc.example-provider');

  2. 選用：指定要與 OAuth 要求一起傳送的其他自訂 OAuth 參數。

    網頁模組 API

    provider.setCustomParameters({
  // Target specific email with login hint.
  login_hint: 'user@example.com'
});

    網路命名空間 API

    provider.setCustomParameters({
  // Target specific email with login hint.
  login_hint: 'user@example.com'
});

    請洽詢您的供應商，瞭解其支援的參數。請注意，您無法透過 setCustomParameters 傳遞 Firebase 所需的參數。這些參數包括 client_id、response_type、redirect_uri、state、scope 和 response_mode。

  3. 選用：指定您要求驗證供應商的基本設定檔以外的其他 OAuth 2.0 範圍。

    網頁模組 API

    provider.addScope('mail.read');
provider.addScope('calendars.read');

    網路命名空間 API

    provider.addScope('mail.read');
provider.addScope('calendars.read');

    如要瞭解供應商支援的範圍，請洽詢供應商。

  4. 使用 OAuth 提供者物件向 Firebase 進行驗證。

    您可以將使用者重新導向至提供者的登入頁面，或是在彈出式視窗中開啟登入頁面。

    重新導向流程

    呼叫 signInWithRedirect() 以重新導向至供應商登入頁面：

    網頁模組 API

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

const auth = getAuth();
signInWithRedirect(auth, provider);

    網路命名空間 API

    firebase.auth().signInWithRedirect(provider);

    使用者完成登入並返回應用程式後，您可以呼叫 getRedirectResult() 來取得登入結果。

    網頁模組 API

    import { getAuth, getRedirectResult, OAuthProvider } from "firebase/auth";

const auth = getAuth();
getRedirectResult(auth)
  .then((result) => {
    // User is signed in.
    // IdP data available in result.additionalUserInfo.profile.

    // Get the OAuth access token and ID Token
    const credential = OAuthProvider.credentialFromResult(result);
    const accessToken = credential.accessToken;
    const idToken = credential.idToken;
  })
  .catch((error) => {
    // Handle error.
  });

    網路命名空間 API

    firebase.auth().getRedirectResult()
  .then((result) => {
    // IdP data available in result.additionalUserInfo.profile.
    // ...

    /** @type {firebase.auth.OAuthCredential} */
    var credential = result.credential;

    // OAuth access and id tokens can also be retrieved:
    var accessToken = credential.accessToken;
    var idToken = credential.idToken;
  })
  .catch((error) => {
    // Handle error.
  });

    彈出式視窗流程

    網頁模組 API

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

const auth = getAuth();
signInWithPopup(auth, provider)
  .then((result) => {
    // User is signed in.
    // IdP data available using getAdditionalUserInfo(result)

    // Get the OAuth access token and ID Token
    const credential = OAuthProvider.credentialFromResult(result);
    const accessToken = credential.accessToken;
    const idToken = credential.idToken;
  })
  .catch((error) => {
    // Handle error.
  });

    網路命名空間 API

    firebase.auth().signInWithPopup(provider)
  .then((result) => {
    // IdP data available in result.additionalUserInfo.profile.
    // ...

    /** @type {firebase.auth.OAuthCredential} */
    var credential = result.credential;

    // OAuth access and id tokens can also be retrieved:
    var accessToken = credential.accessToken;
    var idToken = credential.idToken;
  })
  .catch((error) => {
    // Handle error.
  });

  5. 雖然以上範例著重於登入流程，但您可以使用相同模式，使用 linkWithRedirect() 和 linkWithPopup() 將 OIDC 提供者連結至現有使用者，並透過 reauthenticateWithRedirect() 和 reauthenticateWithPopup() 重新驗證使用者，以便針對需要近期登入的敏感作業擷取新憑證。

手動處理登入流程

如果您已在應用程式中實作 OpenID Connect 登入流程，則可直接使用 ID 權杖向 Firebase 進行驗證：

網頁模組 API

import { getAuth, signInWithCredential, OAuthProvider } from "firebase/auth";

const provider = new OAuthProvider("oidc.example-provider");
const credential = provider.credential({
    idToken: idToken,
});
signInWithCredential(getAuth(), credential)
    .then((result) => {
        // User is signed in.
        // IdP data available in result.additionalUserInfo.profile.

        // Get the OAuth access token and ID Token
        const credential = OAuthProvider.credentialFromResult(result);
        const accessToken = credential.accessToken;
        const idToken = credential.idToken;
    })
    .catch((error) => {
        // Handle error.
    });

網路命名空間 API

const provider = new OAuthProvider("oidc.example-provider");
const credential = provider.credential({
    idToken: idToken,
});
firebase.auth().signInWithCredential(credential)
    .then((result) => {
        // User is signed in.
        // IdP data available in result.additionalUserInfo.profile.

        // Get the OAuth access token and ID Token
        const credential = OAuthProvider.credentialFromResult(result);
        const accessToken = credential.accessToken;
        const idToken = credential.idToken;
    })
    .catch((error) => {
        // Handle error.
    });