JavaScript による Apple を使用した認証

Firebase SDK を使用してエンドツーエンドの OAuth 2.0 ログインフローを実行すると、ユーザーが Firebase での認証に Apple ID を使用できるようになります。

始める前に

ユーザーが Apple を使用してログインできるようにするには、まず Apple のデベロッパーサイトで「Apple でサインイン」を構成してから、Firebase プロジェクトのログインプロバイダとして Apple を有効にします。

Apple Developer Program に参加する

「Apple でサインイン」は Apple Developer Program のメンバーのみが構成できます。

Apple Developer サイトでの手順は次のとおりです。

Web 向けに「Apple でサインイン」を構成するの最初のセクションの説明に沿って、ウェブサイトをアプリに関連付けます。プロンプトが表示されたら、次の URL を戻り先 URL として登録します。
```
https://YOUR_FIREBASE_PROJECT_ID.firebaseapp.com/__/auth/handler
```
Firebase プロジェクト ID は、Firebase コンソールの [プロジェクトの設定] ページで確認できます。

作業が完了したら、新しいサービス ID をメモしておきます。この ID は次のセクションで必要になります。
「Apple でサインイン」の秘密鍵を作成します。新しい秘密鍵と鍵 ID は、次のセクションで必要になります。
メールリンクログイン、メールアドレスの確認、アカウントの変更の取り消しなど、ユーザーにメールを送信する Firebase Authentication の機能を使用する場合は、Apple のプライベートメールリレーサービスを構成し、noreply@YOUR_FIREBASE_PROJECT_ID.firebaseapp.com（またはカスタマイズしたメールテンプレートドメイン）を登録します。これにより Apple は、Firebase Authentication によって送信されたメールを、匿名化された Apple のメールアドレスに転送できます。

プロジェクトに Firebase を追加します。
Firebase コンソールで [Auth] セクションを開きます。[Sign-in method] タブで、[Apple] プロバイダを有効にします。前のセクションで作成したサービス ID を指定します。また、[OAuth コードフローの構成] セクションで、Apple チーム ID、前のセクションで作成した秘密鍵と鍵 ID を指定します。

Apple の匿名化データの要件を遵守する

「Apple でサインイン」には、ユーザーがログイン時に、メールアドレスを含む自分のデータを匿名化できるオプションがあります。このオプションを選択したユーザーには、ドメイン privaterelay.appleid.com のメールアドレスが作成されます。アプリで「Apple でサインイン」を使用する場合は、これらの匿名化された Apple ID に関して、Apple が定めるデベロッパーポリシーと利用規約を遵守する必要があります。

これには、本人を直接特定できる個人情報を、匿名化された Apple ID に関連付ける前に、必要なユーザーの同意を得ることも含まれます。Firebase Authentication を使用する場合、この関連付けには、次のアクションが該当することがあります。

匿名化された Apple ID にメールアドレスをリンク（またはその逆方向にリンク）する。
匿名化された Apple ID に電話番号をリンク（またはその逆方向にリンク）する。
匿名化された Apple ID に匿名ではないソーシャル認証情報（Facebook、Google など）をリンク（またはその逆方向にリンク）する。

上記のリストはすべてを網羅しているわけではありません。アプリが Apple の要件を満たしていることを確認するには、デベロッパーアカウントの [Membership] セクションにある Apple Developer Program License Agreement をご覧ください。

Firebase SDK を使用したログインフローの処理

ウェブアプリをビルドする場合、Apple アカウントを使用して Firebase でユーザーを認証する最も簡単な方法は、Firebase JavaScript SDK でログインフロー全体を処理することです。

Firebase JavaScript SDK でログインフローを処理する手順は次のとおりです。

対応するプロバイダ ID OAuthProvider を使用して、OAuthProvider のインスタンスを作成します。
Web

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

