透過 Apple 登入使用者
本文說明如何使用 Identity Platform,在您的網頁應用程式中加入「使用 Apple 登入」功能。
事前準備
建立使用 Identity Platform 搭配 HTML 和 JavaScript 的基本網頁應用程式。如要瞭解如何操作,請參閱快速入門。
透過 Apple 設定應用程式
在 Apple Developer 網站上:
請按照「設定適用於網頁的 Apple 登入功能」中的步驟操作。包括:
註冊返回網址,如下所示:
https://project-id.firebaseapp.com/__/auth/handler
在下列網址暫時代管檔案,以便驗證網域:
https://project-id.firebaseapp.com/.well-known/apple-developer-domain-association.txt
此外,請記下您的 服務 ID 和 Apple 團隊 ID,因為您會在下一節中使用這兩項資訊。
使用 Apple 私密金鑰建立登入功能。您將在下一節中使用鍵及其 ID。
如果您使用 Identity Platform 傳送電子郵件給使用者,請使用以下電子郵件透過 Apple 的私人電子郵件轉送服務設定專案:
noreply@project-id.firebaseapp.com
如果您的應用程式有自訂電子郵件範本,您也可以使用該範本。
遵守 Apple 的去識別化資料規定
Apple 提供使用者選擇是否要匿名處理資料的選項,包括電子郵件地址。Apple 會為選擇這個選項的使用者指派使用網域 privaterelay.appleid.com
的模糊處理電子郵件地址。
您的應用程式必須遵守 Apple 針對匿名 Apple ID 所發布的任何適用開發人員政策或條款。這包括在將任何個人識別資訊 (PII) 與匿名 Apple ID 建立關聯前,先徵得使用者同意。涉及個人識別資訊的動作包括但不限於:
- 將電子郵件地址連結至匿名 Apple ID,或反之。
- 將電話號碼連結至匿名 Apple ID,或將匿名 Apple ID 連結至電話號碼
- 將非匿名社群媒體憑證 (例如 Facebook 或 Google) 連結至匿名 Apple ID,或反之。
如需更多資訊,請參閱 Apple 開發人員帳戶的《Apple Developer Program License Agreement》。
將 Apple 設為供應商
如要將 Apple 設為識別資訊提供者,請按照下列步驟操作:
前往 Google Cloud 控制台的「Identity Providers」頁面。
按一下「Add A Provider」。
從清單中選取「Apple」。
在「平台」下方,選取「網站」。
輸入 服務 ID、Apple 團隊 ID、金鑰 ID 和私密金鑰。
按一下「Authorized Domains」下方的「Add Domain」,即可註冊應用程式的網域。為方便開發,
localhost
已預設為啟用。按一下「設定應用程式」下方的「設定詳細資料」。將程式碼片段複製到應用程式的程式碼中,即可初始化 Identity Platform 用戶端 SDK。
按一下 [儲存]。
使用用戶端 SDK 登入使用者
如何登入使用者帳戶:
使用 ID
apple.com
建立OAuthProvider
提供者物件的例項:網頁版 9
import { OAuthProvider } from "firebase/auth"; const provider = new OAuthProvider('apple.com');
網頁版 8
var provider = new firebase.auth.OAuthProvider('apple.com');
選用步驟:新增 OAuth 範圍。範圍會指定您向 Apple 要求哪些資料。較機密的資料可能需要特定範圍。根據預設,啟用「每個電子郵件地址只能建立一個帳戶」時,Identity Platform 會要求
email
和name
範圍。網頁版 9
provider.addScope('email'); provider.addScope('name');
網頁版 8
provider.addScope('email'); provider.addScope('name');
選用:將驗證流程本地化。您可以指定語言,也可以使用裝置的預設語言。如要瞭解支援的語言代碼,請參閱「使用 Apple 帳戶登入」說明文件。
網頁版 9
provider.setCustomParameters({ // Localize the Apple authentication screen in French. locale: 'fr' });
網頁版 8
provider.setCustomParameters({ // Localize the Apple authentication screen in French. locale: 'fr' });
使用提供者物件登入使用者。您可以開啟彈出式視窗,或重新導向目前的網頁。使用者在行動裝置上更容易重新導向。
如要顯示彈出式視窗,請呼叫
signInWithPopup()
:網頁版 9
import { getAuth, signInWithPopup, OAuthProvider } from "firebase/auth"; const auth = getAuth(); signInWithPopup(auth, provider) .then((result) => { // The signed-in user info. const user = result.user; // Apple credential const credential = OAuthProvider.credentialFromResult(result); const accessToken = credential.accessToken; const idToken = credential.idToken; // 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 credential that was used. const credential = OAuthProvider.credentialFromError(error); // ... });
網頁版 8
firebase .auth() .signInWithPopup(provider) .then((result) => { /** @type {firebase.auth.OAuthCredential} */ var credential = result.credential; // The signed-in user info. var user = result.user; // You can also get the Apple OAuth Access and ID Tokens. var accessToken = credential.accessToken; var idToken = credential.idToken; // IdP data available using getAdditionalUserInfo(result) // ... }) .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; // ... });
如要重新導向網頁,請先呼叫
signInWithRedirect()
:使用
signInWithRedirect
、linkWithRedirect
或reauthenticateWithRedirect
時,請遵循最佳做法。網頁版 9
import { getAuth, signInWithRedirect } from "firebase/auth"; const auth = getAuth(); signInWithRedirect(auth, provider);
網頁版 8
firebase.auth().signInWithRedirect(provider);
然後在頁面載入時呼叫
getRedirectResult()
,擷取 Apple 權杖:網頁版 9
import { getAuth, getRedirectResult, OAuthProvider } from "firebase/auth"; // Result from Redirect auth flow. const auth = getAuth(); getRedirectResult(auth) .then((result) => { const credential = OAuthProvider.credentialFromResult(result); if (credential) { // You can also get the Apple OAuth Access and ID Tokens. const accessToken = credential.accessToken; const idToken = credential.idToken; } // The signed-in user info. const user = result.user; }) .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 credential that was used. const credential = OAuthProvider.credentialFromError(error); // ... });
網頁版 8
// Result from Redirect auth flow. firebase .auth() .getRedirectResult() .then((result) => { if (result.credential) { /** @type {firebase.auth.OAuthCredential} */ var credential = result.credential; // You can get the Apple OAuth Access and ID Tokens. var accessToken = credential.accessToken; var idToken = credential.idToken; // IdP data available in result.additionalUserInfo.profile. // ... } // The signed-in user info. var user = result.user; }) .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; // ... });
您也可以在這裡捕捉及處理錯誤。如需錯誤代碼清單,請參閱 API 參考資料。
與許多其他身分提供者不同,Apple 不會提供相片網址。
如果使用者選擇不與您的應用程式分享真實電子郵件地址,Apple 會為該使用者提供專屬電子郵件地址,供其使用。這封電子郵件的格式為 xyz@privaterelay.appleid.com
。如果您已設定私人電子郵件轉送服務,Apple 會將寄到匿名地址的電子郵件轉寄至使用者的實際電子郵件地址。
Apple 只會在使用者首次登入時,將使用者資訊 (例如顯示名稱) 提供給應用程式。在大多數情況下,Identity Platform 會儲存這類資料,讓您在日後的工作階段中使用 firebase.auth().currentUser.displayName
擷取資料。不過,如果您在整合 Identity Platform 之前,就允許使用者使用 Apple 登入應用程式,就無法取得使用者資訊。
後續步驟
- 瞭解如何將 Apple 帳戶連結至其他供應商。請注意,Apple 規定您必須先取得使用者的明確同意,才能將他們的 Apple 帳戶連結至其他資料。
- 進一步瞭解 Identity Platform 使用者。
- 使用其他身分識別提供者登入使用者。