Sign in with Apple を実装するために必要な証明書の作り方

## はじめに

2020年4月末までの実装が急がれる「Sign in with Apple」ですが、みなさん対応はお済みでしょうか？

> ■Sign in with Apple機能について
> 「Sign in with Apple」はソーシャルログインの一種で、Apple IDを用いてアプリへの会員登録やログイン認証を行うことができます。
また、以下のApple社からの告知により、第三者ソーシャルログイン（Facebook, Twitterなど）を採用するアプリは、同様に「Sign in with Apple」にも対応する必要があります。（App Storeの審査ガイドライン）
> 
> * [Appleからの告知について](https://developer.apple.com/news/?id=03042020d)
> * [App Storeの審査ガイドラインについて](https://developer.apple.com/app-store/review/guidelines/#sign-in-with-apple)

[SNS連携機能のApple ID対応リリースについて](https://mbaas.nifcloud.com/info/2020/03/sign-in-with-apple.html)より

ニフクラ mobile backend の SNS連携機能にも 2020年3月26日に「Sign in With Apple」連携機能が無事リリースされています。ここでは、「Sign in with Apple」を実装するために必要な証明書類の作り方について解説します。証明書類の準備ができた方は[【Sign in with Apple】 SwiftUI×NCMBを使って実装する](https://qiita.com/natsumo/items/91fdb1d53190719e8a22)をご覧ください。

## 環境準備

私の動作環境を記載しておきます。

* Mac OS 10.15.4
   * Xcode 11.4
   * iPhoneSE 13.4 ※動作確認はSimulatorでもOK
      * :warning: iOS13以上じゃないと Sign in With Apple は動作しません
* Apple Developer Program
   * :warning: 11,800円/年 の登録料が必要です
   * Sign in with Apple を利用するために必要な証明書類取得には登録が必須です

## 作成するものと順序

* ❶ CSR ファイル ※初回のみ作成
* ❷ iOS App Development（開発用ビルド証明書） ※初回のみ作成
* ❸ App ID（Bundle ID, Team ID）
* ❹ Key（Key ID）
* ❺ 秘密鍵.p8
* ❻ Device（動作確認端末登録） ※Simulatorの場合不要
* ❼ Provisioning Profile

![SigninWithApple連携に必要なものまとめ.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/112032/a38afece-7258-6a92-a7f6-dca9f8ea00f0.png)

前半は [プッシュ通知に必要な証明書の作り方2020 \- Qiita](https://qiita.com/natsumo/items/d5cc1d0be427ca3af1cb) と手順が似ています。同じ部分はこちらの記事を参照する形で説明を書きますので、必要に応じて２つの記事を交互にみて作業をしてください。

:point_up: 作成するものにふった番号ですが、、黒丸数字（Sign in With Apple❶〜❼）と白丸数字（プッシュ通知①〜⑦）とで書き分けていますので、参考にしてください。

## 作成手順

作成したファイル（❶、❷、❺、❼）は１つのフォルダに格納すると管理しやすいので事前にどこに保存するかを決めておきましょう。また、発行されるID（❸、❹）の管理も、テキストファイルに記載して同じフォルダに保存しておくと良いでしょう。

<img width="88" alt="スクリーンショット 2020-04-10 13.38.24.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/112032/89704718-4c2a-12f0-88e2-c3aa60fa546e.png">

### ❶ CSR ファイル

証明書を初めて作成する場合のみ作成します。手順はプッシュ通知と同様ですので以下を参考に作成してください。

[プッシュ通知に必要な証明書の作り方2020 \- Qiita > 1. CSRファイルの作成](https://qiita.com/natsumo/items/d5cc1d0be427ca3af1cb#1-csr%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E3%81%AE%E4%BD%9C%E6%88%90)
※図の①CSRファイルの作成と同じ手順

### ❷ iOS App Development（開発用ビルド証明書）

❶と同様、証明書を初めて作成する場合のみ作成します。手順はプッシュ通知と同様ですので以下を参考に作成してください。

[プッシュ通知に必要な証明書の作り方2020 \- Qiita > 2. 開発用証明書(.cer)の作成](https://qiita.com/natsumo/items/d5cc1d0be427ca3af1cb#2-%E9%96%8B%E7%99%BA%E7%94%A8%E8%A8%BC%E6%98%8E%E6%9B%B8cer%E3%81%AE%E4%BD%9C%E6%88%90)
※図の②開発用証明書(.cer)の作成と同じ手順

### ❸ App ID（Bundle ID, Team ID）

App ID も殆どプッシュ通知の手順と同様ですが、一箇所違うところがあります。

* [Apple Developer Program](https://developer.apple.com/account/) にログインします
* 「Identifiers」の「＋」をクリックします

<img width="892" alt="スクリーンショット_2020-03-31_14_24_27.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/112032/c93a0c81-47bb-3e31-65a4-61acc168ce8e.png">

* 「App IDs」にチェックをいれ、右上の「Continue」をクリックします

<img width="891" alt="スクリーンショット_2020-03-31_14_24_40.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/112032/6e98db8d-d494-8324-2c37-96c38aae2f89.png">

* 「Description」にアプリの概要を記入します
  * 例） `AppleTestApp`
* 「Bundle ID」では「Explicit」を選択し、「Bundle ID」を入力します
 * 「Bundle ID」は アプリ側で同じものを設定しますので、必ず控えておきましょう:writing_hand:

<img width="1024" alt="スクリーンショット_2020-03-31_14_25_52.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/112032/eadde9c7-94e8-5767-b34c-c294b4203326.png">

* 下にスクロールして「Capabilities」の「Sign In with Apple」にチェックを入れ、右にある「Edit」をクリックします
  * ここで「Push Notifications」にもチェックを入れておけば、プッシュ通知もつかるApp IDが作成できます:ok_hand:

<img width="800" alt="スクリーンショット_2020-03-31_14_28_08.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/112032/593887e1-8fc3-2417-0964-fcc77308687f.png">

* 「Enable as a primary App ID」にチェックを入れ、「save」をクリックします
* * 元の画面に戻るので、上にスクロールして、「Continue」をクリックします

<img width="689" alt="スクリーンショット_2020-03-31_14_26_49.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/112032/a39e7c2a-8200-ed7a-182a-8891b4580f73.png">


* 確認画面が出るので、スクロールして「Sign In with Apple」にチェックが入っていることを確認します
* 「Bundle ID」と「Team ID」はあとで ニフクラ mobile backend に設定する必要がありますので、必ず控えておきましょう:writing_hand:
* 全て確認できたら右上の「Register」をクリックします

<img width="1018" alt="スクリーンショット_2020-03-31_14_28_29.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/112032/d2b3cba6-9d50-248b-8901-52b8b3835307.png">


<img width="1022" alt="スクリーンショット_2020-03-31_14_28_19.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/112032/f443ce6f-7377-198c-0ae8-8443411565a8.png">

※補足：TeamIDは本来 Apple Developer Program を利用している Apple アカウントと紐づくものであり、AppID作成時に作られるものではありませんが、手順をよりわかりやすくするためにAppID作成時に確認する流れとしています:point_up:

これで ❸App ID の作成は完了です。

### ❹ Key（Key ID）

Key ID を作成します。

* 「Keys」の「＋」をクリックします

<img width="1023" alt="スクリーンショット_2020-03-31_14_29_49.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/112032/35ae126f-40e0-5d87-7b34-5b4e45058ce4.png">

* 「Key Name」を記入します
  * 例 `AppleTestAppKey` 
* 「Sign in with Apple」にチェックを入れ、「Configure」をクリックします

<img width="1005" alt="スクリーンショット_2020-03-31_14_30_39.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/112032/b71a6b2c-c5a9-93ac-7ef2-ece6c249526b.png">

* ❸で作成したAppIDを選択し、右上の「Save」をクリックします

<img width="980" alt="スクリーンショット_2020-03-31_14_31_04.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/112032/d11a234e-49f8-d52c-a561-dc9c46c89358.png">

* 元の画面に戻るので、右上の「Continue」をクリックします

<img width="967" alt="スクリーンショット_2020-03-31_14_31_19.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/112032/bf54d2b0-3805-873a-e438-3f275895e303.png">

* 「Register」をクリックします

<img width="946" alt="スクリーンショット_2020-03-31_14_31_55.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/112032/48182aba-8fd2-ed13-e1e7-71fe01c755f7.png">

* 「Key ID」はあとで ニフクラ mobile backend に設定する必要がありますので、必ず控えておきましょう:writing_hand:
* :warning:__画面はまだ閉じないでください！__


<img width="1016" alt="スクリーンショット_2020-03-31_14_32_16.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/112032/06e961fe-88aa-1282-e1b8-16de1d1cd3e1.png">

これで Key ID は発行されましたが、続けて秘密鍵を書き出していきます。


### ❺ 秘密鍵.p8

* 同じ画面で「Download」をクリックします
* ダウンロードされた「秘密鍵.p8」は他の証明書類と一緒に保管しておきましょう
  * :warning:「秘密鍵.p8」は__一度しか書き出すことができない__ため、大切に保管しましょう！
* 無事にダウンロードができたら右上の「Done」をクリックして画面を閉じます

<img width="1016" alt="スクリーンショット_2020-03-31_14_32_16.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/112032/d5e4039d-90f7-aa14-fb9f-15d84eabd315.png">

### ❻ Device（動作確認端末登録）

動作確認を端末で行う場合は登録が必要です。（Simulatorの場合は不要です）
:warning:端末で動作確認する場合、端末は__iOS13以上__である必要があります。
登録の手順はプッシュ通知と同様ですので以下を参考に作成してください。

[プッシュ通知に必要な証明書の作り方2020 \- Qiita > 4. 端末の登録](https://qiita.com/natsumo/items/d5cc1d0be427ca3af1cb#4-%E7%AB%AF%E6%9C%AB%E3%81%AE%E7%99%BB%E9%8C%B2)
※図の④端末の登録と同じ手順


### ❼ Provisioning Profile

最後にProvisioningProfileを作成します。

* 「Profile」の「＋」をクリックします

<img width="1024" alt="スクリーンショット_2020-03-31_14_44_49.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/112032/7d289d09-06df-8323-e99c-f9498e844004.png">

* 「iOS Apple Development」を選択して、「Continue」をクリックします

<img width="1023" alt="スクリーンショット_2020-03-31_14_45_14.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/112032/23feb8bb-79d9-a182-bd49-4e707c705814.png">

* ❸で作成したApp IDを選択して、「Continue」をクリックします

<img width="1024" alt="スクリーンショット_2020-03-31_14_45_28.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/112032/3f3fa0ff-e952-ca76-551b-091e9136e88a.png">

* ❷で作成した証明書を選択して、「Continue」をクリックします

<img width="964" alt="スクリーンショット_2020-03-31_14_48_37.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/112032/0030706c-c7ee-648d-95d4-51b1430eb1d5.png">

* 次に❼で登録した端末を選択して、「Continue」をクリックします
  * 複数ある場合は全て選択すると楽です

<img width="949" alt="スクリーンショット_2020-03-31_14_48_55.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/112032/87f1bed8-d094-6fc4-055f-2bf76ae39b2e.png">

* 「Provisioning Profile　Name」を記入します
  * 例 `AppleTestApp Provisioning Profile`
* その他、選択した内容に間違いがないか確認したら「Generate」をクリックします

<img width="945" alt="スクリーンショット_2020-03-31_14_49_46.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/112032/8a402e58-b37f-4f76-561b-0ad3a84331d1.png">

* 「Download」をクリックして「Provisioning Profile」を書き出します
* ダウンロードされた「Provisioning Profile」は他の証明書類と一緒に保管しておきましょう

<img width="964" alt="スクリーンショット_2020-03-31_14_49_53.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/112032/330fad06-8453-4e85-9402-a91ba0224a3a.png">

これで必要な証明書類が全て揃いました:thumbsup:

## おわりに

結構長いですね、、、お疲れ様でした:bow:
証明書類の準備ができた方は[【Sign in with Apple】 SwiftUI×NCMBを使って実装する](https://qiita.com/natsumo/items/91fdb1d53190719e8a22)へ進んで、実装を進めましょう！

### 参考にした記事・ドキュメント

* [チュートリアル : Sign in with Appleと連携の設定 \| ニフクラ mobile backend](https://mbaas.nifcloud.com/doc/current/tutorial/signin_with_apple_id_setup.html)