Oauthの実装

.gitignore

@@ -29,3 +29,5 @@ mock_*
 *.png
 
 # End of https://www.gitignore.io/api/go
+
+.idea

client/src/router/index.js

@@ -10,7 +10,7 @@ import Results from '@/pages/Results'
 import ResponseDetails from '@/pages/ResponseDetails'
 import NotFound from '@/pages/NotFound'
 import Blank from '@/pages/Blank'
-import { sendTokenRequest, sendCodeRequest } from '../bin/traqAuth'
+import { getRequest2Callback, redirect2AuthEndpoint } from '@/util/api.js'
 
 Vue.use(Router)
 
@@ -57,10 +57,7 @@ const router = new Router({
     {
       path: '/questionnaires/:id/edit',
       name: 'QuestionnaireDetailsEdit',
-      component: QuestionnaireDetails,
-      meta: {
-        requiresTraqAuth: true
-      }
+      component: QuestionnaireDetails
     },
     {
       path: '/results/:id',
@@ -89,32 +86,12 @@ const router = new Router({
       name: 'Callback',
       component: Blank,
       beforeEnter: async (to, _, next) => {
-        const clearSessionStorage = () => {
-          sessionStorage.removeItem('nextRoute')
-          sessionStorage.removeItem('previousRoute')
-          sessionStorage.removeItem(`traq-auth-code-verifier-${state}`)
-        }
-
-        const code = to.query.code
-        const state = to.query.state
-        const codeVerifier = sessionStorage.getItem(
-          `traq-auth-code-verifier-${state}`
-        )
-        if (!code || !codeVerifier) {
-          let previousRoute = sessionStorage.getItem('previousRoute')
-          if (!previousRoute) previousRoute = '/targeted'
-          clearSessionStorage()
-          next(previousRoute)
-          return
+        await getRequest2Callback(to)
+        const destination = sessionStorage.getItem('destination')
+        if (destination) {
+          next(destination)
         }
-
-        const res = await sendTokenRequest(code, codeVerifier)
-        store.commit('traq/setAccessToken', res.data.access_token)
-
-        let nextRoute = sessionStorage.getItem('nextRoute')
-        if (!nextRoute) nextRoute = '/targeted'
-        clearSessionStorage()
-        next(nextRoute)
+        next()
       }
     }
   ],
@@ -129,41 +106,20 @@ const router = new Router({
 })
 
 router.beforeEach(async (to, from, next) => {
+  console.log(to.name)
+  if (to.name === 'Callback') {
+    next()
+    return
+  }
   // traQにログイン済みかどうか調べる
   if (!store.state.me) {
     await store.dispatch('whoAmI')
   }
 
   if (!store.state.me) {
     // 未ログインの場合、traQのログインページに飛ばす
-    const traQLoginURL = 'https://q.trap.jp/login?redirect=' + location.href
-    location.href = traQLoginURL
-  }
-
-  if (to.meta.requiresTraqAuth) {
-    await store.dispatch('traq/ensureToken')
-    if (!store.state.traq.accessToken) {
-      const message =
-        'アンケートの編集・作成にはtraQアカウントへのアクセスが必要です。OKを押すとtraQに飛びます。'
-      if (window.confirm(message)) {
-        sessionStorage.setItem('nextRoute', to.path) // traQでのトークン取得後に飛ばすルート
-        sessionStorage.setItem('previousRoute', from.path) // traQでのトークン取得失敗時に飛ばすルート
-        await sendCodeRequest()
-
-        // traQのconsentページに飛ぶ前にnextが表示されることを防ぐ
-        next(false)
-        return
-      } else {
-        // キャンセルを押された場合は元のルートに戻る
-        if (from.path !== to.path) {
-          next(from.path)
-        } else {
-          // url直打ちなどでアクセスされた場合
-          next('/targeted')
-        }
-        return
-      }
-    }
+    sessionStorage.setItem(`destination`, to.fullPath)
+    await redirect2AuthEndpoint()
   }
 
   next()

client/src/util/api.js

@@ -0,0 +1,24 @@
+import axios from 'axios'
+
+export const traQBaseURL = 'https://q.trap.jp/api/v3'
+axios.defaults.baseURL =
+  process.env.NODE_ENV === 'development'
+    ? 'http://localhost:8080/api'
+    : 'https://anke-to.trap.jp/api'
+
+export async function redirect2AuthEndpoint() {
+  const data = (await axios.get('/oauth/generate/code')).data
+
+  const authorizationEndpointUrl = new URL(data)
+
+  window.location.assign(authorizationEndpointUrl.toString())
+}
+
+export async function getRequest2Callback(to) {
+  return axios.get('/oauth/callback', {
+    params: {
+      code: to.query.code,
+      state: to.query.state
+    }
+  })
+}

docker/dev/Dockerfile

@@ -10,8 +10,8 @@ RUN go mod download
 
 ENV DOCKERIZE_VERSION v0.6.1
 RUN apk add --no-cache openssl \
- && wget https://github.com/jwilder/dockerize/releases/download/$DOCKERIZE_VERSION/dockerize-alpine-linux-amd64-$DOCKERIZE_VERSION.tar.gz \
- && tar -C /usr/local/bin -xzvf dockerize-alpine-linux-amd64-$DOCKERIZE_VERSION.tar.gz \
- && rm dockerize-alpine-linux-amd64-$DOCKERIZE_VERSION.tar.gz
+    && wget https://github.com/jwilder/dockerize/releases/download/$DOCKERIZE_VERSION/dockerize-alpine-linux-amd64-$DOCKERIZE_VERSION.tar.gz \
+    && tar -C /usr/local/bin -xzvf dockerize-alpine-linux-amd64-$DOCKERIZE_VERSION.tar.gz \
+    && rm dockerize-alpine-linux-amd64-$DOCKERIZE_VERSION.tar.gz
 
 ENTRYPOINT dockerize -timeout 10s -wait tcp://mysql:3306  air -c docker/dev/.air.toml

docker/dev/docker-compose.yaml

@@ -14,6 +14,9 @@ services:
       MARIADB_DATABASE: anke-to
       TZ: Asia/Tokyo
       GO111MODULE: "on"
+      CLIENT_ID:
+      CLIENT_SECRET:
+      SESSION_SECRET: secret
     ports:
       - "1323:1323"
     volumes:

docs/swagger/swagger.yaml

@@ -22,6 +22,7 @@ tags:
   - name: user
   - name: group
   - name: result
+  - name: oauth
 paths:
   /questionnaires:
     get:
@@ -461,8 +462,45 @@ paths:
           description: 結果を閲覧する権限がありません。
         '500':
           description: アンケートの回答の詳細情報一覧が取得できませんでした
+  '/oauth/generate/code':
+    get:
+      operationId: getCode
+      tags:
+        - oauth
+      summary: Oauthの詳細を取得
+      description: Oauthの詳細を取得
+      responses:
+        '200':
+          description: 成功
+          content:
+            application/json:
+              schema:
+                  $ref: '#/components/schemas/OAuthCode'
+        '500':
+          description: 失敗
+  '/oauth/callback':
+    parameters:
+      - $ref: '#/components/parameters/codeInQuery'
+    get:
+      tags:
+        - oauth
+      summary: OAuthのコールバック
+      description: OAuthのコールバック
+      operationId: callback
+      responses:
+        '200':
+          description: 成功
+        '302':
+          description: 失敗時。認証ページへリダイレクト
 components:
   parameters:
+    codeInQuery:
+      name: code
+      in: query
+      required: true
+      description: OAuth2.0のcode
+      schema:
+        type: string
     answeredInQuery:
       name: answered
       in: query
@@ -539,6 +577,17 @@ components:
       schema:
         type: string
   schemas:
+    OAuthCode:
+      type: object
+      properties:
+        code_challenge:
+          type: string
+        code_challenge_method:
+          type: string
+        client_id:
+          type: string
+        response_type:
+          type: string
     AnsweredType:
       type: string
       description: アンケート検索時に回答済みかの状態での絞り込み
@@ -618,7 +667,7 @@ components:
         - administrators
     NewQuestionnaireResponse:
       allOf:
-      - $ref: '#/components/schemas/QuestionnaireUser'
+        - $ref: '#/components/schemas/QuestionnaireUser'
     Questionnaire:
       type: object
       properties:
@@ -687,20 +736,20 @@ components:
             - respondents
     QuestionnaireMyTargeted:
       allOf:
-      - $ref: '#/components/schemas/Questionnaire'
-      - type: object
-        properties:
-          responded_at:
-            type: string
-            format: date-time
-          has_response:
-            type: boolean
-            description: 回答済みあるいは下書きが存在する
-        required:
-          - responded_at
-          - has_response
+        - $ref: '#/components/schemas/Questionnaire'
+        - type: object
+          properties:
+            responded_at:
+              type: string
+              format: date-time
+            has_response:
+              type: boolean
+              description: 回答済みあるいは下書きが存在する
+          required:
+            - responded_at
+            - has_response
     QuestionnaireMyAdministrates:
-        allOf:
+      allOf:
         - $ref: '#/components/schemas/QuestionnaireUser'
         - type: object
           properties:
@@ -716,16 +765,16 @@ components:
             - respondents
     QuestionnaireUser:
       allOf:
-      - $ref: '#/components/schemas/Questionnaire'
-      - type: object
-        properties:
-          targets:
-            $ref: '#/components/schemas/Users'
-          administrators:
-            $ref: '#/components/schemas/Users'
-        required:
-          - targets
-          - administrators
+        - $ref: '#/components/schemas/Questionnaire'
+        - type: object
+          properties:
+            targets:
+              $ref: '#/components/schemas/Users'
+            administrators:
+              $ref: '#/components/schemas/Users'
+          required:
+            - targets
+            - administrators
     QuestionType:
       type: string
       example: Text
@@ -800,38 +849,38 @@ components:
         - scale_max
     NewQuestion:
       allOf:
-      - $ref: '#/components/schemas/QuestionBase'
-      - type: object
-        properties:
-          questionnaireID:
-            type: integer
-            example: 1
-        required:
-          - questionnaireID
+        - $ref: '#/components/schemas/QuestionBase'
+        - type: object
+          properties:
+            questionnaireID:
+              type: integer
+              example: 1
+          required:
+            - questionnaireID
     Question:
       allOf:
-      - $ref: '#/components/schemas/NewQuestion'
-      - type: object
-        properties:
-          questionID:
-            type: integer
-            example: 1
-        required:
-          - questionID
+        - $ref: '#/components/schemas/NewQuestion'
+        - type: object
+          properties:
+            questionID:
+              type: integer
+              example: 1
+          required:
+            - questionID
     QuestionDetails:
       allOf:
-      - $ref: '#/components/schemas/QuestionBase'
-      - type: object
-        properties:
-          questionID:
-            type: integer
-            example: 1
-          created_at:
-            type: string
-            format: date-time
-        required:
-          - questionID
-          - created_at
+        - $ref: '#/components/schemas/QuestionBase'
+        - type: object
+          properties:
+            questionID:
+              type: integer
+              example: 1
+            created_at:
+              type: string
+              format: date-time
+          required:
+            - questionID
+            - created_at
     NewResponse:
       type: object
       properties:
@@ -936,14 +985,14 @@ components:
         - question_type
     ResponseResult:
       allOf:
-      - $ref: '#/components/schemas/Response'
-      - type: object
-        properties:
-          traqID:
-            type: string
-            example: lolico
-        required:
-          - traqID
+        - $ref: '#/components/schemas/Response'
+        - type: object
+          properties:
+            traqID:
+              type: string
+              example: lolico
+          required:
+            - traqID
       required:
         - submitted_at
     Users: