Spent 4 hours working on OIDC verification

This commit is contained in:
Donald Zou
2025-06-28 18:13:26 +08:00
parent 66bd1da571
commit 380b9a73ab
15 changed files with 193 additions and 28 deletions

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@@ -5,8 +5,8 @@
<link rel="icon" href="/static/client/dist/img/Logo-2-128x128.png">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vite App</title>
<script type="module" crossorigin src="/static/client/dist/assets/index-C7xxuubz.js"></script>
<link rel="stylesheet" crossorigin href="/static/client/dist/assets/index-DtDMqk5z.css">
<script type="module" crossorigin src="/static/client/dist/assets/index-VLGPfnEQ.js"></script>
<link rel="stylesheet" crossorigin href="/static/client/dist/assets/index-BmGX7v2g.css">
</head>
<body>
<div id="app"></div>

View File

@@ -4,7 +4,9 @@
<meta charset="UTF-8">
<link rel="icon" href="/img/Logo-2-128x128.png">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vite App</title>
<title>WGDashboard Client</title>
<script src="https://apis.google.com/js/platform.js" async defer></script>
<meta name="google-signin-client_id" content="140556036774-66pjm1qkml0v27ru1utsoeftsv3b4hid.apps.googleusercontent.com">
</head>
<body>
<div id="app"></div>

View File

@@ -12,6 +12,7 @@
"bootstrap": "^5.3.6",
"bootstrap-icons": "^1.13.1",
"dayjs": "^1.11.13",
"oidc-client-ts": "^3.2.1",
"pinia": "^3.0.2",
"qrcode": "^1.5.4",
"uuid": "^11.1.0",
@@ -2524,6 +2525,15 @@
"graceful-fs": "^4.1.6"
}
},
"node_modules/jwt-decode": {
"version": "4.0.0",
"resolved": "https://registry.npmmirror.com/jwt-decode/-/jwt-decode-4.0.0.tgz",
"integrity": "sha512-+KJGIyHgkGuIq3IEBNftfhW/LfWhXUIY6OmyVWjliu5KH1y0fw7VQ8YndE2O4qZdMSd9SqbnC8GOcZEy0Om7sA==",
"license": "MIT",
"engines": {
"node": ">=18"
}
},
"node_modules/kolorist": {
"version": "1.8.0",
"resolved": "https://registry.npmmirror.com/kolorist/-/kolorist-1.8.0.tgz",
@@ -2670,6 +2680,18 @@
"url": "https://github.com/sponsors/sindresorhus"
}
},
"node_modules/oidc-client-ts": {
"version": "3.2.1",
"resolved": "https://registry.npmmirror.com/oidc-client-ts/-/oidc-client-ts-3.2.1.tgz",
"integrity": "sha512-hS5AJ5s/x4bXhHvNJT1v+GGvzHUwdRWqNQQbSrp10L1IRmzfRGKQ3VWN3dstJb+oF3WtAyKezwD2+dTEIyBiAA==",
"license": "Apache-2.0",
"dependencies": {
"jwt-decode": "^4.0.0"
},
"engines": {
"node": ">=18"
}
},
"node_modules/open": {
"version": "10.1.2",
"resolved": "https://registry.npmmirror.com/open/-/open-10.1.2.tgz",

View File

@@ -13,6 +13,7 @@
"bootstrap": "^5.3.6",
"bootstrap-icons": "^1.13.1",
"dayjs": "^1.11.13",
"oidc-client-ts": "^3.2.1",
"pinia": "^3.0.2",
"qrcode": "^1.5.4",
"uuid": "^11.1.0",

View File

@@ -39,6 +39,16 @@ const route = useRoute()
if (route.query.Email){
formData.Email = route.query.Email
}
const params = new URLSearchParams({
client_id: "ijDjDnBCDuA75srtsq7ksxwpZkLjxiRZVdmkWnRC",
redirect_uri: window.location.protocol + '//' + window.location.host + window.location.pathname,
response_type: 'code',
state: 'Authentik',
scope: 'openid email profile'
}).toString()
console.log(params)
</script>
<template>
@@ -47,6 +57,19 @@ if (route.query.Email){
<h1 class="display-4">Welcome back</h1>
<p class="text-muted">Sign in to access your <strong>WGDashboard Client</strong> account</p>
</div>
<div class="d-flex gap-2">
<a class="btn btn-sm btn-outline-body rounded-3"
:href="'http://178.128.231.4:9000/application/o/authorize/?' + params"
style="flex: 1 1 0px;" >
Google
</a>
<button class="btn btn-sm btn-outline-body rounded-3" style="flex: 1 1 0px;">
GitHub
</button>
<button class="btn btn-sm btn-outline-body rounded-3" style="flex: 1 1 0px;">
Facebook
</button>
</div>
<form class="mt-4 d-flex flex-column gap-3" @submit="e => signIn(e)">
<div class="form-floating">
<input type="text"

View File

@@ -7,12 +7,24 @@ import {createPinia} from "pinia";
import 'bootstrap/dist/js/bootstrap.bundle.js'
import {clientStore} from "@/stores/clientStore.js";
import {OIDCAuth} from "@/utilities/oidcAuth.js";
import {axiosPost} from "@/utilities/request.js";
const params = new URLSearchParams(window.location.search)
const state = params.get('state')
const code = params.get('code')
if (state && code){
axiosPost("/api/signin/oidc/", {
provider: state,
code: code,
redirect_uri: window.location.protocol + '//' + window.location.host + window.location.pathname
}).then(data => {
console.log(data)
})
}
const app = createApp(App)
app.use(createPinia())
app.use(router)
app.mount("#app")

View File

@@ -0,0 +1,6 @@
export const OIDCAuth = async () => {
const params = new URLSearchParams(window.location.search)
const state = params.get('state')
const code = params.get('code')
}

View File

@@ -18,6 +18,7 @@ export default defineConfig({
}
}
],
resolve: {
alias: {
'@': fileURLToPath(new URL('./src', import.meta.url))