Firebase Cloud Messagingのサンプルプログラムを動かしてみた

### やったこと
githubにあるquickstart-jsのmessagingを使用して、Firebase Cloud Messagingのpush機能を動かしてみた。

https://github.com/firebase/quickstart-js

サンプルコードを動かしてFCM登録トークンの取得と受信用Service Workerを登録。アクセストークンを取得して、curlコマンドでpush通知を行った。

### 環境
* windows 10
* node v16.14
* Ubuntu 18.04.4 LTS(WSL2)　Curlコマンドの実行のみ

### 前提
* firebaseのプロジェクトとアプリケーションは作成済みで、ウェブプッシュ証明書の鍵ペアを作成してある。 
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1284235/8fa55a8c-0c22-d3b0-6c33-90e9023eec41.png)


### 手順
#### FCM登録トークンを取得するサーバをローカル環境で動かす
gitからコードをとってくる
```bash
git clone https://github.com/firebase/quickstart-js
```

1.messagingフォルダのindex.htmlを編集。\<YOUR_PUBLIC_VAPID_KEY_HERE>に、ウェブプッシュ証明書の鍵を設定する。

```html
    // subsequent calls to getToken will return from cache.
    messaging.getToken({vapidKey: '<YOUR_PUBLIC_VAPID_KEY_HERE>'}).then((currentToken) => {
      if (currentToken) {
```
2.messagingフォルダに移動してfirebase-toolsをインストール。
```bash
npm install -g firebase-tools
```
3.firebase use --addコマンドで、プロジェクトを登録。
```
firebase use --add
? Which project do you want to add? <myproject>
? What alias do you want to use for this project? (e.g. staging) test
```
4.ローカル環境でサーバ起動
```
firebase serve -p 8081
=== Serving from 'C:\SourceCode\quickstart-js\messaging'

i  hosting[<myproject>]: Serving hosting files from: ./
+  hosting[<myproject>]: Local server: http://localhost:8081
```
5.起動後、http://localhost:8081にアクセス。初回アクセス時にService Workerがブラウザに登録されるので許可が求められる。
表示された画面からREQUEST PERMISSIONを押してトークンを取得。以下はトークン取得後の画面。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1284235/bfeeb46e-09fa-e55e-d6fa-c8d1d2bcc958.png)

#### アクセストークンの取得
1.firebaseコンソールから、プロジェクトの設定 > サービスアカウント > 

新しい秘密鍵を生成ボタンから秘密キー(Jsonファイル)をダウンロード
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1284235/6acf1345-e628-e282-c5d0-aaef12482a0b.png)

2.適当なフォルダを作成して、アクセストークン取得用のjavascriptとjsonファイルを配置。アクセストークン取得用のjavascript内で、ダウンロードしたjsonファイルを読み込むように指定。
【アクセストークン取得用のjavascript(index.jsで保存)】
```javascript
const { google ,JWT,GoogleAuth } = require('google-auth-library');

const SCOPES =  ['https://www.googleapis.com/auth/cloud-platform'];
function getAccessToken() {
  return new Promise(function(resolve, reject) {
    const key = require('./<ダウンロードしたjsonファイル>.json');
    const auth = new GoogleAuth();
    const jwtClient = new JWT(
      key.client_email,
      null,
      key.private_key,
      SCOPES,
      null
    );
    jwtClient.authorize(function(err, tokens) {
      if (err) {
        reject(err);
        return;
      }
      resolve(tokens.access_token);
    });
  });
}

async function main(){
    const token = await getAccessToken();
    console.log(token); // コンソールに出力
} 

main();
```
3.スクリプトは、google-auth-libraryを使用しているので、npmコマンドでインストール
```bash
npm i google-auth-library
```
4.nodeコマンド実行して、アクセストークンを取得する。(コンソールに表示。）
```
node index.js
ya29.c.b0Aaekm1JVAdfDRR9Kx71o7u3G3w1fmMvY-mFTDtbVref13........
```
#### curlコマンドでpush通知実施
以下の形式でCurlコマンドを使用してpush通知を実行する。HTTP v1 API に変わっているのでgithubのREADMEに記載されている形式とは異なる。
* <アクセストークン>、<FCMトークン>は上記でとってきたもの
* <プロジェクID>はFirebaseコンソールのプロジェクトの設定の全般に表示されるプロジェクトID
```bash
curl -X POST -H "Authorization: Bearer <アクセストークン>" -H "Content-Type: application/json" -d '{
  "message": {
    "token" : "<FCMトークン>",
    "notification":{
       "body": "5 to 1",
       "title": "Portugal vs. Denmark"
     }
  }
}' "https://fcm.googleapis.com/v1/projects/<プロジェクトID>/messages:send"
```
コマンド実行した結果、ブラウザで受信して表示される。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1284235/89382804-bff6-6ef5-9145-e812a425ab6e.png)