Apple でのユーザーのログイン
このドキュメントでは、Identity Platform を使用してウェブアプリに「Apple でログイン」を追加する方法を説明します。
始める前に
HTML と JavaScript で Identity Platform を使用する基本的なウェブアプリを作成します。その方法については、クイックスタートをご覧ください。
Apple Developer Program に参加します。
Apple によりアプリを構成する
Apple Developer サイトで次の手順を行います。
Web 向けに「Appleでログイン」を設定するの手順に従います。以下に例を示します。
次のような戻り URL を登録します。
https://project-id.firebaseapp.com/__/auth/handler
次の URL でファイルを一時的にホストしてドメインを確認します。
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 ID に関して、Apple が定めるデベロッパー ポリシーと利用規約を遵守する必要があります。これには、個人を特定できる情報(PII)を匿名化された Apple ID に関連付ける前にユーザーの同意を得ることも含まれます。PII が含まれるアクションには次のようなものがあります(ただし、これらに限定されません)。
- 匿名化された Apple ID にメールアドレスをリンク(またはその逆方向にリンク)する。
- 匿名化された Apple ID に電話番号をリンク(またはその逆方向にリンク)する。
- 匿名化された Apple ID に匿名ではないソーシャル認証情報(Facebook、Google など)をリンク(またはその逆方向にリンク)する。
詳しくは、Apple デベロッパー アカウントの Apple Developer Program License Agreement をご覧ください。
Apple をプロバイダとして構成する
Apple を ID プロバイダとして構成するには:
Google Cloud コンソールで [ID プロバイダ] ページに移動します。
[プロバイダを追加] をクリックします。
リストから [Apple] を選択します。
[プラットフォーム] で [ウェブ] を選択します。
サービス ID、Apple チーム ID、鍵 ID、秘密鍵を入力します。
[承認済みドメイン] で [ドメインを追加] をクリックして、アプリのドメインを登録します。開発目的の場合は、
localhost
はデフォルトですでに有効になっています。[アプリケーションの構成] で [設定の詳細] をクリックします。このスニペットをアプリのコードにコピーして、Identity Platform クライアント SDK を初期化します。
[保存] をクリックします。
Client SDK を使用したユーザーのログイン
ユーザーのログインを行うには:
ID
apple.com
を使用して、OAuthProvider
プロバイダ オブジェクトのインスタンスを作成します。Web バージョン 9
import { OAuthProvider } from "firebase/auth"; const provider = new OAuthProvider('apple.com');
Web バージョン 8
var provider = new firebase.auth.OAuthProvider('apple.com');
省略可: OAuth スコープを追加します。スコープとは、Apple からどんなデータを要求するかを指定します。より機密性の高いデータには、特定のスコープが必要になる場合があります。デフォルトでは、[1 つのメールアドレスにつき 1 つのアカウント] が有効である場合、Identity Platform では
email
とname
のスコープをリクエストします。Web バージョン 9
provider.addScope('email'); provider.addScope('name');
Web バージョン 8
provider.addScope('email'); provider.addScope('name');
省略可: 認証フローをローカライズします。言語を指定するか、デバイスのデフォルトの言語を使用できます。サポートされる言語 / 地域については、「Apple でログイン」に関するドキュメントをご覧ください。
Web バージョン 9
provider.setCustomParameters({ // Localize the Apple authentication screen in French. locale: 'fr' });
Web バージョン 8
provider.setCustomParameters({ // Localize the Apple authentication screen in French. locale: 'fr' });
プロバイダ オブジェクトを使用して、ユーザーのログインを行います。ポップアップ ウィンドウを開くか、現在のページをリダイレクトします。モバイル デバイスでは、ユーザーにとってはリダイレクトの方が簡単です。
ポップアップを表示するには、
signInWithPopup()
を呼び出します。Web バージョン 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); // ... });
Web バージョン 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
を使用する場合は、ベスト プラクティスに従ってください。Web バージョン 9
import { getAuth, signInWithRedirect } from "firebase/auth"; const auth = getAuth(); signInWithRedirect(auth, provider);
Web バージョン 8
firebase.auth().signInWithRedirect(provider);
次に、ページが読み込まれたときに
getRedirectResult()
を呼び出して Apple トークンを取得します。Web バージョン 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); // ... });
Web バージョン 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 リファレンスをご覧ください。
他の多くの ID プロバイダとは異なり、Apple では写真の URL が提供されません。
ユーザーがアプリと実際のメールの共有を行わない場合、Apple は代わりにそのユーザーに固有のメールアドレスをプロビジョニングして共有します。このメールの形式は xyz@privaterelay.appleid.com
です。プライベート メールリレー サービスを構成した場合、Apple は匿名化されたアドレスに送信されたメールを、ユーザーの実際のメールアドレスに転送します。
Apple が表示名などのユーザー情報をアプリと共有するのは、ユーザーの初回ログイン時のみです。ほとんどの場合、Identity Platform がこのデータを格納しており、その後のセッションでは firebase.auth().currentUser.displayName
を使用してそれを取得できます。ただし、Identity Platform と統合する前に、ユーザーが Apple を使用してアプリにログインできるようにした場合、ユーザー情報は利用できません。
次のステップ
- Apple アカウントを他のプロバイダにリンクする方法を確認する。Apple は、Apple アカウントを他のデータにリンクする前にユーザーから明示的な同意を得ることを要件としています。
- Identity Platform ユーザーの詳細について確認する。
- 他の ID プロバイダでユーザーのログインを行う。