0017
/
iot-ui-vue
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: 新增oauth2 页面

This commit is contained in:
xieyonghong 2023-04-10 09:41:29 +08:00
parent 0a93fe096d
commit f87bef89c3
3 changed files with 325 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/views/iframe/index.vue
View File

@ -22,11 +22,11 @@ const handle = async (appId: string, url: string) => {
if (res.status === 200) {
// console.log(res.result);
if (res.result.page.routeType === 'hash') {
menuUrl = `${url}`;
menuUrl = `/%23/${url}`;
}
if (res.result.provider === 'internal-standalone') {
//{baseUrl}/api/application/sso/{appId}/login?redirect={menuUrl}
const urlStandalone = `${res.result.page.baseUrl}/#/api/application/sso/${appId}/login?redirect=${menuUrl}&layout=false`;
const urlStandalone = `${res.result.page.baseUrl}/api/application/sso/${appId}/login?redirect=${menuUrl}?layout=false`;
iframeUrl.value = urlStandalone;
// console.log(urlStandalone);
} else if (res.result.provider === 'internal-integrated') {

305
src/views/oauth/index.vue Normal file
View File

@ -0,0 +1,305 @@
<template>
<j-spin :spinning='spinning'>
<div class='oauth'>
<div class='oauth-header'>
<div class='oauth-header-left'>
<img :src='logoImg' alt=''>
</div>
</div>
<div class='oauth-content'>
<!-- 登录 -->
<template v-if='isLogin'>
<div class='oauth-content-header'>
<img :src='headerImg' />
</div>
<div class='oauth-content-content'>
<div class='oauth-content-content-text'>
您正在授权登录,{{ appName }}将获得以下权限:
</div>
<ul>
<li>关联{{userName}}账号</li>
<li>获取您的个人信息</li>
</ul>
<div class='oauth-content-button'>
<j-button type='primary' @click='goOAuth2Fn'> 同意授权 </j-button>
<j-button type='primary' @click='changeAccount'> 切换账号 </j-button>
</div>
</div>
</template>
<template v-else>
<div class='oauth-content-header'>
<img :src='headerImg' />
</div>
<div class='oauth-content-login'>
<j-form layout='horizontal' size='large' :model='formModel' >
<j-form-item name='username'>
<j-input placeholder='用户名' v-model:value='formModel.username' />
</j-form-item>
<j-form-item name='password'>
<j-input-password placeholder='密码' v-model:value='formModel.password' />
</j-form-item>
<j-form-item name='verifyCode' v-if='captcha.base64'>
<j-input placeholder='请输入验证码' v-model:value='formModel.verifyCode' >
<template #addonAfter>
<img
:src='captcha.base64'
@click='getCode'
style='cursor: pointer'
/>
</template>
</j-input>
</j-form-item>
<j-form-item>
<j-button
type='primary'
@click='doLogin'
style='width: 100%'
>
登录
</j-button>
</j-form-item>
</j-form>
</div>
</template>
</div>
</div>
</j-spin>
</template>
<script setup lang='ts' name='Oauth'>
import { TOKEN_KEY } from '@/utils/variable'
import { config, code, getOAuth2, initApplication, authLogin } from '@/api/login'
import { getMe_api } from '@/api/home'
import { getImage } from '@/utils/comm'
const spinning = ref(true)
const isLogin = ref(false)
const logoImg = ref('')
const headerImg = ref('')
const appName = ref('-')
const userName = ref('-')
const internal = ref('false')
const params = ref()
type LoginParam = {
username: string;
password: string;
expires?: number;
verifyCode?: string;
verifyKey?: string;
};
const formModel = reactive({
username: undefined,
password: undefined,
verifyCode: undefined
})
const captcha = reactive<{base64?: string, key?: string }>({
base64: undefined,
key: undefined
})
const getApplication = async (clientId: string) => {
const res = await initApplication(clientId)
if (res.success) {
appName.value = res.result.name
}
}
const getCode = async () => {
const resp = await config()
if (resp.result?.enabled) {
const codeResp = await code()
if (codeResp.success) {
captcha.base64 = codeResp.result?.base64
captcha.key = codeResp.result?.key
}
}
}
const goOAuth2Fn = async (data?: any) => {
const res = await getOAuth2(data || params.value)
if (res.success) {
window.location.href = res.result;
} else {
getCode()
}
}
const changeAccount = () => {
localStorage.removeItem(TOKEN_KEY);
isLogin.value = false
}
const getLoginUser = async (data?: any) => {
const res = await getMe_api()
if (res.success) {
userName.value = res.result?.user.name
isLogin.value = true
getApplication(data.client_id || params.value.client_id)
if (data.internal === 'true' || internal.value === 'true') { // 是否走oauth2
goOAuth2Fn(data)
}
} else if (res.status === 401) {
isLogin.value = false
getCode()
getApplication(data.client_id || params.value.client_id)
} else {
isLogin.value = false
}
setTimeout(() => {
spinning.value = false
})
}
const getQueryVariable = (variable: any) => {
const query = window.location.search.substring(1);
const vars = query.split('&');
for (let i = 0; i < vars.length; i++) {
const pair = vars[i].split('=');
if (pair[0] === variable) {
return pair[1];
}
}
return '';
}
const doLogin = async () => {
console.log(formModel)
const res = await authLogin({
verifyKey: captcha.key,
...formModel
})
if (res.success) {
getLoginUser()
const token = res.result.token
localStorage.setItem(TOKEN_KEY, token)
goOAuth2Fn()
} else {
getCode()
}
}
const initPage = async () => {
let redirectUrl
const items = {
client_id: getQueryVariable('client_id'),
state: getQueryVariable('state'),
redirect_uri: decodeURIComponent(getQueryVariable('redirect_uri')),
response_type: getQueryVariable('response_type'),
scope: getQueryVariable('scope'),
}
const item = getQueryVariable('internal');
if (items.redirect_uri) {
const origin = items.redirect_uri.split('/').slice(0, 3)
const url = `${origin.join('/')}${items.redirect_uri?.split('redirect=')[1]}`
// redirectUrl = `${items.redirect_uri?.split('redirect_uri=')[0]}?redirect=${url}`
redirectUrl = url
console.log(origin, items.redirect_uri)
}
getLoginUser({
...items,
internal: getQueryVariable('internal'),
redirect_uri: redirectUrl,
})
internal.value = item
params.value = {
...items,
redirect_uri: redirectUrl,
}
}
document.title = 'OAuth授权-jetlinks';
headerImg.value = getImage('/logo.png')
getCode()
initPage()
</script>
<style scoped lang='less'>
.oauth {
.oauth-header {
display: flex;
align-items: center;
justify-content: space-between;
height: 60px;
font-size: 26px;
background-color: #fff;
.oauth-header-left {
margin-left: 10%;
}
.oauth-header-right {
display: flex;
width: 200px;
margin-right: 10%;
font-size: 14px;
.oauth-header-right-text {
color: rgb(0 0 0 / 70%);
}
// .oauth-header-right-connect {
// padding: 0 10px;
// }
}
}
.oauth-content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-evenly;
width: 370px;
height: 380px;
margin: 0 auto;
margin-top: 5%;
background: #fff;
box-shadow: 0 5px 5px #d4d4d4;
.oauth-content-header {
width: 60px;
height: 60px;
img {
width: 100%;
height: 100%;
}
}
.oauth-content-content {
height: 150px;
.oauth-content-content-text {
margin: 15px 15px;
font-size: 16px;
line-height: 22px;
}
ul {
color: #00000085;
list-style: inherit;
li {
padding-top: 10px;
}
}
}
.oauth-content-button {
display: flex;
justify-content: center;
width: 100%;
gap: 24px;
}
.oauth-content-login {
max-width: 300px;
}
}
}
</style>

20
yarn.lock
View File

@ -1233,6 +1233,14 @@
resolved "https://registry.npmmirror.com/@vueuse/metadata/-/metadata-9.12.0.tgz"
integrity sha512-9oJ9MM9lFLlmvxXUqsR1wLt1uF7EVbP5iYaHJYqk+G2PbMjY6EXvZeTjbdO89HgoF5cI6z49o2zT/jD9SVoNpQ==
"@vueuse/router@^9.13.0":
version "9.13.0"
resolved "http://47.108.170.157:9013/@vueuse%2frouter/-/router-9.13.0.tgz#cfc757fa89c654ab749c60bc2445f945cbb86b32"
integrity sha512-lcL6auSUGMGZMdDzZJb02QDe909AChzMXoxqFS3gL2E8mHmIx0SrNor+33UkqvvBPi18vXpDq/R7tPd9fxWwTg==
dependencies:
"@vueuse/shared" "9.13.0"
vue-demi "*"
"@vueuse/shared@7.7.1":
version "7.7.1"
resolved "https://registry.jetlinks.cn/@vueuse%2fshared/-/shared-7.7.1.tgz"
@ -1247,6 +1255,13 @@
dependencies:
vue-demi "*"
"@vueuse/shared@9.13.0":
version "9.13.0"
resolved "http://47.108.170.157:9013/@vueuse%2fshared/-/shared-9.13.0.tgz#089ff4cc4e2e7a4015e57a8f32e4b39d096353b9"
integrity sha512-UrnhU+Cnufu4S6JLCPZnkWh0WwZGUp72ktOF2DFptMlOs3TOdVv8xJN53zhHGARmVOsz5KqOls09+J1NR6sBKw==
dependencies:
vue-demi "*"
JSONStream@^1.0.4:
version "1.3.5"
resolved "https://registry.npmmirror.com/JSONStream/-/JSONStream-1.3.5.tgz"
@ -3700,10 +3715,11 @@ jetlinks-store@^0.0.3:
jetlinks-ui-components@^1.0.5:
version "1.0.5"
resolved "http://47.108.170.157:9013/jetlinks-ui-components/-/jetlinks-ui-components-1.0.5.tgz#bcf2ccab91dd64355bbe6528501d37f85f503161"
integrity sha512-yUN47hmOjDryn2CBrAL7IRMdyJsuKn7wG+OwLD9Jpii/8obUfIYT2nKoxihUzWjIrBmhP1WmD94C0AwaCN1hxw==
resolved "http://47.108.170.157:9013/jetlinks-ui-components/-/jetlinks-ui-components-1.0.5.tgz#dd86644756d6044c4842193ea72335688cfa77d5"
integrity sha512-NFjJRwFuluUEAuFguyLYidgFy3tDuh1lKg10uBR//zFxmIzRaGPNN1r9nt/hp3BIGdQLJHUKgDJXQX6fZmfARg==
dependencies:
"@vueuse/core" "^9.12.0"
"@vueuse/router" "^9.13.0"
ant-design-vue "^3.2.15"
colorpicker-v3 "^2.10.2"
lodash-es "^4.17.21"