🐙

VueからGoogle OAuthを使用してログインする

2021/07/23に公開

僕の場合はLaravel×Vueを使っており本来であれば、Laravelの方でsocialiteというパッケージを使用してgoogle oauth認証を行うのが一般的なのですが、
諸事情でVue側でgoogle oauth認証を行いアクセストークンを使用してから、バックエンドにリクエストを送るという方法をしたかったのです。

そこで今回はvue側でgoogle認証を実装する方法をメモとして残しておきます。

1-1. Google Cloud Platformにアクセスし、プロジェクトを作成する

Google Cloud Platformにアクセスしてプロジェクトを作成してください。
ここはネット上にもたくさん情報がありつまづきポイントがないかと思うので説明しません。

1-2. Webクライアントを作成する

左側のメニューから「認証情報」をクリック
「認証情報を作成」をクリック
「OAuthクライアントID」をクリック

アプリケーションの種類は「ウェブアプリケーション」で良いと思います

名前は何でも良いです。モバイルアプリからAPIでGoogleログインする想定なのでリダイレクトURLも不要です。

承認済みJavaScript生成元と承認済みリダイレクトURLを登録する

僕の場合は承認済みJavaScript生成元に http://localhost をいれて、承認済みリダイレクトURLには http://localhost/auth/redirect をいれました。

このリダイレクトURLは後で使います。

1-3. クライアントID, クライアントシークレットをゲットする

クライアントID, クライアントシークレットが発行されるので、メモしておきます。

2. Vue側でgoogle oauth認証をするためのライブラリ使用する

vue-google-oauth2 というライブラリを使用します。

2-1. vue-google-oauth2をインストール・設定する

まずはインストールします

npm install vue-google-oauth2

設定用のjs（僕はlaravel×vueを使用しているので app.js）でインポートします。

import GAuth from 'vue-google-oauth2'

Vue.use(GAuth, {
  clientId: '******************', // 直接書かずに.envファイルを作成して「prosess.env.GOOGLE_CLIENT_ID」と呼び出すことをおすすめします
  scope: 'profile email',
  prompt: 'select_account'
});

これで設定は完了です。

2-2. google oauth認証を実装する

2-3. ボタンを用意する

まずは普通にログインボタンを自分で用意します。

↓これは僕の場合こんな感じで用意しましたという例です。

<template>
<img :src="require('../../../assets/img/btn_google_signin_light_normal_web.png').default" @click="login")</img>
</template>

2-4. ボタンクリック時にgoogle oauth認証を開始する

手順としては

認証コードを取得する
認証コードを用いてアクセストークンを取得する

という手順となります。

methods: {
    async login() {
        const googleUser = await this.$gAuth.signIn()
        const accessToken = googleUser.getAuthResponse().access_token
    }
}

これだけでgoogle oauth認証のアクセストークンが取得できます！

ドキュメントはこちらの公式ページを参照ください

終わりに

ネットに情報が少なかったのでいろいろ試行錯誤しましたが、無事にアクセストークンが取得できました。
とても簡単で良かったです。素晴らしい！

また何かあれば記事にしてシェアします。ではまた！