const provider = new OAuthProvider('apple.com');auth_apple_provider_create.js
```
Web
```
var provider = new firebase.auth.OAuthProvider('apple.com');apple.js
```
省略可: 認証プロバイダにリクエストする、デフォルトを超える追加の OAuth 2.0 スコープを指定します。
Web

ツリーシェイキングが可能なモジュラーウェブ API の詳細と、名前空間 API からのアップグレード方法をご確認ください。
```
provider.addScope('email');
provider.addScope('name');auth_apple_provider_scopes.js
```
Web
```
provider.addScope('email');
provider.addScope('name');apple.js
```
デフォルトでは、[1 つのメールアドレスにつき 1 つのアカウント] が有効である場合、Firebase はメールアドレスと名前のスコープをリクエストします。この設定を [1 つのメールアドレスにつき複数のアカウント] に変更すると、Firebase は Apple にスコープをリクエストしません（指定した場合を除きます）。
省略可: Apple のログイン画面を英語以外の言語で表示する場合は、locale パラメータを設定します。サポートされる言語 / 地域については、「Apple でサインイン」に関するドキュメントをご覧ください。
Web

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

OAuth プロバイダオブジェクトを使用して Firebase での認証を行います。ユーザーに Apple アカウントでログインするよう促すために、ポップアップウィンドウを表示するか、ログインページにリダイレクトします。モバイルデバイスではリダイレクトすることをおすすめします。

ポップアップウィンドウでログインを行う場合は、signInWithPopup() を呼び出します。

Web

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

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() を呼び出します。

Web

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

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

Web

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

ユーザーがログインを完了してページに戻ったら、getRedirectResult() を呼び出してログイン結果を取得できます。

Web

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

// 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 リファレンスをご覧ください。

Firebase Auth でサポートされている他のプロバイダとは異なり、Apple では写真の URL が提供されません。

また、ユーザーがアプリとメールの共有を行わない場合、Apple はそのユーザーに固有のメールアドレス（xyz@privaterelay.appleid.com の形式）をプロビジョニングし、これをアプリと共有します。プライベートメールリレーサービスを構成した場合、Apple は、匿名化されたアドレスに送信されたメールを、ユーザーの実際のメールアドレスに転送します。

Apple が表示名などのユーザー情報をアプリと共有するのは、ユーザーの初回ログイン時のみです。通常、ユーザーが初めて Apple でログインしたときに Firebase で表示名が保存されます。この情報は firebase.auth().currentUser.displayName で取得できます。ただし、以前に Apple を使用してアプリへのユーザーのログインを行った際に Firebase を使用していなかった場合、Apple はユーザーの表示名を Firebase に渡しません。

再認証とアカウントのリンク

同じパターンを reauthenticateWithPopup() と reauthenticateWithRedirect() でも使用できます。これらは、ログインしてから短時間のうちに行うべき機密性の高い操作のために、最新の認証情報を取得するのに使用できます。

Web

import { getAuth, reauthenticateWithPopup, OAuthProvider } from "firebase/auth";

// Result from Redirect auth flow.
const auth = getAuth();
const provider = new OAuthProvider('apple.com');

reauthenticateWithPopup(auth.currentUser, provider)
  .then((result) => {
    // User is re-authenticated with fresh tokens minted and can perform
    // sensitive operations like account deletion, or updating their email
    // address or password.

    // The signed-in user info.
    const user = result.user;

    // You can also get the Apple OAuth Access and ID Tokens.
    const credential = OAuthProvider.credentialFromResult(result);
    const accessToken = credential.accessToken;
    const idToken = credential.idToken;

    // ...
  })
  .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_reauthenticate_popup.js

Web

const provider = new firebase.auth.OAuthProvider('apple.com');

firebase
  .auth()
  .currentUser
  .reauthenticateWithPopup(provider)
  .then((result) => {
    // User is re-authenticated with fresh tokens minted and can perform
    // sensitive operations like account deletion, or updating their email
    // address or password.
    /** @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 in result.additionalUserInfo.profile.
      // ...
  })
  .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

また、linkWithPopup() と linkWithRedirect() を使用して、複数の ID プロバイダを既存のアカウントにリンクすることができます。

Apple は、Apple アカウントを他のデータにリンクする前にユーザーから明示的な同意を得ることを要件としています。

たとえば、Facebook アカウントを現在の Firebase アカウントにリンクするには、Facebook へのユーザーのログイン時に取得したアクセストークンを使用します。

Web

import { getAuth, linkWithPopup, FacebookAuthProvider } from "firebase/auth";

const auth = getAuth();
const provider = new FacebookAuthProvider();
provider.addScope('user_birthday');

// Assuming the current user is an Apple user linking a Facebook provider.
linkWithPopup(auth.currentUser, provider)
    .then((result) => {
      // Facebook credential is linked to the current Apple user.
      // ...

      // The user can now sign in to the same account
      // with either Apple or Facebook.
    })
    .catch((error) => {
      // Handle error.
    });auth_apple_link_facebook.js

Web

const provider = new firebase.auth.FacebookAuthProvider();
provider.addScope('user_birthday');

// Assuming the current user is an Apple user linking a Facebook provider.
firebase.auth().currentUser.linkWithPopup(provider)
    .then((result) => {
      // Facebook credential is linked to the current Apple user.
      // Facebook additional data available in result.additionalUserInfo.profile,

      // Additional Facebook OAuth access token can also be retrieved.
      // result.credential.accessToken

      // The user can now sign in to the same account
      // with either Apple or Facebook.
    })
    .catch((error) => {
      // Handle error.
    });apple.js

Chrome 拡張機能で Firebase による認証を行う

Chrome 拡張機能アプリを作成する場合は、画面外ドキュメントのガイドをご覧ください。

プロジェクトの作成時に、Firebase は次のようなプロジェクト固有のサブドメインをプロビジョニングします。https://my-app-12345.firebaseapp.com

これは、OAuth ログインのリダイレクトメカニズムとしても使用されます。このドメインは、サポートされているすべての OAuth プロバイダに許可される必要があります。この場合、ユーザーが Apple にログインしている間、アプリケーションにリダイレクトする前に、[Continue to: https://my-app-12345.firebaseapp.com] のようにドメインを含むメッセージが表示される可能性があります。

サブドメインが表示されないようにするには、Firebase Hosting でカスタムドメインを設定します。

Hosting 用にドメインを設定するの手順 1～3 を行います。ドメインの所有権を確認すると、Hosting はカスタムドメイン向けに SSL 証明書をプロビジョニングします。
Firebase コンソールで、認可済みドメインのリストにカスタムドメイン auth.custom.domain.com を追加します。
Apple のデベロッパーコンソールまたは OAuth 設定ページで、リダイレクトページの URL（https://auth.custom.domain.com/__/auth/handler）をホワイトリストに登録します。これにより、カスタムドメインでアクセス可能になります。

JavaScript ライブラリを初期化するときに、authDomain フィールドにカスタムドメインを指定します。

var config = {
  apiKey: '...',
  // Changed from 'my-app-12345.firebaseapp.com'.
  authDomain: 'auth.custom.domain.com',
  databaseURL: 'https://my-app-12345.firebaseio.com',
  projectId: 'my-app-12345',
  storageBucket: 'my-app-12345.appspot.com',
  messagingSenderId: '1234567890'
};
firebase.initializeApp(config);

デフォルトの firebaseapp.com ドメインと同様に、カスタムドメインも Apple で確認する必要があります。

http://auth.custom.example.com/.well-known/apple-developer-domain-association.txt

トークン失効

App Store のレビューガイドラインで説明されているように、Apple は、アカウントの作成をサポートするアプリにおいて、ユーザーがアプリ内でアカウントの削除を開始できるようにすることを求めています。

この要件を満たすには、次の手順を行います。

「Apple でサインイン」を構成するセクションで説明されているとおり、「Apple でサインイン」プロバイダ構成のサービス ID と OAuth コードフロー構成セクションを入力します。

「Apple でサインイン」を使用してユーザーを作成した場合、Firebase はユーザートークンを保存しないため、トークンを取り消してアカウントを削除する前に、ユーザーに再度ログインするように求める必要があります。

次に、OAuthCredential から Apple OAuth アクセストークンを取得し、それを使用して revokeAccessToken(auth, token) を呼び出して Apple OAuth アクセストークンを取り消します。

const provider = new OAuthProvider('apple.com');
provider.addScope('email');
provider.addScope('name');

const auth = getAuth();
signInWithPopup(auth, provider).then(result => {
  // Get the Apple OAuth access token.
  const credential = OAuthProvider.credentialFromResult(result);
  const accessToken = credential.accessToken;

  // Revoke the Apple OAuth access token.
  revokeAccessToken(auth, accessToken)
    .then(() => {
      // Token revoked.

      // Delete the user account.
      // ...
    })
    .catch(error => {
      // An error happened.
      // ...
    });
});

最後に、ユーザーアカウント（および関連するすべてのデータ）を削除します。

高度: Node.js 内で Firebase による認証を行う

Node.js アプリケーションで Firebase により認証する手順は、次のとおりです。

Apple アカウントでユーザーをログインさせ、ユーザーの Apple ID トークンを取得します。これには複数の方法があります。たとえば、Node.js アプリにブラウザのフロントエンドがある場合は、次のようにします。

バックエンドで、ランダムな文字列（「ノンス」）を生成し、その SHA256 ハッシュを計算します。ノンスとは、バックエンドと Apple の認証サーバー間の 1 回のラウンドトリップを検証するために使用する 1 回限りの値です。

Web

const crypto = require("crypto");
const string_decoder = require("string_decoder");

// Generate a new random string for each sign-in
const generateNonce = (length) => {
  const decoder = new string_decoder.StringDecoder("ascii");
  const buf = Buffer.alloc(length);
  let nonce = "";
  while (nonce.length < length) {
    crypto.randomFillSync(buf);
    nonce = decoder.write(buf);
  }
  return nonce.slice(0, length);
};

const unhashedNonce = generateNonce(10);

// SHA256-hashed nonce in hex
const hashedNonceHex = crypto.createHash('sha256')
  .update(unhashedNonce).digest().toString('hex');auth_apple_nonce_node.js

Web

const crypto = require("crypto");
const string_decoder = require("string_decoder");

// Generate a new random string for each sign-in
const generateNonce = function(length) {
  const decoder = new string_decoder.StringDecoder("ascii");
  const buf = Buffer.alloc(length);
  var nonce = "";
  while (nonce.length < length) {
    crypto.randomFillSync(buf);
    nonce = decoder.write(buf);
  }
  return nonce.slice(0, length);
};

const unhashedNonce = generateNonce(10);

// SHA256-hashed nonce in hex
const hashedNonceHex = crypto.createHash('sha256')
  .update(unhashedNonce).digest().toString('hex');apple.js

ログインページで、「Apple でサインイン」の構成に、ハッシュ計算済みのノンスを指定します。

<script src="https://appleid.cdn-apple.com/appleauth/static/jsapi/appleid/1/en_US/appleid.auth.js"></script>
<div id="appleid-signin" data-color="black" data-border="true" data-type="sign in"></div>
<script>
    AppleID.auth.init({
        clientId: YOUR_APPLE_CLIENT_ID,
        scope: 'name email',
        redirectURI: URL_TO_YOUR_REDIRECT_HANDLER,  // See the next step.
        state: '[STATE]',  // Optional value that Apple will send back to you
                           // so you can return users to the same context after
                           // they sign in.
        nonce: HASHED_NONCE  // The hashed nonce you generated in the previous step.
    });
</script>

POST の認証レスポンスサーバーサイドから Apple ID トークンを取得します。

app.post('/redirect', (req, res) => {
  const savedState = req.cookies.__session;
  const code = req.body.code;
  const state = req.body.state;
  const appleIdToken = req.body.id_token;
  if (savedState !== state || !code) {
    res.status(403).send('403: Permission denied');
  } else {
    // Sign in with Firebase using appleIdToken. (See next step).
  }
});

ウェブページでの「Apple でサインイン」の構成もご覧ください。

ユーザーの Apple ID トークンを取得した後、そのトークンを使用して認証情報オブジェクトを作成してから、その認証情報でユーザーをログインさせます。

Web

import { getAuth, signInWithCredential, OAuthProvider } from "firebase/auth";

const auth = getAuth();

// Build Firebase credential with the Apple ID token.
const provider = new OAuthProvider('apple.com');
const authCredential = provider.credential({
  idToken: appleIdToken,
  rawNonce: unhashedNonce,
});

// Sign in with credential form the Apple user.
signInWithCredential(auth, authCredential)
  .then((result) => {
    // User signed in.
  })
  .catch((error) => {
    // An error occurred. If error.code == 'auth/missing-or-invalid-nonce',
    // make sure you're sending the SHA256-hashed nonce as a hex string
    // with your request to Apple.
    console.log(error);
  });auth_apple_signin_nonce.js

Web

// Build Firebase credential with the Apple ID token.
const provider = new firebase.auth.OAuthProvider('apple.com');
const authCredential = provider.credential({
  idToken: appleIdToken,
  rawNonce: unhashedNonce,
});

// Sign in with credential form the Apple user.
firebase.auth().signInWithCredential(authCredential)
  .then((result) => {
    // User signed in.
  })
  .catch((error) => {
    // An error occurred. If error.code == 'auth/missing-or-invalid-nonce',
    // make sure you're sending the SHA256-hashed nonce as a hex string
    // with your request to Apple.
    console.log(error);
  });apple.js

次のステップ

ユーザーが初めてログインすると、新しいユーザーアカウントが作成され、ユーザーがログイン時に使用した認証情報（ユーザー名とパスワード、電話番号、または認証プロバイダ情報）にアカウントがリンクされます。この新しいアカウントは Firebase プロジェクトの一部として保存され、ユーザーのログイン方法にかかわらず、プロジェクトのすべてのアプリでユーザーを識別するために使用できます。

アプリでユーザーの認証ステータスを把握するには、Auth オブジェクトにオブザーバーを設定することをおすすめします。これによって、ユーザーの基本的なプロフィール情報を User オブジェクトから取得できます。ユーザーを管理するをご覧ください。
Firebase Realtime Database と Cloud Storage のセキュリティルールでは、ログイン済みユーザーの一意のユーザー ID を auth 変数から取得し、それを使用して、ユーザーがアクセスできるデータを制御できます。

既存のユーザーアカウントに認証プロバイダの認証情報をリンクすることで、ユーザーは複数の認証プロバイダを使用してアプリにログインできるようになります。

ユーザーのログアウトを行うには、signOut を呼び出します。

Web

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

const auth = getAuth();
signOut(auth).then(() => {
  // Sign-out successful.
}).catch((error) => {
  // An error happened.
});auth_sign_out.js

Web

firebase.auth().signOut().then(() => {
  // Sign-out successful.
}).catch((error) => {
  // An error happened.
});index.js