コピペでOK！？大学に通いながらプログラミングを勉強している、貧弱エンジニアによるVue.js＋Firebase＋Stripeを使ったサブスクリプション講義（カスタムクレイム偏）

今回はFirebaseでサブスクリプションを管理する方法の第２弾を書いていこうかなと思います。

第１弾を見ていない方はこちらの記事[コピペでOK！？大学に通いながらプログラミングを勉強している、貧弱エンジニアによるVue.js＋Firebase＋Stripeを使ったサブスクリプション講義（セットアップ＆実装偏）](https://qiita.com/akki-memo/items/91f88ba9c320903ae55a)をご覧ください！

さて、今回は何をするかと言うと、ユーザーがサブスクリプションに加入しているかの判断を行っていきます。

これにはfirebaseの関数``setCustomUserClaims``を使っていきます。

これは、自分で好きなようにFirebaseにプロパティを設定できます。

サブスクリプションに加入しているかの判断は色々あると思うのですが、一番は自分でプロパティをセットしてそれで判断を行うのが良いでしょう。

とまあこんな感じでやっていきます。

また、今回はFirebaseFunctionsを使っていきます。この導入方法は説明致しませんのでご了承ください。

それでは一緒に説明を見ていきましょう！！！

#firebase-functionsとadminの設定#

``functions``ディレクトリの``index.js``を開いて、以下のように設定します。

```functions/index.js
const functions = require('firebase-functions');
const admin = require('firebase-admin');

admin.initializeApp({
    databaseURL: YOUR_DATABASE_URL
})
```

#カスタムなプロパティを与える関数の作成#

次に、``setCustomUserClaims``を使って、Firebaseに独自のプロパティ``creditAuth``をセットします。

```functions/index.js
const functions = require('firebase-functions');
const admin = require('firebase-admin');

admin.initializeApp({
    databaseURL: YOUR_DATABASE_URL
})

const modifyCreditAuth = async (uid, isCreditAuth) => {
    return await admin.auth().setCustomUserClaims(uid, {creditAuth: isCreditAuth}).then()
}
```

``uid``はFirebaseのユーザーID、``isCreditAuth``には``true``か``false``を入れていきます。

``true``だった場合、クレジットカードの登録をいている
``false``だった場合、クレジットカードの登録をしてない

とします。

#Firestoreの変更を検知#

そして、次にサブスクリプションに加入したときに発火する関数を作成していきます。

恐らく初めての方は何をしているか分からないと思うので、こちらの記事[後々めっちゃ便利になる。firebase-functionsでCloudFirestoreの変更を検知する方法！](https://qiita.com/akki-memo/items/b83ae411f00cca2e07b5)に軽く目を通すだけでも理解は深まると思うので、ぜひご覧ください。

同じように、``index.js``に書いていきます。

```functions/index.js
const functions = require('firebase-functions');
const admin = require('firebase-admin');

admin.initializeApp({
    databaseURL: YOUR_DATABASE_URL
})

const modifyCreditAuth = (uid, isCreditAuth) => {
    admin.auth().setCustomUserClaims(uid, {creditAuth: isCreditAuth}).then()
}

// 以下を追加
exports.createCreditAuth = functions.region('asia-northeast1').firestore.document('customers/{userID}/subscriptions/{stripeProductID}').onCreate((snap, context) => {
    if(snap.data().empty) {
        // データが存在しない場合終了
        return false
    }
    if(snap.data().status === 'canceled') {
        // ユーザーがクレジットの支払いを解約した場合
        return modifyCreditAuth(context.params.userID, false)
    } else {
        // statusがactiveまたはtrialのとき
        return modifyCreditAuth(context.params.userID, true)
    }
})
exports.updateCreditAuth = functions.region('asia-northeast1').firestore.document('customers/{userID}/subscriptions/{stripeProductID}').onUpdate((change, context) => {
    if(!change.after.exists) {
        // データが存在しない場合終了
        return false
    } 
    if (change.after.data().status === 'canceled') {
        // ユーザーがクレジットの支払いを解約した場合
        return modifyCreditAuth(context.params.userID, false)
    } else {
        // statusがactiveまたはtrialのとき
        return modifyCreditAuth(context.params.userID, true)
    }
})
exports.deleteCreditAuth = functions.region('asia-northeast1').firestore.document('customers/{userID}/subscriptions/{stripeProductID}').onDelete((snap, context) => {
    if(snap.data().empty) {
        // データが存在している場合は終了
        return false
    } 
    return modifyCreditAuth(context.params.userID, false)
})
```

ここで注目してほしいのが``context.params.userID``です。

これはなんの値を取得しているかと言うと、``customers/{userID}``の``{userID}``を取得しています。

これで、``modifyCreditAuth = (uid, isCreditAuth)``の``uid``にユーザーIDを送ることで、どのユーザーにプロパティを付与するかが特定できるようになります。

#トークン取得#

最後に、先ほど設定した``creditAuth``を取得していきます。

取得方法は、``getIdTokenResult``と言う関数を使っていきます。

```
     const user = firebase.auth().currentUser
      if(user) {
        user.getIdTokenResult(true).then((idTokenResult) => {
          console.log(idTokenResult.claims.creditAuth)
        })
      } else {
        //
      }
```

``idTokenResult.claims.creditAuth``で呼び出すことができます。

このようにして、ユーザーがサブスクリプションに加入しているかの判断を行うことができます。

CloudFirestoreに触れたことが無い方は、少し難しく感じるかもしれないです。

ただ、学習を進める上で必ずそういったことには直面します。

そこで大事なのは、僕が思うに「プログラミングは７割理解できればいいや」といつも思っています。

完全に理解するなんて多分、１０年以上エンジニアとして働いてる人でも無理だと思っています。

大事なのは、こういったことをコピペでもいいので実装できた時の喜びを大切にしてください！

時間がたった時に、「あのときのあれはこういう意味だったんだ」と急に理解できるようになるので、そこまで難しく考えずにやっていきましょう！！

以上、「コピペでOK！？大学に通いながらプログラミングを勉強している、貧弱エンジニアによるVue.js＋Firebase＋Stripeを使ったサブスクリプション講義（カスタムクレイム偏）」でした！

良ければ、LGTM、コメントお願いします。

また、何か間違っていることがあればご指摘頂けると幸いです。

他にも毎日初心者さん向けに記事を投稿しているので、時間があれば他の記事も見て下さい！！

Thank you for reading