ウェブ版「Sign In WIth Apple」をFirebaseで実装するには

#はじめに
当記事は、FirebaseのAuthenticationを用いて、Apple IDでユーザーログインをする方法について記載していきます。
※記事の中でコードの紹介はしておりませんが、筆者はSwiftではなく、Javascriptで実装をした後、この記事を書いています。

[Firebase公式ドキュメント](https://firebase.google.com/docs/auth/web/apple?hl=ja)がAppleの仕様変更に対応しておらず(2020年7月2日現在)、幾らか時間がかかったので、同様の実装を検討されてる方のお役に立てたら幸いです。

結論だけ先に言うと、
`apple-developer-domain-association.txt`
がApple側でダウンロード出来なくなっており、生成した秘密鍵の情報をFirebaseに入力することでApple IDのソーシャルログインが実装できます。


##Apple IDによるログインについて

GoogleやFacebookによる、ソーシャルログインのように、Apple IDを用いてサイトログインをすることが出来ます。
[AppStoreのガイドライン](https://developer.apple.com/app-store/review/guidelines/#sign-in-with-apple)によると、サードパーティやソーシャルログインのみでログイン機能を実装している全てのiOSアプリは2020年6月30日までに、Apple IDによるログインを、ログイン方法の一つとして加える必要があり、私もその流れの中で今回実装をしました。

Apple ID認証の大きな特徴としては、
・Apple IDに登録しているメールアドレスだけでなく、Appleがランダムで生成したアドレスを利用してログイン出来る（その安全性はAppleが担保）
・スマートフォン限定ですが、「顔認証」「指紋認証」によるログインが可能

以上が挙げられます。


##FIrebaseとAppleの連携
**※実装にはAppleのデベロッパー登録が必要です。**

######①[AppleDeveloperサイト](https://developer.apple.com/account/resources/certificates/list)へアクセス

######②「Identifiers」の項からApp Idを作成
※法人でApple Developer登録している人は管理者権限のアカウントのみApp Id作成ボタンが表示されます

<img width="1275" alt="スクリーンショット 2020-07-02 11.00.01.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/357734/789b4fc0-046a-d40d-f5c2-7c1c309afbac.png">

通常のiOSアプリ、あるいはウェブサイトにログイン機能をつける場合は、「App」をクリック。

<img width="958" alt="スクリーンショット 2020-07-02 11.05.39.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/357734/a3c22573-6499-5f68-53d9-f57c7f9d5d62.png">

識別情報の入力に加えて、「Sign In WIth Apple」の設定をします。
<img width="958" alt="スクリーンショット 2020-07-02 11.06.26.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/357734/b19a466a-f056-a43e-e27f-276aa115a455.png">

######③「Identifiers」の項からService Idを作成
先ほど、App Idを作った手順と同様に、今度はService Idを作成します。

Idの登録後に再度作成したService Idをクリックすると、下記写真のような設定画面が現れます。
<img width="717" alt="スクリーンショット 2020-07-01 2.34.57.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/357734/37a0d7a0-f636-58bd-33e5-e866cfba4313.png">

**Domeins and Subdomains**には、ログイン後にリダイレクトするサービスサイトのドメイン(例えばgoogle.comやApple.comなど)を入力。

**Return URLs**には、

```
https://YOUR_FIREBASE_PROJECT_ID.firebaseapp.com/__/auth/handler
```
を入力します。
FirebaseのプロジェクトIDはコンソール画面等で確認できるので、事前に控えておくと良いでしょう。

リダイレクト先には既にサーバーに上がっているサイトを指定することが前提になります（ローカルホストを指定するとAppleに弾かれるため）。

######④秘密鍵の取得
Apple Developer側で行う最後の作業です。
「Keys」の項をクリックし、新しく秘密鍵を生成します。

先ほどと同様に、「Sign In With Apple」を指定
<img width="1178" alt="スクリーンショット 2020-07-02 11.20.34.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/357734/a6785f90-fc8f-bba4-befb-bc19098a8010.png">

秘密鍵生成の対象とするApp Idを指定した後、登録をすると、秘密鍵のダウンロードページが表示されます。

<img width="1178" alt="スクリーンショット 2020-07-02 11.21.29.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/357734/89378864-24f9-79d8-516d-804e5047feeb.png">

こちらのダウンロードページは**一度のみ**の表示で、誤ってブラウザを閉じてしまった場合などは最初から秘密鍵を作り直すことになるので要注意です。
同ページに**KeyId**などの情報が表示されているので、ダウンロードと合わせて控えておきます。


######⑤Firebaseの設定

Firebase Authenticationの「Sign-in Methods」にて、下記写真のようにApple IDによる、ソーシャルログインを有効にします。

<img width="941" alt="スクリーンショット 2020-07-02 11.27.04.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/357734/2b95b3ca-42c0-19fe-2775-936d081f01a2.png">

その際に、

・サービスID（手順の③で作成した「Service Id」の識別子）
・AppleチームID
・キーID（手順の④の秘密鍵のDLページで控えたID）
・秘密鍵の中身

を入力します。

上記を余すことなく入力出来たら、
AppleとFirebaseの連携は完了です！！

####おわりに

私の所属するチームは[FirebaseUI](https://firebase.google.com/docs/auth/web/firebaseui)を利用して、ログインページを作っています。
Apple IDでログインする場合、他のソーシャルログイン(Google,Facebookなど)と若干Configのコードの書き方が異なるので注意です。(詳しくは[GitHub](https://github.com/firebase/firebaseui-web/blob/master/demo/public/app.js)を)

こちらの記事を参考にさせていただきました。
ありがとうございます！
・[Appleでサインインとは？](https://socialplus.jp/content/sign_in_with_apple)　
・[Sign In with Apple on Firebase](https://fireship.io/lessons/apple-signin-with-firebase-tutorial/)　
・[FirebaseUI](https://qiita.com/GIGU/items/ec171aff67bdf583cf46)