Spent 4 hours working on OIDC verification

This commit is contained in:
Donald Zou
2025-06-28 18:13:26 +08:00
parent 6b194bba15
commit 3d75f6bbbd
15 changed files with 193 additions and 28 deletions

View File

@@ -5,7 +5,7 @@ import "animate.css"
import PeerSettingsDropdown from "@/components/configurationComponents/peerSettingsDropdown.vue";
import LocaleText from "@/components/text/localeText.vue";
import {DashboardConfigurationStore} from "@/stores/DashboardConfigurationStore.js";
import {GetLocale} from "../../utilities/locale.js";
import {GetLocale} from "@/utilities/locale.js";
export default {
name: "peer",

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))