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

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

始める前に

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

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

  1. 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
      

    また、サービス IDApple チーム ID をメモしておきます。これらは次のセクションで必要になります。

  2. Apple の秘密鍵を使用してログインを作成しますとその ID は次のセクションで必要になります。

  3. 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 プロバイダとして構成するには:

  1. Google Cloud コンソールで [ID プロバイダ] ページに移動します。

    [ID プロバイダ] ページに移動

  2. [プロバイダを追加] をクリックします。

  3. リストから [Apple] を選択します。

  4. [プラットフォーム] で [ウェブ] を選択します。

  5. サービス IDApple チーム ID鍵 ID秘密鍵を入力します。

  6. [承認済みドメイン] で [ドメインを追加] をクリックして、アプリのドメインを登録します。開発目的の場合は、localhost はデフォルトですでに有効になっています。

  7. [アプリケーションの構成] で [設定の詳細] をクリックします。このスニペットをアプリのコードにコピーして、Identity Platform Client SDK を初期化します。

  8. [保存] をクリックします。

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

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

  1. 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');
  2. 省略可: OAuth スコープを追加します。スコープとは、Apple からどんなデータを要求するかを指定します。より機密性の高いデータには、特定のスコープが必要になる場合があります。デフォルトでは、[1 つのメールアドレスにつき 1 つのアカウント] が有効である場合、Identity Platform では emailname のスコープをリクエストします。

    Web バージョン 9

    provider.addScope('email');
    provider.addScope('name');

    Web バージョン 8

    provider.addScope('email');
    provider.addScope('name');
  3. 省略可: 認証フローをローカライズします。言語を指定するか、デバイスのデフォルトの言語を使用できます。サポートされる言語 / 地域については、「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'
    });
  4. プロバイダ オブジェクトを使用して、ユーザーのログインを行います。ポップアップ ウィンドウを開くか、現在のページをリダイレクトします。モバイル デバイスでは、ユーザーにとってはリダイレクトの方が簡単です。

    ポップアップを表示するには、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() を呼び出します。

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

    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 を使用してアプリにログインできるようにした場合、ユーザー情報は利用できません。

次のステップ