From 119325db7189b811c18fb7e205cdf48d74bd7f2b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Niko=20Gran=C3=B6?= Date: Mon, 24 Feb 2020 11:46:03 +0200 Subject: [PATCH] Add example to handle authentication with Microservice --- package.json | 3 + src/store/index.ts | 7 +- src/store/modules/authentication.ts | 87 +++++++++++++++++++++ yarn.lock | 115 ++++++++++++++++++++++++++-- 4 files changed, 203 insertions(+), 9 deletions(-) create mode 100644 src/store/modules/authentication.ts diff --git a/package.json b/package.json index 3cf5289..cf5a2ee 100644 --- a/package.json +++ b/package.json @@ -9,7 +9,9 @@ "lint": "vue-cli-service lint" }, "dependencies": { + "axios": "^0.19.2", "core-js": "^3.6.4", + "jsonwebtoken": "^8.5.1", "konva": "^4.0.18", "lodash.throttle": "^4.1.1", "register-service-worker": "^1.6.2", @@ -32,6 +34,7 @@ "@fortawesome/fontawesome-free": "^5.12.1", "@types/core-js": "^2.5.3", "@types/jest": "^24.0.25", + "@types/jsonwebtoken": "^8.3.7", "@types/lodash.throttle": "^4.1.6", "@types/socket.io-client": "^1.4.32", "@types/uuid": "^3.4.7", diff --git a/src/store/index.ts b/src/store/index.ts index ce6753e..eb794a2 100644 --- a/src/store/index.ts +++ b/src/store/index.ts @@ -4,6 +4,7 @@ import ToolModule from '@/store/modules/tools' import CursorModule from '@/store/modules/cursor' import SocketModule from '@/store/modules/socket' import CanvasModule from '@/store/modules/canvas' +import AuthenticationModule from '@/store/modules/authentication' Vue.use(Vuex) @@ -11,7 +12,8 @@ export enum Namespaces { TOOLS = 'tools', CURSOR = 'cursor', SOCKET = 'socket', - CANVAS = 'canvas' + CANVAS = 'canvas', + AUTH = 'authentication' } export default new Vuex.Store<{}>({ @@ -19,6 +21,7 @@ export default new Vuex.Store<{}>({ [Namespaces.TOOLS]: ToolModule, [Namespaces.CURSOR]: CursorModule, [Namespaces.SOCKET]: SocketModule, - [Namespaces.CANVAS]: CanvasModule + [Namespaces.CANVAS]: CanvasModule, + [Namespaces.AUTH]: AuthenticationModule } }) diff --git a/src/store/modules/authentication.ts b/src/store/modules/authentication.ts new file mode 100644 index 0000000..395bf0d --- /dev/null +++ b/src/store/modules/authentication.ts @@ -0,0 +1,87 @@ +import { ActionContext, Module } from 'vuex' +import axios from 'axios' +import { verify } from 'jsonwebtoken' + +// Possible regions in the JWT token. +export enum JWTRegion { + EU = 'eu', + NA = 'na', + RU = 'ru', + SA = 'sa', +} + +export interface JWT { + iss: string; // Who issued it. Example: GameTactic. + aud: string; // For what. Example: GameTactic. + jti: string; // UUID. Identifier of user. + iat: number; // JWT is not valid before this date. Unix datetime. + exp: number; // JWT is not valid after this date. Unix datetime. + username: string; // Viewable user identifier. Might not be unique. + region: JWTRegion; // Region where user is located. See enum. + // eslint-disable-next-line +} + +export interface ExtendedJWT extends JWT { + encoded: string; // Token in encoded format. +} + +export interface AuthenticationState { + jwt: ExtendedJWT | null; +} + +export enum AuthenticationActions { + AUTHENTICATE = 'authenticate', + LOGIN_WG = 'auth_wg', +} + +export enum AuthenticationMutation { + SET_AUTHENTICATION_TOKEN = 'SET_AUTHENTICATION_TOKEN' +} + +export enum AuthenticationGetters { + JWT = 'jwt', + IS_AUTH = 'authenticated' +} + +type AuthenticationActionContext = ActionContext + +const AuthenticationModule: Module = { + namespaced: true, + state () { + return { + jwt: null + } + }, + getters: { + [AuthenticationGetters.JWT]: state => state.jwt, + [AuthenticationGetters.IS_AUTH]: state => state.jwt !== null + }, + mutations: { + [AuthenticationMutation.SET_AUTHENTICATION_TOKEN] (state: AuthenticationState, payload: ExtendedJWT) { + state.jwt = payload + } + }, + actions: { + async [AuthenticationActions.AUTHENTICATE] (context: AuthenticationActionContext, token: string) { + // TODO: This is just placeholder logic. Please check it works. -Niko + + const response = await axios.get((process.env.VUE_APP_MS_AUTH as string)) + if (response.status !== 200) { + throw Error('Could not reach authentication server.') + } + + const jwt = verify(token, response.data.publicKey) as JWT + const extended: ExtendedJWT = { ...jwt, ...{ encoded: token } } + + // TODO: You probably want put this into the `state`. -Niko + // Im not sure how this should be done, so I did it as I know. + context.commit('SET_AUTHENTICATION_TOKEN', extended) + }, + async [AuthenticationActions.LOGIN_WG] (context: AuthenticationActionContext, region: string) { + // TODO: This is just placeholder logic. Please check it works. -Niko + location.replace(process.env.VUE_APP_MS_AUTH + `/connect/wargaming/${region}/${window.location.href}`) + } + } +} + +export default AuthenticationModule diff --git a/yarn.lock b/yarn.lock index 98299a7..c7b0c4e 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1086,6 +1086,13 @@ resolved "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.4.tgz#38fd73ddfd9b55abb1e1b2ed578cb55bd7b7d339" integrity sha512-8+KAKzEvSUdeo+kmqnKrqgeE+LcA0tjYWFY7RPProVYwnqDjukzO+3b6dLD56rYX5TdWejnEOLJYOIeh4CXKuA== +"@types/jsonwebtoken@^8.3.7": + version "8.3.7" + resolved "https://registry.yarnpkg.com/@types/jsonwebtoken/-/jsonwebtoken-8.3.7.tgz#ab79ad55b9435834d24cca3112f42c08eedb1a54" + integrity sha512-B5SSifLkjB0ns7VXpOOtOUlynE78/hKcY8G8pOAhkLJZinwofIBYqz555nRj2W9iDWZqFhK5R+7NZDaRmKWAoQ== + dependencies: + "@types/node" "*" + "@types/lodash.throttle@^4.1.6": version "4.1.6" resolved "https://registry.yarnpkg.com/@types/lodash.throttle/-/lodash.throttle-4.1.6.tgz#f5ba2c22244ee42ff6c2c49e614401a870c1009c" @@ -2038,6 +2045,13 @@ aws4@^1.8.0: resolved "https://registry.yarnpkg.com/aws4/-/aws4-1.9.1.tgz#7e33d8f7d449b3f673cd72deb9abdc552dbe528e" integrity sha512-wMHVg2EOHaMRxbzgFJ9gtjOOCrI80OHLG14rxi28XwOW8ux6IiEbRCGGGqCtdAIg4FQCbW20k9RsT4y3gJlFug== +axios@^0.19.2: + version "0.19.2" + resolved "https://registry.yarnpkg.com/axios/-/axios-0.19.2.tgz#3ea36c5d8818d0d5f8a8a97a6d36b86cdc00cb27" + integrity sha512-fjgm5MvRHLhx+osE2xoekY70AhARk3a6hkN+3Io1jc00jtquGvxYlKlsFUhmUET0V5te6CcZI7lcv2Ym61mjHA== + dependencies: + follow-redirects "1.5.10" + babel-code-frame@^6.22.0, babel-code-frame@^6.26.0: version "6.26.0" resolved "https://registry.yarnpkg.com/babel-code-frame/-/babel-code-frame-6.26.0.tgz#63fd43f7dc1e3bb7ce35947db8fe369a3f58c74b" @@ -2475,6 +2489,11 @@ bser@2.1.1: dependencies: node-int64 "^0.4.0" +buffer-equal-constant-time@1.0.1: + version "1.0.1" + resolved "https://registry.yarnpkg.com/buffer-equal-constant-time/-/buffer-equal-constant-time-1.0.1.tgz#f8e71132f7ffe6e01a5c9697a4c6f3e48d5cc819" + integrity sha1-+OcRMvf/5uAaXJaXpMbz5I1cyBk= + buffer-from@1.x, buffer-from@^1.0.0: version "1.1.1" resolved "https://registry.yarnpkg.com/buffer-from/-/buffer-from-1.1.1.tgz#32713bc028f75c02fdb710d7c7bcec1f2c6070ef" @@ -3533,6 +3552,13 @@ debug@2.6.9, debug@^2.2.0, debug@^2.3.3, debug@^2.6.8, debug@^2.6.9: dependencies: ms "2.0.0" +debug@=3.1.0, debug@~3.1.0: + version "3.1.0" + resolved "https://registry.yarnpkg.com/debug/-/debug-3.1.0.tgz#5bb5a0672628b64149566ba16819e61518c67261" + integrity sha512-OX8XqP7/1a9cqkxYw2yXss15f26NKWBpDXQd0/uK/KPqdQhxbPa994hnzjcE2VqQpDslf55723cKPUOGSmMY3g== + dependencies: + ms "2.0.0" + debug@^3.0.0, debug@^3.1.1, debug@^3.2.5: version "3.2.6" resolved "https://registry.yarnpkg.com/debug/-/debug-3.2.6.tgz#e83d17de16d8a7efb7717edbe5fb10135eee629b" @@ -3547,13 +3573,6 @@ debug@^4.0.1, debug@^4.1.0, debug@^4.1.1, debug@~4.1.0: dependencies: ms "^2.1.1" -debug@~3.1.0: - version "3.1.0" - resolved "https://registry.yarnpkg.com/debug/-/debug-3.1.0.tgz#5bb5a0672628b64149566ba16819e61518c67261" - integrity sha512-OX8XqP7/1a9cqkxYw2yXss15f26NKWBpDXQd0/uK/KPqdQhxbPa994hnzjcE2VqQpDslf55723cKPUOGSmMY3g== - dependencies: - ms "2.0.0" - decamelize@^1.1.1, decamelize@^1.1.2, decamelize@^1.2.0: version "1.2.0" resolved "https://registry.yarnpkg.com/decamelize/-/decamelize-1.2.0.tgz#f6534d15148269b20352e7bee26f501f9a191290" @@ -3864,6 +3883,13 @@ ecc-jsbn@~0.1.1: jsbn "~0.1.0" safer-buffer "^2.1.0" +ecdsa-sig-formatter@1.0.11: + version "1.0.11" + resolved "https://registry.yarnpkg.com/ecdsa-sig-formatter/-/ecdsa-sig-formatter-1.0.11.tgz#ae0f0fa2d85045ef14a817daa3ce9acd0489e5bf" + integrity sha512-nagl3RYrbNv6kQkeJIpt6NJZy8twLB/2vtz6yN9Z4vRKHN4/QZJIEbqohALSgwKdnksuY3k5Addp5lg8sVoVcQ== + dependencies: + safe-buffer "^5.0.1" + editorconfig@^0.15.3: version "0.15.3" resolved "https://registry.yarnpkg.com/editorconfig/-/editorconfig-0.15.3.tgz#bef84c4e75fb8dcb0ce5cee8efd51c15999befc5" @@ -4665,6 +4691,13 @@ flush-write-stream@^1.0.0: inherits "^2.0.3" readable-stream "^2.3.6" +follow-redirects@1.5.10: + version "1.5.10" + resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.5.10.tgz#7b7a9f9aea2fdff36786a94ff643ed07f4ff5e2a" + integrity sha512-0V5l4Cizzvqt5D44aTXbFZz+FtyXV1vrDN6qrelxtfYQKW0KO0W2T/hkE8xvGa/540LkZlkaUjO4ailYTFtHVQ== + dependencies: + debug "=3.1.0" + follow-redirects@^1.0.0: version "1.10.0" resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.10.0.tgz#01f5263aee921c6a54fb91667f08f4155ce169eb" @@ -6509,6 +6542,22 @@ jsonify@~0.0.0: resolved "https://registry.yarnpkg.com/jsonify/-/jsonify-0.0.0.tgz#2c74b6ee41d93ca51b7b5aaee8f503631d252a73" integrity sha1-LHS27kHZPKUbe1qu6PUDYx0lKnM= +jsonwebtoken@^8.5.1: + version "8.5.1" + resolved "https://registry.yarnpkg.com/jsonwebtoken/-/jsonwebtoken-8.5.1.tgz#00e71e0b8df54c2121a1f26137df2280673bcc0d" + integrity sha512-XjwVfRS6jTMsqYs0EsuJ4LGxXV14zQybNd4L2r0UvbVnSF9Af8x7p5MzbJ90Ioz/9TI41/hTCvznF/loiSzn8w== + dependencies: + jws "^3.2.2" + lodash.includes "^4.3.0" + lodash.isboolean "^3.0.3" + lodash.isinteger "^4.0.4" + lodash.isnumber "^3.0.3" + lodash.isplainobject "^4.0.6" + lodash.isstring "^4.0.1" + lodash.once "^4.0.0" + ms "^2.1.1" + semver "^5.6.0" + jsprim@^1.2.2: version "1.4.1" resolved "https://registry.yarnpkg.com/jsprim/-/jsprim-1.4.1.tgz#313e66bc1e5cc06e438bc1b7499c2e5c56acb6a2" @@ -6519,6 +6568,23 @@ jsprim@^1.2.2: json-schema "0.2.3" verror "1.10.0" +jwa@^1.4.1: + version "1.4.1" + resolved "https://registry.yarnpkg.com/jwa/-/jwa-1.4.1.tgz#743c32985cb9e98655530d53641b66c8645b039a" + integrity sha512-qiLX/xhEEFKUAJ6FiBMbes3w9ATzyk5W7Hvzpa/SLYdxNtng+gcurvrI7TbACjIXlsJyr05/S1oUhZrc63evQA== + dependencies: + buffer-equal-constant-time "1.0.1" + ecdsa-sig-formatter "1.0.11" + safe-buffer "^5.0.1" + +jws@^3.2.2: + version "3.2.2" + resolved "https://registry.yarnpkg.com/jws/-/jws-3.2.2.tgz#001099f3639468c9414000e99995fa52fb478304" + integrity sha512-YHlZCB6lMTllWDtSPHz/ZXTsi8S00usEV6v1tjq8tOUZzw7DpSDWVXjXDre6ed1w/pd495ODpHZYSdkRTsa0HA== + dependencies: + jwa "^1.4.1" + safe-buffer "^5.0.1" + killable@^1.0.1: version "1.0.1" resolved "https://registry.yarnpkg.com/killable/-/killable-1.0.1.tgz#4c8ce441187a061c7474fb87ca08e2a638194892" @@ -6713,6 +6779,36 @@ lodash.defaultsdeep@^4.6.1: resolved "https://registry.yarnpkg.com/lodash.defaultsdeep/-/lodash.defaultsdeep-4.6.1.tgz#512e9bd721d272d94e3d3a63653fa17516741ca6" integrity sha512-3j8wdDzYuWO3lM3Reg03MuQR957t287Rpcxp1njpEa8oDrikb+FwGdW3n+FELh/A6qib6yPit0j/pv9G/yeAqA== +lodash.includes@^4.3.0: + version "4.3.0" + resolved "https://registry.yarnpkg.com/lodash.includes/-/lodash.includes-4.3.0.tgz#60bb98a87cb923c68ca1e51325483314849f553f" + integrity sha1-YLuYqHy5I8aMoeUTJUgzFISfVT8= + +lodash.isboolean@^3.0.3: + version "3.0.3" + resolved "https://registry.yarnpkg.com/lodash.isboolean/-/lodash.isboolean-3.0.3.tgz#6c2e171db2a257cd96802fd43b01b20d5f5870f6" + integrity sha1-bC4XHbKiV82WgC/UOwGyDV9YcPY= + +lodash.isinteger@^4.0.4: + version "4.0.4" + resolved "https://registry.yarnpkg.com/lodash.isinteger/-/lodash.isinteger-4.0.4.tgz#619c0af3d03f8b04c31f5882840b77b11cd68343" + integrity sha1-YZwK89A/iwTDH1iChAt3sRzWg0M= + +lodash.isnumber@^3.0.3: + version "3.0.3" + resolved "https://registry.yarnpkg.com/lodash.isnumber/-/lodash.isnumber-3.0.3.tgz#3ce76810c5928d03352301ac287317f11c0b1ffc" + integrity sha1-POdoEMWSjQM1IwGsKHMX8RwLH/w= + +lodash.isplainobject@^4.0.6: + version "4.0.6" + resolved "https://registry.yarnpkg.com/lodash.isplainobject/-/lodash.isplainobject-4.0.6.tgz#7c526a52d89b45c45cc690b88163be0497f550cb" + integrity sha1-fFJqUtibRcRcxpC4gWO+BJf1UMs= + +lodash.isstring@^4.0.1: + version "4.0.1" + resolved "https://registry.yarnpkg.com/lodash.isstring/-/lodash.isstring-4.0.1.tgz#d527dfb5456eca7cc9bb95d5daeaf88ba54a5451" + integrity sha1-1SfftUVuynzJu5XV2ur4i6VKVFE= + lodash.kebabcase@^4.1.1: version "4.1.1" resolved "https://registry.yarnpkg.com/lodash.kebabcase/-/lodash.kebabcase-4.1.1.tgz#8489b1cb0d29ff88195cceca448ff6d6cc295c36" @@ -6728,6 +6824,11 @@ lodash.memoize@4.x, lodash.memoize@^4.1.2: resolved "https://registry.yarnpkg.com/lodash.memoize/-/lodash.memoize-4.1.2.tgz#bcc6c49a42a2840ed997f323eada5ecd182e0bfe" integrity sha1-vMbEmkKihA7Zl/Mj6tpezRguC/4= +lodash.once@^4.0.0: + version "4.1.1" + resolved "https://registry.yarnpkg.com/lodash.once/-/lodash.once-4.1.1.tgz#0dd3971213c7c56df880977d504c88fb471a97ac" + integrity sha1-DdOXEhPHxW34gJd9UEyI+0cal6w= + lodash.sortby@^4.7.0: version "4.7.0" resolved "https://registry.yarnpkg.com/lodash.sortby/-/lodash.sortby-4.7.0.tgz#edd14c824e2cc9c1e0b0a1b42bb5210516a42438"