【WEB】Firebase Authentication をWEBで使う【SignInWithApple】

# はじめに
公式ドキュメント見て試したところ、ん？と思うことがあったので自分が試した方法をメモしておきます。
Appleの設定等に疎いので間違っていたら教えてください。
https://firebase.google.com/docs/auth/web/apple?authuser=0

# 前提条件
firebaseのプロジェクト作成済み
[apple developer program](https://developer.apple.com/account/resources)登録済み

# Apple Developper 側設定

## Identifiers 作成
https://developer.apple.com/account/resources にアクセスし、Identifiersを選択、+ボタンをクリック
![スクリーンショット 2020-07-17 9.23.37.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/262297/19d26dbd-dff1-7c17-e0e1-50211e4c26c5.png)

Services IDsを選択してContinueをクリック。
![スクリーンショット 2020-07-16 15.57.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/262297/4af96f49-e9e0-9159-a586-f298c20070ec.png)

DescriptionとIdentifierを入力する。
![スクリーンショット 2020-07-17 11.09.23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/262297/a732eea4-c60b-0a2a-3751-243a9db2b84c.png)

Descriptionは画像のようにユーザーがログインしようとする際、表示されるので注意
![スクリーンショット 2020-07-16 20.01.54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/262297/4f5990c5-6626-39f8-4e8d-5b88b3669b61.png)


Identifierは提供する予定のサービスのリバースドメインドメイン

```
https://hoge.com/ でアプリ名が HogeHogeApp だと
com.hoge.HogeHogeApp
```
が推奨されているのでそれを入力(Firebaseのドメインじゃなく、Sign In With Apple が動作する予定のサイトのドメイン)
入力したらContinueをクリック。そうすると確認画面が出るので **Identifierをコピーしておき** 、registerをクリックして確定。

## Identifers設定
https://developer.apple.com/account/resources/identifiers/list/serviceId にアクセスし、先ほど作成したIdentifiers
をクリック

下図の画面が出るのでENABLEDにチェックを入れ、白背景の方のConfigureをクリック
![スクリーンショット 2020-07-17 11.42.58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/262297/0e3b96dc-11d0-ed70-c3a1-e8469e0d826c.png)

Primary APP ID を先ほどApp Identifier選択or作成で作ったものor選択したものを選択
Domains and Subdomains に 

```
YOUR_FIREBASE_PROJECT_ID.firebaseapp.com
```

Return URLs に

```
https://YOUR_FIREBASE_PROJECT_ID.firebaseapp.com/__/auth/handler
```
を入力
FirebaseプロジェクIDは、Firebase [コンソール](https://console.firebase.google.com/project/_/settings/general/?authuser=0)の [設定] ページで確認できます。
![スクリーンショット 2020-07-17 12.42.38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/262297/74f0bf72-c10d-0e7b-4373-0aeaf3278017.png)

Nextを押し、確認画面が出るのでDoneを押す。Saveを押し、Continueを押す。
## 鍵ファイル作成
https://developer.apple.com/account/resources/authkeys/list にアクセスし、Keysの横の+をクリック
Key Nameにわかりやすい名前を入力
Sign in with AppleにチェックをつけてConfigureをクリック
![スクリーンショット 2020-07-17 13.40.17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/262297/256b2e20-f3ea-2707-da2c-f63896045c08.png)
そしたらまた最初に作成or選択したPrimaryAppを選択、Save
Downloadを押し、鍵ファイルをダウンロード。key IDをメモっておく。

以上でApple Developer側の設定は終わりです。

# Firebase設定
Firebase [コンソール](https://console.firebase.google.com/project/_/settings/general/?authuser=0)にアクセス、プロジェクトをクリックし左のメニューからAuthenticationをクリックし、Sign-in methodをクリック
![スクリーンショット 2020-07-17 13.21.47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/262297/f9c4b88d-9c47-4e51-7c45-428619a9d95f.png)
Appleをクリックし、有効をクリック。
サービス IDに先ほどコピーしたIdentifierを貼り付け(リバースドメインのやつ)
Apple チーム IDはAppleの[設定画面](https://developer.apple.com/account/#/membership)に書いてあるのでコピペ
キーIDは先ほど作った鍵のID
秘密鍵は先ほどダウンロードした鍵ファイルの中身を全てコピペ

![スクリーンショット 2020-07-17 13.31.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/262297/c24b812c-46ed-1635-f3e1-37e80541af69.png)
あとはfirebase uiを使えばいける！はず！