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

如果您已升級至 Firebase Authentication with Identity Platform，可以透過下列方法驗證使用者： 使用符合 OpenID Connect (OIDC) 規定的供應商做為 Firebase。這個 能讓您使用 Firebase 未原生支援的識別資訊提供者。

事前準備

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

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

  • 用戶端密鑰：供應商用來確認擁有權的密鑰字串 字串。每個用戶端 ID 都需要相符的用戶端密鑰。 (只有在使用授權碼流程時，才需要這個值， )

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

備妥上述資訊後，請在登入時啟用 OpenID Connect 為 Firebase 專案提供供應商：

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

  2. 如果您尚未升級至 Firebase Authentication with Identity Platform，請進行更新。OpenID Connect 驗證 僅適用於已升級的專案。

  3. 登入供應商頁面 在 Firebase 控制台的頁面中，依序點選「新增供應商」和 OpenID Connect。

  4. 選取要使用授權碼流程還是 隱含授權流程：

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

  5. 為這個供應商命名。記下產生的提供者 ID： 例如 oidc.example-provider。新增 登入程式碼

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

  7. 儲存變更。

使用 Firebase SDK 處理登入流程

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

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

  1. 使用您取得的提供者 ID 建立 OAuthProvider 的執行個體 也可前往 Firebase 控制台

    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。這些參數分別是 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. 上述範例著重於登入流程，您可以 按照模式將 OIDC 提供者連結至現有使用者 linkWithRedirect() 和 linkWithPopup()，並透過 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.
    });