Vue で Google サードパーティ ログインを実装するためのサンプル コード

npm をインストール vue-google-signin-button --save

'vue-google-signin-button' から GSignInButton をインポートします。
Vue.use(GSignInButton);

<!--Google ログインには依存関係 js が必要です -->
<script src="//apis.google.com/js/api:client.js"></script>

<テンプレート>
  <g-サインインボタン
    :params="googleSignInParams"
    @success="サインイン成功"
    @error="onSignInError">
    Googleでログイン
  </g-サインインボタン>
</テンプレート>

<スクリプト>
エクスポートデフォルト{
  データ （） {
    戻る {
      /**
       * Auth2パラメータは、
       * https://developers.google.com/identity/sign-in/web/reference#gapiauth2initparams.
       * 少なくとも、有効な client_id が存在している必要があります。
       * @type {オブジェクト}
       */
      googleSignInParams: {
        クライアント ID: 'YOUR_APP_CLIENT_ID.apps.googleusercontent.com'
      }
    }
  },
  メソッド: {
    サインイン成功時（googleUser）{
      コンソールログ(googleUser)
      const プロファイル = googleUser.getBasicProfile()
      console.log(プロファイル)
    },
    onSignInError (エラー) {
      console.log('ああ、だめだ', エラー)
    }
  }
}
</スクリプト>

<スタイル>
.g-サインインボタン{
  /* ここでボタンの外観を制御します。創造的に考えましょう! */
  表示: インラインブロック;
  パディング: 4px 8px;
  境界線の半径: 3px;
  背景色: #3c82f7;
  色: #fff;
  ボックスの影: 0 3px 0 #0f69ff;
}
</スタイル>