ネタです。先日こんな記事がバズっていました。 Embedded content: https://qiita.com/issei_y/items/ab641746be2704db98be この記事を読んでGitHubでSNSのプロフィールを差分管理して、それをもとにサーバーレスプログラムで情報を更新できたら面白いなーと思ったのが今回のモチベーションです。仕組みとしてはこんな感じ。 ![20180501170406](//images.ctfassets.net/2p1otbbee5vt/6lmMuBB7q0sy88SM02gs2i/28e60b593a1bf7a6defee28934325965/20180501170406.png) CircleCIでmasterブランチの変更を検知したらBotを起動し、API経由でSNSのプロフィール情報を更新します。 GCP大好きマンなのでTypeScript on Firebase Cloud Functionsなプログラムです。 # プロジェクトの立ち上げいつもどおり[Firebase console](https://console.firebase.google.com/u/0/?hl=ja)からプロジェクトを新規に作成し、CLIから `$ firebase init`を実行します。関連ツールのインストールやCLIの操作は[この辺](https://firebase.google.com/docs/cli/?hl=ja)を参照のこと。 ![20180501171639](//images.ctfassets.net/2p1otbbee5vt/4BsBN7cdRuQoGmwu82k20a/52be470668a9671e5d04bd6d78063ce7/20180501171639.jpg) # Master fileの取得今回はGitHub上にあらかじめ別のプロジェクトを作成し、そちらに `profile.json`というSNSのプロフィールを管理するMaster fileを用意しました。 Embedded content: https://github.com/andoshin11/social-profile JSONの中身はこんな感じ ```json // profile.json { "twitter": "Vue lead at merpay, Inc." } ``` このファイルをCloud Functions上で取得・パースするプログラムを実装していきます。 `functions/src/index.ts`に以下の内容を記述。 ```javascript // index.ts import * as functions from 'firebase-functions'; import fetch from 'node-fetch'; // 自分のmaster fileのurlを入れる const SOURCE = "https://github.com/andoshin11/social-profile/raw/master/profile.json"; enum Service { TWITTER = "twitter", } interface Profile { [Service.TWITTER]: string; } /** * getProfile function * * @return {Profile} Profile master data **/ const getProfile = async (): Promise => { const res = await fetch(SOURCE); const json = await res.json(); return json; } export const testFunc = functions.https.onRequest(async (req, res) => { try { const profile = await getProfile(); res.send(profile[Service.TWITTER]); } catch(e) { console.log(e) } }); ``` `$ firebase deploy`コマンドでデプロイしたら表示されるURLを叩いてレスポンスを確認します。 ![20180501173404](//images.ctfassets.net/2p1otbbee5vt/4VgFM6TT4sIKGcEoYiwUuY/ced4fc4639dfc933c657940351534281/20180501173404.jpg) Cloud FunctionsからGitHubで管理するデータを参照できるようになりました👏👏 # Twitterのプロフィールを更新する Cloud FunctionからTwitter APIを叩いてプロフィールを更新してみます。 APIを直接叩く実装はなかなか大変なので以下のnodeパッケージを利用 Embedded content: https://www.npmjs.com/package/twitter 新たに `functions/src/twitter.ts`を作成し、以下の内容を記述します。 ```javascript // twitter.ts import * as functions from 'firebase-functions' import * as Twitter from 'twitter' export default class TwitterClient { private client constructor() { this.client = new Twitter({ consumer_key: functions.config().twitter.consumer_key, consumer_secret: functions.config().twitter.consumer_secret, access_token_key: functions.config().twitter.access_token_key, access_token_secret: functions.config().twitter.access_token_secret }) } /** * updateProfile function * updates twitter profile **/ updateProfile(description: string): Promise { return this.client.post('account/update_profile', { description }) } } ``` Twitter APIの利用に必要なAPI KeyとSecretは事前に[こちら](https://apps.twitter.com/)から取得し、Firebaseの環境変数に[設定](https://firebase.google.com/docs/functions/config-env?hl=ja)しておいてください。 `index.ts`でmaster fileを取得後に以下の処理を追加 ```javascript // index.ts ... export const testFunc = functions.https.onRequest(async (req, res) => { try { const profile = await getProfile(); const client = new TwitterClient() await client.updateProfile(profile[Service.TWITTER]) res.send('success'); } catch(e) { console.log(e) } }); ``` 再度関数をデプロイし、 `curl`でエンドポイントを叩いて起動します。こちらが関数実行前のプロフィール ![20180501180031](//images.ctfassets.net/2p1otbbee5vt/5u36krA1uoCM6osa8OMu2o/559c473cd5b5dde9d22d2a416112a028/20180501180031.png) そしてこちらが関数実行後のプロフィール ![20180501180053](//images.ctfassets.net/2p1otbbee5vt/1MbA8KPozqWWUm6WWiSScy/c69b78d51991d6b611f0fc0eb6353a39/20180501180053.png) GitHubのデータがTwitterに反映されたのが確認できました！ # IAMでセキュリティ強化デフォルトの状態では誰でもCloud Functionsを起動できてしまいセキュリティ上よろしくないので、認証フローを追加していきます。 Embedded content: http://studio-andy.hatenablog.com/entry/cloud-functions-iam 手前味噌ながら先日書いた上の記事を参考にIAMを利用した認証の仕組みを実装。 `index.ts`は全体的に書き直しました。 ```javascript // index.ts import * as functions from 'firebase-functions'; import fetch from 'node-fetch'; import * as Google from 'googleapis-async'; import TwitterClient from './twitter'; const SOURCE = "https://github.com/andoshin11/social-profile/raw/master/profile.json"; enum Service { TWITTER = "twitter", } interface Profile { [Service.TWITTER]: string; } /** * getProfile function * * @return {Profile} Profile master data **/ const getProfile = async (): Promise => { const res = await fetch(SOURCE); const json = await res.json(); return json; } /** * getAccessToken function * * @param {Object} req Cloud Function request context **/ const getAccessToken = (req) => { const header = req.get('Authorization') if (header) { const match = header.match(/^Bearer\s+([^\s]+)$/); if (match) { return match[1]; } } return null; } /** * isValidUser function * * @param {Object} req Cloud Function request context. * @param {Object} res Cloud Function response context. * @return {boolean} whether the user is valid */ const isValidUser = async (req, res): Promise => { const accessToken = getAccessToken(req); if (!accessToken) return false; const auth = new Google.auth.OAuth2(); // Set credential auth.setCredentials({ access_token: accessToken }); const bucket = functions.config().bucket.pac; const permission = 'storage.buckets.get'; const options = { bucket, permissions: [permission], auth } try { const response = await Google.storage('v1').buckets.testIamPermissions(options) if (response && response['permissions'] && response['permissions'].includes(permission)) { return true; } else { return false; } } catch (e) { throw new Error(e) } } export const updateProfile = functions.https.onRequest(async (req, res) => { try { const isValid = await isValidUser(req, res) if (isValid) { const profile = await getProfile(); const client = new TwitterClient(); await client.updateProfile(profile[Service.TWITTER]); res.send('success'); } else { res.status(403).send("The req is forbidden."); } } catch(e) { console.log(e) } }); ``` 超絶コードが汚いのはご容赦ください。Cloud Bucketの名前を環境変数に設定するのをお忘れなく。この状態で普通にcurlでエンドポイントを叩くとちゃんと認証エラーで怒られるはずです。 ![20180501182009](//images.ctfassets.net/2p1otbbee5vt/3KcBwV1ClWq0UaOOAi8UwE/e913fcd2cafbc8f25d8d59973a95a555/20180501182009.png) # Circle CIの設定 master fileを更新するたびに手動でCloud Functionを起動するのは面倒なので、Circle CIに仕事を任せます。 Circle CIの設定を記述するのは前述のmaster fileを管理しているレポジトリの方です。 Embedded content: https://github.com/andoshin11/social-profile こちらののmasterブランチに変更がpushされたらCloud Functionsのエンドポイントをaccess token付きで叩けるよう、 `.circleci/config.yml`に記述します。 ```yaml version: 2 jobs: build: docker: - image: google/cloud-sdk working_directory: ~/repo steps: - checkout - run: name: Decode Client Secret command: echo "$CLIENT_SECRET" | base64 -i --decode > ./client-secret.json - run: name: Invoke Cloud Functions command: curl $FUNCTION_URL -H "Authorization:Bearer $(GOOGLE_APPLICATION_CREDENTIALS=./client-secret.json gcloud auth application-default print-access-token)" branches: only: - master ``` あらかじめ[記事](http://studio-andy.hatenablog.com/entry/cloud-functions-iam)を参考にGCPの認証情報を持ったJSONを `base64`でエンコードしてCircle CIの環境変数( `$CLIENT_SECRET`)に設定しておいてください。Cloud Functionsのエンドポイントも環境変数で管理しています。設定が完了したらmasterブランチに変更を加えて差分をpush。 ![20180501184159](//images.ctfassets.net/2p1otbbee5vt/3CXy8vkRDaUKUYqQuaMy0s/df8782323f254473330bd91df244dadc/20180501184159.png) ![20180501184213](//images.ctfassets.net/2p1otbbee5vt/720fgSqcJUQAW6iUYmwwSg/391decced4e535dcb86dc60ec40f8857/20180501184213.png) ビルドに成功👏👏 ![20180501184236](//images.ctfassets.net/2p1otbbee5vt/2Z9CDzquyc4gSuGECYK468/a06d45a49d338085ff2bcdcffa93560d/20180501184236.png) Twitterのプロフィールが自動で更新されました！！ # TODO 今後やりたいことは以下の通り - コードを綺麗にする(一番大事) - Facebook・GitHubにも対応する - cronでSNSを監視し、masterと差分があればpull request作成まぁ気が向いたらやります。レポジトリはこちらです。 Embedded content: https://github.com/andoshin11/profile-as-code # まとめ Cloud Functionsはシュッと書けるのでなれると便利です。デバッグは気合いで頑張る。TypeScript全然分からないので誰か教えてください。