From 4c028bfcb3f64748b310645eadadb6163b7b00e8 Mon Sep 17 00:00:00 2001 From: Gregoire Parant Date: Mon, 8 Nov 2021 19:27:01 +0100 Subject: [PATCH 1/7] OpenId from Admin connect - Create admin environment for redirect uri of openID - Add log out redirect when user click on log out button Signed-off-by: Gregoire Parant --- pusher/src/Enum/EnvironmentVariable.ts | 1 + pusher/src/Services/AdminApi.ts | 4 ++++ pusher/src/Services/OpenIDClient.ts | 33 +++++++++++++------------- 3 files changed, 21 insertions(+), 17 deletions(-) diff --git a/pusher/src/Enum/EnvironmentVariable.ts b/pusher/src/Enum/EnvironmentVariable.ts index ab1ce110..22c4db4f 100644 --- a/pusher/src/Enum/EnvironmentVariable.ts +++ b/pusher/src/Enum/EnvironmentVariable.ts @@ -15,6 +15,7 @@ export const FRONT_URL = process.env.FRONT_URL || "http://localhost"; export const OPID_CLIENT_ID = process.env.OPID_CLIENT_ID || ""; export const OPID_CLIENT_SECRET = process.env.OPID_CLIENT_SECRET || ""; export const OPID_CLIENT_ISSUER = process.env.OPID_CLIENT_ISSUER || ""; +export const OPID_CLIENT_REDIREC_URL = process.env.OPID_CLIENT_REDIREC_URL || FRONT_URL + "/jwt"; export { SECRET_KEY, diff --git a/pusher/src/Services/AdminApi.ts b/pusher/src/Services/AdminApi.ts index e53d00ae..d002ff8b 100644 --- a/pusher/src/Services/AdminApi.ts +++ b/pusher/src/Services/AdminApi.ts @@ -150,6 +150,10 @@ class AdminApi { return ADMIN_URL + `/profile?token=${accessToken}`; } + + async logoutOauth(token: string) { + await Axios.get(ADMIN_API_URL + `/oauth/logout?token=${token}`); + } } export const adminApi = new AdminApi(); diff --git a/pusher/src/Services/OpenIDClient.ts b/pusher/src/Services/OpenIDClient.ts index c9137ad5..1a475224 100644 --- a/pusher/src/Services/OpenIDClient.ts +++ b/pusher/src/Services/OpenIDClient.ts @@ -1,7 +1,10 @@ import { Issuer, Client, IntrospectionResponse } from "openid-client"; -import { OPID_CLIENT_ID, OPID_CLIENT_SECRET, OPID_CLIENT_ISSUER, FRONT_URL } from "../Enum/EnvironmentVariable"; - -const opidRedirectUri = FRONT_URL + "/jwt"; +import { + OPID_CLIENT_ID, + OPID_CLIENT_SECRET, + OPID_CLIENT_ISSUER, + OPID_CLIENT_REDIREC_URL, +} from "../Enum/EnvironmentVariable"; class OpenIDClient { private issuerPromise: Promise | null = null; @@ -12,7 +15,7 @@ class OpenIDClient { return new issuer.Client({ client_id: OPID_CLIENT_ID, client_secret: OPID_CLIENT_SECRET, - redirect_uris: [opidRedirectUri], + redirect_uris: [OPID_CLIENT_REDIREC_URL], response_types: ["code"], }); }); @@ -20,30 +23,26 @@ class OpenIDClient { return this.issuerPromise; } - public authorizationUrl(state: string, nonce: string, playUri?: string, redirect?: string) { + public authorizationUrl(playUri?: string, redirect?: string) { return this.initClient().then((client) => { return client.authorizationUrl({ scope: "openid email", prompt: "login", - state: state, - nonce: nonce, playUri: playUri, redirect: redirect, }); }); } - public getUserInfo(code: string, nonce: string): Promise<{ email: string; sub: string; access_token: string }> { + public getUserInfo(accessToken: string): Promise<{ email: string; sub: string; access_token: string }> { return this.initClient().then((client) => { - return client.callback(opidRedirectUri, { code }, { nonce }).then((tokenSet) => { - return client.userinfo(tokenSet).then((res) => { - return { - ...res, - email: res.email as string, - sub: res.sub, - access_token: tokenSet.access_token as string, - }; - }); + return client.userinfo(accessToken).then((res) => { + return { + ...res, + email: res.email as string, + sub: res.sub, + access_token: accessToken as string, + }; }); }); } From 89baafba2fb69f8252d49958f1a9c455a5251047 Mon Sep 17 00:00:00 2001 From: Gregoire Parant Date: Tue, 9 Nov 2021 00:08:01 +0100 Subject: [PATCH 2/7] Rollback openid connect to use code and nonce Signed-off-by: Gregoire Parant --- front/src/Connexion/LocalUserStore.ts | 4 ++++ pusher/src/Services/OpenIDClient.ts | 22 +++++++++++++--------- 2 files changed, 17 insertions(+), 9 deletions(-) diff --git a/front/src/Connexion/LocalUserStore.ts b/front/src/Connexion/LocalUserStore.ts index 6c20aadb..a113291d 100644 --- a/front/src/Connexion/LocalUserStore.ts +++ b/front/src/Connexion/LocalUserStore.ts @@ -165,6 +165,10 @@ class LocalUserStore { verifyState(value: string): boolean { const oldValue = localStorage.getItem(state); + if (!oldValue) { + localStorage.setItem(state, value); + return true; + } return oldValue === value; } getState(): string | null { diff --git a/pusher/src/Services/OpenIDClient.ts b/pusher/src/Services/OpenIDClient.ts index 1a475224..bc0dd6c9 100644 --- a/pusher/src/Services/OpenIDClient.ts +++ b/pusher/src/Services/OpenIDClient.ts @@ -23,26 +23,30 @@ class OpenIDClient { return this.issuerPromise; } - public authorizationUrl(playUri?: string, redirect?: string) { + public authorizationUrl(state: string, nonce: string, playUri?: string, redirect?: string) { return this.initClient().then((client) => { return client.authorizationUrl({ scope: "openid email", prompt: "login", + state: state, + nonce: nonce, playUri: playUri, redirect: redirect, }); }); } - public getUserInfo(accessToken: string): Promise<{ email: string; sub: string; access_token: string }> { + public getUserInfo(code: string, nonce: string): Promise<{ email: string; sub: string; access_token: string }> { return this.initClient().then((client) => { - return client.userinfo(accessToken).then((res) => { - return { - ...res, - email: res.email as string, - sub: res.sub, - access_token: accessToken as string, - }; + return client.callback(OPID_CLIENT_REDIREC_URL, { code }, { nonce }).then((tokenSet) => { + return client.userinfo(tokenSet).then((res) => { + return { + ...res, + email: res.email as string, + sub: res.sub, + access_token: tokenSet.access_token as string, + }; + }); }); }); } From 7406b620939af5d508144722437ef1965cc26bd4 Mon Sep 17 00:00:00 2001 From: Gregoire Parant Date: Tue, 9 Nov 2021 00:38:32 +0100 Subject: [PATCH 3/7] Add jwt token if is defined un URL Signed-off-by: Gregoire Parant --- front/src/Connexion/ConnectionManager.ts | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/front/src/Connexion/ConnectionManager.ts b/front/src/Connexion/ConnectionManager.ts index b346f450..032a60f1 100644 --- a/front/src/Connexion/ConnectionManager.ts +++ b/front/src/Connexion/ConnectionManager.ts @@ -87,6 +87,8 @@ class ConnectionManager { urlManager.pushRoomIdToUrl(this._currentRoom); } else if (connexionType === GameConnexionTypes.jwt) { const urlParams = new URLSearchParams(window.location.search); + + //TODO if jwt is defined, state and nonce can to be deleted const code = urlParams.get("code"); const state = urlParams.get("state"); if (!state || !localUserStore.verifyState(state)) { @@ -96,6 +98,12 @@ class ConnectionManager { throw "No Auth code provided"; } localUserStore.setCode(code); + + const jwt = urlParams.get("jwt"); + if (jwt) { + this.authToken = jwt; + localUserStore.setAuthToken(jwt); + } this._currentRoom = await Room.createRoom(new URL(localUserStore.getLastRoomUrl())); try { await this.checkAuthUserConnexion(); From 1db22d82af53cbfe241319a956e64435443cef54 Mon Sep 17 00:00:00 2001 From: Gregoire Parant Date: Wed, 10 Nov 2021 18:26:50 +0100 Subject: [PATCH 4/7] Set state in local storage when openid provider redirect on jwt with token value Signed-off-by: Gregoire Parant --- front/src/Connexion/ConnectionManager.ts | 16 ++++++++++------ front/src/Connexion/LocalUserStore.ts | 3 +++ 2 files changed, 13 insertions(+), 6 deletions(-) diff --git a/front/src/Connexion/ConnectionManager.ts b/front/src/Connexion/ConnectionManager.ts index 032a60f1..cb600d6d 100644 --- a/front/src/Connexion/ConnectionManager.ts +++ b/front/src/Connexion/ConnectionManager.ts @@ -91,6 +91,16 @@ class ConnectionManager { //TODO if jwt is defined, state and nonce can to be deleted const code = urlParams.get("code"); const state = urlParams.get("state"); + const jwt = urlParams.get("jwt"); + + if (jwt) { + this.authToken = jwt; + localUserStore.setAuthToken(jwt); + //if we use jwt we can update new state from openid provider + if (state) { + localUserStore.setState(state); + } + } if (!state || !localUserStore.verifyState(state)) { throw "Could not validate state!"; } @@ -98,12 +108,6 @@ class ConnectionManager { throw "No Auth code provided"; } localUserStore.setCode(code); - - const jwt = urlParams.get("jwt"); - if (jwt) { - this.authToken = jwt; - localUserStore.setAuthToken(jwt); - } this._currentRoom = await Room.createRoom(new URL(localUserStore.getLastRoomUrl())); try { await this.checkAuthUserConnexion(); diff --git a/front/src/Connexion/LocalUserStore.ts b/front/src/Connexion/LocalUserStore.ts index a113291d..7607fb2d 100644 --- a/front/src/Connexion/LocalUserStore.ts +++ b/front/src/Connexion/LocalUserStore.ts @@ -171,6 +171,9 @@ class LocalUserStore { } return oldValue === value; } + setState(value: string) { + localStorage.setItem(state, value); + } getState(): string | null { return localStorage.getItem(state); } From d3f120f2bb0b38db31e05e5050b6ade628e1d091 Mon Sep 17 00:00:00 2001 From: Gregoire Parant Date: Fri, 12 Nov 2021 12:13:44 +0100 Subject: [PATCH 5/7] Update to have token when user is connected - Update menu design Signed-off-by: Gregoire Parant --- .../src/Components/Menu/ContactSubMenu.svelte | 52 +++++++++++- .../Components/Menu/CreateMapSubMenu.svelte | 51 ----------- front/src/Components/Menu/GuestSubMenu.svelte | 75 ++++++++++++++++ front/src/Components/Menu/Menu.svelte | 14 +-- .../src/Components/Menu/ProfileSubMenu.svelte | 85 ++++++++++++------- front/src/Connexion/ConnectionManager.ts | 56 ++++++------ front/src/Stores/MenuStore.ts | 10 +-- 7 files changed, 220 insertions(+), 123 deletions(-) delete mode 100644 front/src/Components/Menu/CreateMapSubMenu.svelte create mode 100644 front/src/Components/Menu/GuestSubMenu.svelte diff --git a/front/src/Components/Menu/ContactSubMenu.svelte b/front/src/Components/Menu/ContactSubMenu.svelte index 61ecc56e..3cf1f5fb 100644 --- a/front/src/Components/Menu/ContactSubMenu.svelte +++ b/front/src/Components/Menu/ContactSubMenu.svelte @@ -1,10 +1,60 @@ - +
+
+
+

Getting started

+

+ WorkAdventure allows you to create an online space to communicate spontaneously with others. + And it all starts with creating your own space. Choose from a large selection of prefabricated maps by our team. +

+ +
+ +
+

Create your map

+

You can also create your own custom map by following the step of the documentation.

+ +
+ + +
+
diff --git a/front/src/Components/Menu/GuestSubMenu.svelte b/front/src/Components/Menu/GuestSubMenu.svelte new file mode 100644 index 00000000..13a7981a --- /dev/null +++ b/front/src/Components/Menu/GuestSubMenu.svelte @@ -0,0 +1,75 @@ + + +
+
+ +
+

Share the link of the room !

+ + +
+
+
+ + \ No newline at end of file diff --git a/front/src/Components/Menu/Menu.svelte b/front/src/Components/Menu/Menu.svelte index 4eecb370..83715304 100644 --- a/front/src/Components/Menu/Menu.svelte +++ b/front/src/Components/Menu/Menu.svelte @@ -2,11 +2,11 @@ import {fly} from "svelte/transition"; import SettingsSubMenu from "./SettingsSubMenu.svelte"; import ProfileSubMenu from "./ProfileSubMenu.svelte"; - import CreateMapSubMenu from "./CreateMapSubMenu.svelte"; import AboutRoomSubMenu from "./AboutRoomSubMenu.svelte"; import GlobalMessageSubMenu from "./GlobalMessagesSubMenu.svelte"; import ContactSubMenu from "./ContactSubMenu.svelte"; import CustomSubMenu from "./CustomSubMenu.svelte" + import GuestSubMenu from "./GuestSubMenu.svelte"; import { checkSubMenuToShow, customMenuIframe, @@ -19,21 +19,21 @@ import type {Unsubscriber} from "svelte/store"; import {sendMenuClickedEvent} from "../../Api/iframe/Ui/MenuItem"; - let activeSubMenu: string = SubMenusInterface.settings; - let activeComponent: typeof SettingsSubMenu | typeof CustomSubMenu = SettingsSubMenu; + let activeSubMenu: string = SubMenusInterface.profile; + let activeComponent: typeof ProfileSubMenu | typeof CustomSubMenu = ProfileSubMenu; let props: { url: string, allowApi: boolean }; let unsubscriberSubMenuStore: Unsubscriber; onMount(() => { unsubscriberSubMenuStore = subMenusStore.subscribe(() => { if(!get(subMenusStore).includes(activeSubMenu)) { - switchMenu(SubMenusInterface.settings); + switchMenu(SubMenusInterface.profile); } }) checkSubMenuToShow(); - switchMenu(SubMenusInterface.settings); + switchMenu(SubMenusInterface.profile); }) onDestroy(() => { @@ -52,8 +52,8 @@ case SubMenusInterface.profile: activeComponent = ProfileSubMenu; break; - case SubMenusInterface.createMap: - activeComponent = CreateMapSubMenu; + case SubMenusInterface.invite: + activeComponent = GuestSubMenu; break; case SubMenusInterface.aboutRoom: activeComponent = AboutRoomSubMenu; diff --git a/front/src/Components/Menu/ProfileSubMenu.svelte b/front/src/Components/Menu/ProfileSubMenu.svelte index 83ec329c..e543096e 100644 --- a/front/src/Components/Menu/ProfileSubMenu.svelte +++ b/front/src/Components/Menu/ProfileSubMenu.svelte @@ -55,54 +55,73 @@
- {#if $userIsConnected} +
- {#if PROFILE_URL != undefined} - - {/if} + + +
- +
- {:else} -
- Sign in -
- {/if} -
- - - -
-
- -
+
+ +
+ {#if $userIsConnected} +
+ {#if PROFILE_URL != undefined} + + {/if} +
+
+ +
+ {:else} +
+ Sign in +
+ {/if} +