如果您已透過 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 專案的登入提供者:
如果您尚未透過 Identity Platform 升級至 Firebase 驗證,請進行升級。只有已升級的專案才能使用 OpenID Connect 驗證。
在 Firebase 控制台的「Sign-in providers」 (登入供應商) 頁面上,依序點選「Add new provider」(新增供應商) 和「OpenID Connect」(OpenID Connect)。
選擇要使用授權碼流程還是隱含授權流程。
如果供應商支援程式碼流程,建議您一律使用程式碼流程。隱含流程的安全性較低,強烈建議不要使用。
為這個供應商命名。記下產生的提供者 ID,例如
oidc.example-provider
。在應用程式中新增登入程式碼時,會需要用到這個 ID。指定您的用戶端 ID 和用戶端密鑰,以及供應商的核發者字串。這些值必須與供應商指派給您的值完全相符。
儲存變更。
使用 Firebase SDK 處理登入流程
如要使用 OIDC 供應商透過 Firebase 驗證使用者,最簡單的方式就是使用 Firebase SDK 處理整個登入流程。
如要使用 Firebase JavaScript SDK 處理登入流程,請按照下列步驟操作:
使用您在 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');
選用:指定要與 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
。選用:指定您要求驗證供應商的基本設定檔以外的其他 OAuth 2.0 範圍。
網頁模組 API
provider.addScope('mail.read'); provider.addScope('calendars.read');
網路命名空間 API
provider.addScope('mail.read'); provider.addScope('calendars.read');
如要瞭解供應商支援的範圍,請洽詢供應商。
使用 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. });
雖然以上範例著重於登入流程,但您可以使用相同模式,使用
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.
});