Apple でのユーザーのログイン

このドキュメントでは、Identity Platform を使用してウェブアプリに「Apple でログイン」を追加する方法を説明します。

始める前に

HTML と JavaScript で Identity Platform を使用する基本的なウェブアプリを作成します。その方法については、クイックスタートをご覧ください。
Apple Developer Program に参加します。

Apple によりアプリを構成する

Apple Developer サイトで次の手順を行います。

Web 向けに「Appleでログイン」を設定するの手順に従います。次の操作が含まれます。
1. 次のような戻り URL を登録します。
```
https://project-id.firebaseapp.com/__/auth/handler
```
2. 次の 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 プロバイダ] ページに移動します。

[ID プロバイダ] ページに移動
[プロバイダを追加] をクリックします。
リストから [Apple] を選択します。
[プラットフォーム] で [ウェブ] を選択します。
サービス ID、Apple チーム ID、鍵 ID、秘密鍵を入力します。
[承認済みドメイン] で [ドメインを追加] をクリックして、アプリのドメインを登録します。開発目的の場合は、localhost はデフォルトですでに有効になっています。
[アプリケーションの構成] で [設定の詳細] をクリックします。このスニペットをアプリのコードにコピーして、Identity Platform Client SDK を初期化します。
[保存] をクリックします。

Client SDK を使用したユーザーのログイン

ユーザーのログインを行うには:

ID apple.com を使用して、OAuthProvider プロバイダオブジェクトのインスタンスを作成します。
Web バージョン 9

ツリーシェイキングが可能なモジュラーウェブ API の詳細と、名前空間 API からのアップグレード方法をご確認ください。
```
import { OAuthProvider } from "firebase/auth";

const provider = new OAuthProvider('apple.com');auth_apple_provider_create.js
```
Web バージョン 8
```
var provider = new firebase.auth.OAuthProvider('apple.com');apple.js
```
省略可: OAuth スコープを追加します。スコープとは、Apple からどんなデータを要求するかを指定します。より機密性の高いデータには、特定のスコープが必要になる場合があります。デフォルトでは、[1 つのメールアドレスにつき 1 つのアカウント] が有効である場合、Identity Platform では email と name のスコープをリクエストします。
Web バージョン 9

ツリーシェイキングが可能なモジュラーウェブ API の詳細と、名前空間 API からのアップグレード方法をご確認ください。
```
provider.addScope('email');
provider.addScope('name');auth_apple_provider_scopes.js
```
Web バージョン 8
```
provider.addScope('email');
provider.addScope('name');apple.js
```
省略可: 認証フローをローカライズします。言語を指定するか、デバイスのデフォルトの言語を使用できます。サポートされる言語 / 地域については、「Apple でログイン」に関するドキュメントをご覧ください。
Web バージョン 9

ツリーシェイキングが可能なモジュラーウェブ API の詳細と、名前空間 API からのアップグレード方法をご確認ください。
```
provider.setCustomParameters({
  // Localize the Apple authentication screen in French.
  locale: 'fr'
});auth_apple_provider_params.js
```
Web バージョン 8
```
provider.setCustomParameters({
  // Localize the Apple authentication screen in French.
  locale: 'fr'
});apple.js
```

プロバイダオブジェクトを使用して、ユーザーのログインを行います。ポップアップウィンドウを開くか、現在のページをリダイレクトします。モバイルデバイスでは、ユーザーにとってはリダイレクトの方が簡単です。

ポップアップを表示するには、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);

    // ...
  });auth_apple_signin_popup.js

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;

    // ...
  });apple.js

ページをリダイレクトするには、まず signInWithRedirect() を呼び出します。

signInWithRedirect、linkWithRedirect、reauthenticateWithRedirect を使用する場合は、ベストプラクティスに従ってください。

Web バージョン 9

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

const auth = getAuth();
signInWithRedirect(auth, provider);auth_apple_signin_redirect.js

Web バージョン 8

firebase.auth().signInWithRedirect(provider);apple.js

次に、ページが読み込まれたときに 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);

    // ...
  });auth_apple_signin_redirect_result.js

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;

    // ...
  });apple.js

ここではエラーの検出と対応もできます。エラーコードのリストについては、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 プロバイダでユーザーのログインを行う。