Fixed a silent login callback error and reworked project structure.

This commit is contained in:
Harrison Deng 2021-07-14 01:15:04 -05:00
parent bad22090a3
commit 840b59fcba
24 changed files with 72 additions and 63 deletions

View File

@ -15,7 +15,7 @@ module.exports = {
'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off', 'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
'quotes': ['error', 'double', 'avoid-escape'], 'quotes': ['error', 'double', 'avoid-escape'],
'semi': ['error', 'always'], 'semi': ['error', 'always'],
'indent': ['error', 4], 'indent': ['error', 4, { "SwitchCase": 1 }],
'comma-dangle': ['error', 'only-multiline'], 'comma-dangle': ['error', 'only-multiline'],
'space-before-function-paren': ['error', 'never'] 'space-before-function-paren': ['error', 'never']
}, },

View File

@ -1,13 +0,0 @@
import { UserManager, WebStorageStateStore } from "oidc-client";
const userManager = new UserManager({
authority: window.location.origin,
client_id: "Props",
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();

View File

@ -1,16 +1,18 @@
<!-- Completely separate static html should improve silent login performance as we don't need to load entire SPA. --> <!-- Completely separate static html should improve silent login performance as we don't need to load entire SPA. -->
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>authentication</title> <title>authentication</title>
<script type="module" src="callback-handler.js"></script>
</head> </head>
<body> <body>
<div> <div>
Silently authenticating user. If you are seeing this page, you probably want to <a href="/">go back to the app</a>. Processing... If you're seeing this, you may want to <a href="/">go back to the app</a>.
</div> </div>
</body> </body>
</html> </html>

View File

@ -13,7 +13,7 @@
</template> </template>
<script> <script>
import { identityPaths } from "../services/authentication"; import { identityPaths } from "@/services/authentication";
import WaitCircle from "./WaitCircle.vue"; import WaitCircle from "./WaitCircle.vue";
export default { export default {
components: { components: {
@ -29,7 +29,7 @@ export default {
}, },
data() { data() {
return { return {
manageUrl: identityPaths.Manage, manageUrl: identityPaths.Manage
}; };
}, },
computed: { computed: {

View File

@ -4,8 +4,8 @@ import "./registerServiceWorker";
import router from "./router"; import router from "./router";
import store from "./store"; import store from "./store";
import "../node_modules/bootstrap-icons/font/bootstrap-icons.css"; import "@/../node_modules/bootstrap-icons/font/bootstrap-icons.css";
import "./assets/scss/main.scss"; // Main global scss file. import "@/assets/scss/main.scss"; // Main global scss file.
const app = createApp(App); const app = createApp(App);

View File

@ -1,7 +1,7 @@
import router from "../router"; import router from "../router";
import { identityPaths, identityQueryParameters, userManager } from "../services/authentication"; import { identityPaths, identityQueryParameters, userManager } from "@/services/authentication";
import { addBearerTokenInterceptor, apiHttp, removeBearerTokenInterceptor } from "../services/http"; import { addBearerTokenInterceptor, apiHttp, removeBearerTokenInterceptor } from "@/services/http";
import { get, put } from "../services/persistence"; import { get, put } from "@/services/persistence";
const identity = { const identity = {
state: () => ({ state: () => ({
@ -67,7 +67,7 @@ const identity = {
if (!context.getters.isAuthenticated) { if (!context.getters.isAuthenticated) {
try { try {
const user = await userManager.signinSilent({ const user = await userManager.signinSilent({
redirect_uri: window.location.origin + "/authentication/silent-login-callback.html" redirect_uri: window.location.origin + "/silent/login-callback"
}); });
context.commit("login", { user }); context.commit("login", { user });

View File

@ -15,7 +15,7 @@
<script> <script>
import WaitCircle from "../components/WaitCircle.vue"; import WaitCircle from "../components/WaitCircle.vue";
import { userManager } from "../services/authentication"; import { userManager } from "@/services/authentication";
export default { export default {
name: "Authentication", name: "Authentication",
@ -44,7 +44,9 @@ export default {
await userManager.signoutRedirectCallback(); await userManager.signoutRedirectCallback();
this.$store.dispatch("completeDeauthentication"); this.$store.dispatch("completeDeauthentication");
} else if (this.action === "silent-login") { } else if (this.action === "silent-login") {
this.$store.dispatch("attemptSilentAuthentication", { redirect: true }); this.$store.dispatch("attemptSilentAuthentication", {
redirect: true
});
} else { } else {
console.warn("Unknown callback: " + this.action); console.warn("Unknown callback: " + this.action);
} }

View File

@ -4,7 +4,7 @@
<img <img
id="large-logo" id="large-logo"
alt="SHAID logo" alt="SHAID logo"
src="../assets/images/logo.svg" src="@/assets/images/logo.svg"
class="img-fluid" class="img-fluid"
/> />
</div> </div>

View File

@ -0,0 +1,12 @@
const { userManager } = require("../services/authentication");
const action = window.location.pathname.split("/").pop();
switch (action) {
case "login-callback":
userManager.signinSilentCallback();
break;
default:
console.warn("Unknown silent action: " + action);
break;
}

View File

@ -1,9 +1,13 @@
module.exports = { module.exports = {
pages: { pages: {
index: { index: {
entry: "src/main.js", entry: "src/index/main.js",
template: "public/index.html", template: "public/index.html",
title: "Props" title: "Props"
},
silent: {
entry: "src/silent/main.js",
template: "public/silent.html",
} }
}, },
css: { css: {

View File

@ -2,11 +2,11 @@ using Microsoft.AspNetCore.Authentication;
using Microsoft.AspNetCore.Builder; using Microsoft.AspNetCore.Builder;
using Microsoft.AspNetCore.Hosting; using Microsoft.AspNetCore.Hosting;
using Microsoft.EntityFrameworkCore; using Microsoft.EntityFrameworkCore;
using Props.Data;
using Props.Models;
using Microsoft.Extensions.Configuration; using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection; using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Hosting; using Microsoft.Extensions.Hosting;
using Props.Data;
using Props.Models;
namespace Props namespace Props
{ {
@ -35,9 +35,11 @@ namespace Props
services.AddIdentityServer() services.AddIdentityServer()
.AddApiAuthorization<ApplicationUser, ApplicationDbContext>( .AddApiAuthorization<ApplicationUser, ApplicationDbContext>(
options => { options =>
options.Clients.AddIdentityServerSPA("Props", spa => { {
spa.WithRedirectUri("/authentication/silent-login-callback.html"); options.Clients.AddIdentityServerSPA("Props", spa =>
{
spa.WithRedirectUri("/silent/login-callback");
spa.WithRedirectUri("/authentication/login-callback"); spa.WithRedirectUri("/authentication/login-callback");
spa.WithLogoutRedirectUri("/authentication/logout-callback"); spa.WithLogoutRedirectUri("/authentication/logout-callback");
}); });