[WIP]プロラボアカウントでログイン

.env.development

@@ -0,0 +1,4 @@
+TOSHOKAN_BASE_URL=https://toshokan.dev.prolab.club/api
+OAUTH2_BASE_URL=https://oauth.dev.kurume-nct.com
+OAUTH2_CALLBACK_URL=http://127.0.0.1:9090/callback
+PROLAB_ACCOUNTS_CLIENT_ID=

components/Navigation.vue

@@ -0,0 +1,21 @@
+<template>
+  <nav class="nav">
+    <button class="button" @click="onClickLogin">
+      プロラボアカウントでログイン
+    </button>
+  </nav>
+</template>
+
+<script>
+export default {
+  methods: {
+    onClickLogin() {
+      this.$auth.loginWith('prolab');
+    },
+  },
+};
+</script>
+
+<style>
+
+</style>

layouts/default.vue

@@ -1,9 +1,20 @@
 <template>
   <div>
+    <navigation />
     <nuxt />
   </div>
 </template>
 
+<script>
+import Navigation from '~/components/Navigation.vue';
+
+export default {
+  components: {
+    Navigation,
+  },
+};
+</script>
+
 <style>
 html {
   font-family: 'Source Sans Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI',

nuxt.config.js

@@ -1,3 +1,6 @@
+const filename = `.env.${process.env.NODE_ENV || 'local'}`;
+// eslint-disable-next-line import/no-extraneous-dependencies
+require('dotenv').config({ path: filename });
 
 export default {
   mode: 'universal',
@@ -28,29 +31,26 @@ export default {
   ** Plugins to load before mounting the App
   */
   plugins: [
+    '~/plugins/toshokan-api-client.js',
   ],
   /*
   ** Nuxt.js dev-modules
   */
   buildModules: [
     // Doc: https://github.com/nuxt-community/eslint-module
     '@nuxtjs/eslint-module',
+    ['@nuxtjs/dotenv', { filename }],
   ],
   /*
   ** Nuxt.js modules
   */
   modules: [
     // Doc: https://axios.nuxtjs.org/usage
-    '@nuxtjs/axios',
     '@nuxtjs/bulma',
+    '@nuxtjs/axios',
+    '@nuxtjs/auth',
   ],
   /*
-  ** Axios module configuration
-  ** See https://axios.nuxtjs.org/options
-  */
-  axios: {
-  },
-  /*
   ** Build configuration
   */
   build: {
@@ -79,4 +79,22 @@ export default {
       }
     },
   },
+  auth: {
+    strategies: {
+      prolab: {
+        _scheme: 'oauth2',
+        authorization_endpoint: `${process.env.OAUTH2_BASE_URL}/oauth2/auth`,
+        access_token_endpoint: `${process.env.OAUTH2_BASE_URL}/oauth2/token`,
+        userinfo_endpoint: false,
+        scope: ['openid', 'profile.read'],
+        access_type: 'offline',
+        response_type: 'code',
+        grant_type: 'authorization_code',
+        token_type: 'Bearer',
+        client_id: process.env.PROLAB_ACCOUNTS_CLIENT_ID,
+        token_key: 'access_token',
+        redirect_uri: process.env.OAUTH2_CALLBACK_URL,
+      },
+    },
+  },
 };

package.json

@@ -13,12 +13,15 @@
     "lint-fix": "eslint --fix --ext .js,.vue --ignore-path .gitignore ."
   },
   "dependencies": {
-    "@nuxtjs/axios": "^5.3.6",
+    "@nuxtjs/auth": "^4.8.4",
+    "@nuxtjs/axios": "^5.8.0",
     "@nuxtjs/bulma": "^1.2.4",
+    "axios": "^0.19.0",
     "jsqr": "^1.2.0",
     "nuxt": "^2.10.2"
   },
   "devDependencies": {
+    "@nuxtjs/dotenv": "^1.4.1",
     "@nuxtjs/eslint-config": "^1.0.1",
     "@nuxtjs/eslint-module": "^1.0.0",
     "babel-eslint": "^10.0.1",

plugins/toshokan-api-client.js

@@ -0,0 +1,7 @@
+import axios from 'axios';
+
+export default (_, inject) => {
+  inject('toshokanClient', axios.create({
+    baseURL: process.env.TOSHOKAN_BASE_URL,
+  }));
+};