From c597d65256a572c750531d72675112eb74fdf686 Mon Sep 17 00:00:00 2001 From: Harrison Deng Date: Mon, 12 Jul 2021 03:06:13 -0500 Subject: [PATCH] Added sign up button and improved logout flow. Also added proper link to profile management. --- .../public/authentication/callback-handler.js | 13 +++++ .../authentication/silent-login-callback.html | 16 ++++++ MultiShop/client/src/App.vue | 9 ++- .../client/src/components/ProfileDisplay.vue | 10 ++-- .../client/src/components/ProfileLogIn.vue | 4 +- .../client/src/components/ProfileLogOut.vue | 2 +- .../client/src/components/ProfileSignUp.vue | 21 +++++++ .../client/src/services/authentication.js | 11 +++- MultiShop/client/src/store/identity.js | 57 +++++++++++++++---- MultiShop/client/src/views/Authentication.vue | 7 ++- MultiShop/server/Startup.cs | 4 +- 11 files changed, 127 insertions(+), 27 deletions(-) create mode 100644 MultiShop/client/public/authentication/callback-handler.js create mode 100644 MultiShop/client/public/authentication/silent-login-callback.html create mode 100644 MultiShop/client/src/components/ProfileSignUp.vue diff --git a/MultiShop/client/public/authentication/callback-handler.js b/MultiShop/client/public/authentication/callback-handler.js new file mode 100644 index 0000000..6fc0d8f --- /dev/null +++ b/MultiShop/client/public/authentication/callback-handler.js @@ -0,0 +1,13 @@ +import { UserManager, WebStorageStateStore } from "oidc-client"; + +const userManager = new UserManager({ + authority: window.location.origin, + client_id: "MultiShop", + redirect_uri: window.location.origin + "/authentication/login-callback", + post_logout_redirect_uri: window.location.origin + "/authentication/logout-callback", + response_type: "code", + scope: "openid profile", + userStore: new WebStorageStateStore({ store: window.localStorage }), +}); + +userManager.signinSilentCallback(); diff --git a/MultiShop/client/public/authentication/silent-login-callback.html b/MultiShop/client/public/authentication/silent-login-callback.html new file mode 100644 index 0000000..ab400a1 --- /dev/null +++ b/MultiShop/client/public/authentication/silent-login-callback.html @@ -0,0 +1,16 @@ + + + + + + + + authentication + + + +
+ Silently authenticating user. If you are seeing this page, you probably want to go back to the app. +
+ + \ No newline at end of file diff --git a/MultiShop/client/src/App.vue b/MultiShop/client/src/App.vue index dc9de7f..1ae8c14 100644 --- a/MultiShop/client/src/App.vue +++ b/MultiShop/client/src/App.vue @@ -35,6 +35,10 @@ +
  • + + +
  • @@ -57,14 +61,17 @@ import "./assets/scss/main.scss"; import ProfileDisplay from "./components/ProfileDisplay.vue"; import ProfileLogIn from "./components/ProfileLogIn.vue"; import ProfileLogOut from "./components/ProfileLogOut.vue"; +import ProfileSignUp from "./components/ProfileSignUp.vue"; export default { components: { ProfileDisplay, ProfileLogIn, + ProfileSignUp, ProfileLogOut }, mounted() { - this.$store.dispatch("attemptSilentAuthentication"); + this.$store.dispatch("updatePublicApiSettings"); + this.$store.dispatch("loadUser"); } }; diff --git a/MultiShop/client/src/components/ProfileDisplay.vue b/MultiShop/client/src/components/ProfileDisplay.vue index e83bf21..aaec5ae 100644 --- a/MultiShop/client/src/components/ProfileDisplay.vue +++ b/MultiShop/client/src/components/ProfileDisplay.vue @@ -1,5 +1,5 @@ diff --git a/MultiShop/client/src/services/authentication.js b/MultiShop/client/src/services/authentication.js index 615da64..730fc07 100644 --- a/MultiShop/client/src/services/authentication.js +++ b/MultiShop/client/src/services/authentication.js @@ -10,4 +10,13 @@ const userManager = new UserManager({ userStore: new WebStorageStateStore({ store: window.localStorage }), }); -export { userManager }; +const identityPaths = { + Manage: "Identity/Account/Manage", + Register: "/Identity/Account/Register" +}; + +const identityQueryParameters = { + ReturnUrl: "returnUrl", +}; + +export { userManager, identityPaths, identityQueryParameters }; diff --git a/MultiShop/client/src/store/identity.js b/MultiShop/client/src/store/identity.js index c59d3b4..74e70cb 100644 --- a/MultiShop/client/src/store/identity.js +++ b/MultiShop/client/src/store/identity.js @@ -1,24 +1,28 @@ import router from "../router"; -import { userManager } from "../services/authentication"; -import { addBearerTokenInterceptor, removeBearerTokenInterceptor } from "../services/http"; +import { identityPaths, identityQueryParameters, userManager } from "../services/authentication"; +import { addBearerTokenInterceptor, http, removeBearerTokenInterceptor } from "../services/http"; import { get, put } from "../services/persistence"; const identity = { state: () => ({ user: null, - loading: true, + loadingLayers: 0, callbackPath: null, + registrationEnabled: false, }), getters: { isAuthenticated(state) { return state.user ? !state.user.expired : false; }, + isIdentityLoading(state) { + return state.loadingLayers > 0; + }, username(state) { return (state.user && state.user.profile.name) ? state.user.profile.name : null; }, authCallbackLocation(state) { return state.callbackPath ? state.callbackPath : get("callbackPath"); - } + }, }, mutations: { login(state, { user }) { @@ -31,14 +35,20 @@ const identity = { removeBearerTokenInterceptor(); }, beginAuthenticating(state) { - state.loading = true; + state.loading += 1; }, endAuthenticating(state) { - state.loading = false; + state.loading -= 1; }, authCallbackLocation(state) { state.callbackPath = window.location.pathname; put("callbackPath", state.callbackPath); + }, + enableIdentificationRegistration(state) { + state.registrationEnabled = true; + }, + disableIdentificationRegistration(state) { + state.registrationEnabled = false; } }, actions: { @@ -50,20 +60,24 @@ const identity = { } context.commit("endAuthenticating"); }, - async attemptSilentAuthentication(context) { + async attemptSilentAuthentication(context, options) { if (context.getters.isAuthenticated) return; context.commit("beginAuthenticating"); context.dispatch("loadUser"); if (!context.getters.isAuthenticated) { try { const user = await userManager.signinSilent({ - redirect_uri: window.location.origin + "/authentication/silent-login-callback" + redirect_uri: window.location.origin + "/authentication/silent-login-callback.html" }); context.commit("login", { user }); } catch { } context.commit("endAuthenticating"); } + + if (options && options.redirect) { + router.replace(context.getters.authCallbackLocation); + } }, async beginAuthentication(context) { if (context.getters.isAuthenticated) return; @@ -78,20 +92,39 @@ const identity = { if (!context.getters.isAuthenticated) return; context.commit("beginAuthenticating"); context.commit("authCallbackLocation"); - await userManager.removeUser(); userManager.signoutRedirect(); }, async completeAuthentication(context, { user }) { if (!user) return; context.commit("login", { user }); - router.push(context.getters.authCallbackLocation); context.commit("endAuthenticating"); + router.replace(context.getters.authCallbackLocation); }, async completeDeauthentication(context) { - if (!context.getters.isAuthenticated) return; context.commit("logout"); - router.push(context.getters.authCallbackLocation); + try { + await userManager.removeUser(); + } catch (error) { + console.error(error); + } context.commit("endAuthenticating"); + router.replace(context.getters.authCallbackLocation); + }, + beginRegistration(context) { + context.commit("authCallbackLocation"); + window.location.replace(window.location.origin + identityPaths.Register + "?" + identityQueryParameters.ReturnUrl + "=" + "/authentication/silent-login"); + }, + async updatePublicApiSettings(context) { + try { + const settings = (await http.get("PublicApiSettings")).data; + if (settings.RegistrationEnabled === "True") { + context.commit("enableIdentificationRegistration"); + } else { + context.commit("disableIdentificationRegistration"); + } + } catch (error) { + console.error(error); + } } }, }; diff --git a/MultiShop/client/src/views/Authentication.vue b/MultiShop/client/src/views/Authentication.vue index 739cd73..0f00177 100644 --- a/MultiShop/client/src/views/Authentication.vue +++ b/MultiShop/client/src/views/Authentication.vue @@ -14,7 +14,7 @@