Vue.jsでGoogle Signinをライブラリ使わずに実装してみた。

vue-cliで生成したプロジェクトだと、サンプルコードを貼るだけでは、CDNのロードとVue.jsのサイクルがいまいち整合性が取れなかったりする。
そんな人のために、Vueにはvue-gapi - npmというライブラリがあるけど、CDNをVueのサイクルに自分で乗せてみたいと思ったので、やってみました。

どうやったんです

• vue-plugin-load-scriptを導入する。
• mountedかcreatedでCDNからスクリプトを読み込む。
  (読み込み後にDataの要素を使う場合はmounted)
• GoogleSigninに必要なgapiに初期設定を行う
• ボタンを描画する。

vue-plugin-load-scriptの導入

package.jsonのdependenciesに以下を追加

"vue-plugin-load-script": "^1.2.0"

そんで、npm install

CDNからスクリプトをロード

createdかmountedで以下を実行

// Promiseを返すので、続けてgapiの初期化を書ける
this.$loadScript('https://apis.google.com/js/platform.js').then(() => {
  // gapiはvueインスタンス上にはないので、window関数から取得する必要がある。
  window.gapi.auth2.init(/* GoogleAPIより取得/設定した apikey, clientid, scopeを設定 */).then(() => {
    window.gapi.siginin2.render(/* 第一引数にレンダリング先のID、第二引数にボタンのサイズなどのプロパティ */);
  })
})

だいたいこんな感じ。

詳しい設定などは、

Integrating Google Sign-In into your web app をみてね！