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

如果您已升級至 Firebase Authentication with Identity Platform，可以使用符合 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。

取得上述資訊後，請為 Firebase 專案啟用 OpenID Connect 做為登入供應商：

  1. 將 Firebase 新增至 JavaScript 專案。

  2. 如果尚未升級至 Firebase Authentication with Identity Platform，請先升級。只有升級後的專案才能使用 OpenID Connect 驗證。

  3. 在 Firebase 控制台的「登入供應商」頁面中，按一下「新增供應商」，然後按一下「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 的執行個體。

    Web 

    import { OAuthProvider } from "firebase/auth";

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

    Web 

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

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

    Web 

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

    Web 

    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 範圍，以便向驗證供應商要求。

    Web 

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

    Web 

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

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

  4. 使用 OAuth 供應商物件向 Firebase 進行驗證。

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

    重新導向流程

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

    Web 

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

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

    Web 

    firebase.auth().signInWithRedirect(provider);

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

    Web 

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

    Web 

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

    彈出式視窗流程

    Web 

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

    Web 

    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 進行驗證：

Web 

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

Web 

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