Nuxt.jsのAuth Module（@nuxtjs/auth）を使って手軽にGoogle Login機能を実装する

Nuxt.jsのAuth Moduleを使ってGoogle Loginを実装してみましたので、そちらの紹介になります。

以下のような手順で実装しました。

1. @nuxtjs/auth をインストールして設定をする
2. GCPのコンソールから本アプリの設定を作成する
3. pageを実装する

Auth Moduleのインストールと設定

% yarn add @nuxtjs/auth

client/nuxt.config.js

  modules: [
    '@nuxtjs/auth' // ここの行を追加します。
  ],
  // routerを追加
  router: {
    // See https://auth.nuxtjs.org/guide/middleware.html
    middleware: ['auth']
  },
  // authを追加
  auth: {
    redirect: {
      login: '/login',
      logout: '/login',
      callback: '/oauth2_callback',
      home: '/'
    },
    strategies: {
      app: {
        _scheme: 'oauth2',
        authorization_endpoint: 'https://accounts.google.com/o/oauth2/auth',
        userinfo_endpoint: `https://www.googleapis.com/oauth2/v3/userinfo`,
        scope: [
          'email',
          'profile',
          'openid',
          'https://www.googleapis.com/auth/drive.metadata.readonly'
        ],
        access_type: undefined,
        access_token_endpoint: undefined,
        response_type: 'token',
        token_type: 'Bearer',
        client_id: process.env.GOOGLE_CLIENT_ID, // .envで定義しておく
        token_key: 'access_token'
      }
    }
  },

GCPでアプリを作成する

1. Google Cloud Platformにログインしてプロジェクトを作成します（既存のプロジェクトでもOKです）
2. APIとサービス > ライブラリからGoogle Drive APIを有効化します
3. APIとサービス > OAuth同意画面から同意画面を作成します。
4. APIとサービス > 認証情報からアプリケーションを作成します。

こちらで、.envに定義するクライアントIDが作成されます

ログイン関連のpageを実装する

以下を実装していきます。

• pages/login.vue
• pages/oauth2_callback.vue (callbackは割愛します）

pages/login.vue

<template>
  <v-row align="center" justify="center">
    <v-col cols="12" sm="8" md="6" lg="4">
      <v-card class="elevation-12">
        <v-toolbar color="primary" flat>
          <v-toolbar-title>App Name</v-toolbar-title>
          <v-spacer />
        </v-toolbar>
        <v-card-actions>
          <v-spacer></v-spacer>
          <v-btn
            color="secondary"
            large
            class="mr-2 mb-2"
            @click.stop="authenticate"
            >Login with Google</v-btn
          >
        </v-card-actions>
      </v-card>
    </v-col>
  </v-row>
</template>

<script>
export default {
  auth: false,
  layout: 'centered',
  methods: {
    authenticate() {
      this.$auth.loginWith('app')
    }
  }
}
</script>

$auth.loginWith('app') を呼び出すと、Auth Moduleが良い感じにGoogleログインを処理してくれます。

より詳細な実装については、こちらの記事もご覧ください。

以上になります。