Firebase Cloud Messaging (FCM)の認証情報登録

# はじめに
Push通知で利用するFirebase Cloud Messaging (FCM)の認証情報の登録について書いていきます。


# 認証情報の設定概要
FCMの認証情報を登録な必要な箇所は、以下の図の3つの赤四角で囲んだところです。それぞれを順番に説明します。

<img width="300" alt="20190605-firebase-message-credentials0.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/404406/4b3a9eff-ffa3-1cfe-2e85-ba9bfdb1e19f.png">

# iOS用APNsの設定
iOSに対するPush通知の設定です。Apple Developerでの設定とFirebaseでの設定の2つがあります。最初にApple DeveloperでAPNs認証キーを作成し、その認証キーをFirebaseに設定します。

<img width="300" alt="20190605-firebase-message-credentials2.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/404406/e57c7c61-25d2-71a8-d0a6-fac1509fb36e.png">

## Apple Developerでの設定
- [Apple Developer](https://developer.apple.com/account/)にログインし、「Certificates, Identifiers & Profiles」を選択します。

- 「keys」を選択します。以下の図のような画面になるので、「＋」を押します。

<img width="500" alt="20190605-firebase-message-credentials-apple1.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/404406/fb4670dc-26fe-ffe3-cb80-e37c73c7369b.png">

- 新しいAPNs認証キーの登録画面になりますので、キーの名前とAPNsのチェックボックスにチェックを入れ、鍵を作ります。
<img width="500" alt="20190605-firebase-message-credentials-apple2.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/404406/e902cf28-a78d-113d-5ac7-4ea783f8b0aa.png">

- 鍵は、1回だけダウンロードできるので、APNs認証キーをファイルを保存します。
<img width="500" alt="20190605-firebase-message-credentials-apple3.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/404406/4b657a1c-abc0-00ea-4e14-ba040aedfd99.png">

- APNs認証キーの「Key ID」と右上に書かれている「チームID」を記録しておきます。APNs認証キーのファイルとこの２つのIDは、Firebaseの設定で使います。

<img width="500" alt="20190605-firebase-message-credentials-apple4.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/404406/2ff44364-75a7-37ab-df6e-71fa301e4fcc.png">

## Firebaseでの設定
Apple Developerから取得したAPNs認証キーをFirebaseに登録します。手順は以下になります。図を使って説明します。

- Firebase Consoleから、歯車ボタンを押し、プロジェクトの設定を選びます。

<img width="300" alt="20190605-firebase-message-credentials-menu1.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/404406/a6e6b3fe-fe53-8e24-64e0-c5b06fd2abae.png">


- クラウドメッセージングを選択します。
<img width="500" alt="20190605-firebase-message-credentials-menu2.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/404406/ed7bd6d7-a2a7-0b37-4e89-6d8620eaac29.png">

- APNs認証キーのアップロードボタンを押します。

<img width="500" alt="20190605-firebase-message-credentials-apns1.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/404406/3ee30a65-a505-7f21-d127-6ef7cad14ad3.png">

- 参照ボタンでApple Developerで作成した、APNs認証キーをアップロードし、キーIDおよびチームIDを入力します。これで設定が終了です。

<img width="300" alt="20190605-firebase-message-credentials-apns2.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/404406/c24c1e3a-468d-184b-0f59-84f5838370dd.png">


# ブラウザ用設定
ブラウザ用のPush通知の設定です。

<img width="300" alt="20190605-firebase-message-credentials3.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/404406/1706f471-fcaa-c0a5-a1e1-40261d1ce9d8.png">

上記のios用の設定と同様にクラウドメッセージングの設定画面を開きます。
この後、ウェブ設定で、鍵ペアを生成します。
この鍵を使ってブラウザ用のPushを実現します。


<img width="500" alt="20190605-firebase-message-credentials-web.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/404406/f59e3701-24af-6d06-2c86-15df7c115ef2.png">


# Pushメッセージ送信用設定
最後にPushメッセージ送信用の設定です。これは、Pushメッセージを送信するサーバからFirebaseへの認証情報設定です。この設定法は、[「Firebase Admin SDKを使ったPush通知」](https://qiita.com/KenNagami/items/f9316b040aed0a5abc22)で書いているので、ここでは省略します。

<img width="300" alt="20190605-firebase-message-credentials1.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/404406/fada32f9-da78-e831-02d5-e52db16018d5.png">

# 参考文献
- [APNs Overview](https://developer.apple.com/library/archive/documentation/NetworkingInternet/Conceptual/RemoteNotificationsPG/APNSOverview.html)
- [Firebase Cloud Messaging](https://firebase.google.com/docs/cloud-messaging/)
- [VAPID for Web Push (RFC8292)](https://www.rfc-editor.org/rfc/rfc8292.txt)