zhuchaowe/maxkb
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: chat user login

Browse Source
This commit is contained in:
wxg0103 2025-06-12 16:15:02 +08:00
parent 0a0941a49b
commit 4e203f8f95
4 changed files with 315 additions and 172 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
ui/src/api/chat-user/auth-setting.ts Normal file
View File

@ -0,0 +1,38 @@
import {Result} from '@/request/Result'
import {get, post, put} from '@/request/index'
import {type Ref} from 'vue'
const prefix = '/chat_user/auth'
/**
* 获取认证设置
*/
const getAuthSetting: (auth_type: string, loading?: Ref<boolean>) => Promise<Result<any>> = (auth_type, loading) => {
return get(`${prefix}/${auth_type}/detail`, undefined, loading)
}
/**
* ldap连接测试
*/
const postAuthSetting: (data: any, loading?: Ref<boolean>) => Promise<Result<any>> = (
data,
loading
) => {
return post(`${prefix}/connection`, data, undefined, loading)
}
/**
* 修改邮箱设置
*/
const putAuthSetting: (auth_type: string, data: any, loading?: Ref<boolean>) => Promise<Result<any>> = (
auth_type,
data,
loading
) => {
return put(`${prefix}/${auth_type}/info`, data, undefined, loading)
}
export default {
getAuthSetting,
postAuthSetting,
putAuthSetting
}

94
ui/src/api/chat-user/user-login.ts Normal file
View File

@ -0,0 +1,94 @@
import {Result} from '@/request/Result.ts'
import {get, post} from '@/request'
import type {LoginRequest} from '@/api/type/login.ts'
import type {Ref} from 'vue'
/**
* 登录
* @param request 登录接口请求表单
* @param loading 接口加载器
* @returns 认证数据
*/
const login: (accessToken: string, request: LoginRequest, loading?: Ref<boolean>) => Promise<Result<any>> = (
accessToken: string,
request,
loading,
) => {
return post('/chat_user/login/' + accessToken, request, undefined, loading)
}
const ldapLogin: (accessToken: string, request: LoginRequest, loading?: Ref<boolean>) => Promise<Result<any>> = (
accessToken: string,
request,
loading,
) => {
return post('/chat_user/ldap/login/' + accessToken, request, undefined, loading)
}
/**
* 获取验证码
* @param loading 接口加载器
*/
const getCaptcha: (loading?: Ref<boolean>) => Promise<Result<any>> = (loading) => {
return get('/user/captcha', undefined, loading)
}
/**
* 获取登录方式
*/
const getAuthType: (accessToken: string, loading?: Ref<boolean>) => Promise<Result<any>> = (accessToken, loading) => {
return get('chat_user/auth/types/' + accessToken, undefined, loading)
}
/**
* 获取二维码类型
*/
const getQrType: (loading?: Ref<boolean>) => Promise<Result<any>> = (loading) => {
return get('qr_type', undefined, loading)
}
const getQrSource: (loading?: Ref<boolean>) => Promise<Result<any>> = (loading) => {
return get('qr_type/source', undefined, loading)
}
const getDingCallback: (code: string, loading?: Ref<boolean>) => Promise<Result<any>> = (
code,
loading
) => {
return get('dingtalk', {code}, loading)
}
const getDingOauth2Callback: (code: string, loading?: Ref<boolean>) => Promise<Result<any>> = (
code,
loading
) => {
return get('dingtalk/oauth2', {code}, loading)
}
const getWecomCallback: (code: string, loading?: Ref<boolean>) => Promise<Result<any>> = (
code,
loading
) => {
return get('wecom', {code}, loading)
}
const getLarkCallback: (code: string, loading?: Ref<boolean>) => Promise<Result<any>> = (
code,
loading
) => {
return get('lark/oauth2', {code}, loading)
}
export default {
login,
getCaptcha,
getAuthType,
getDingCallback,
getQrType,
getWecomCallback,
getDingOauth2Callback,
getLarkCallback,
getQrSource,
ldapLogin
}

321
ui/src/views/chat/user-login/index.vue
View File

@ -79,7 +79,7 @@
</div> </div>
</div> </div>
<div v-if="showQrCodeTab"> <div v-if="showQrCodeTab">
<QrCodeTab :tabs="orgOptions" /> <QrCodeTab :tabs="orgOptions"/>
</div> </div>
<div class="login-gradient-divider lighter mt-24" v-if="modeList.length > 1"> <div class="login-gradient-divider lighter mt-24" v-if="modeList.length > 1">
<span>{{ $t('views.login.moreMethod') }}</span> <span>{{ $t('views.login.moreMethod') }}</span>
@ -108,7 +108,7 @@
class="login-button-circle color-secondary" class="login-button-circle color-secondary"
@click="changeMode('QR_CODE')" @click="changeMode('QR_CODE')"
> >
<img src="@/assets/scan/icon_qr_outlined.svg" width="25px" /> <img src="@/assets/scan/icon_qr_outlined.svg" width="25px"/>
</el-button> </el-button>
<el-button <el-button
v-if="item === '' && loginMode !== ''" v-if="item === '' && loginMode !== ''"
@ -125,28 +125,31 @@
</UserLoginLayout> </UserLoginLayout>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { onMounted, ref, onBeforeMount } from 'vue' import {onMounted, ref, onBeforeMount} from 'vue'
import { useRoute, useRouter } from 'vue-router' import {useRoute, useRouter} from 'vue-router'
import type { FormInstance, FormRules } from 'element-plus' import type {FormInstance, FormRules} from 'element-plus'
import type { LoginRequest } from '@/api/type/login' import type {LoginRequest} from '@/api/type/login'
import LoginContainer from '@/layout/login-layout/LoginContainer.vue' import LoginContainer from '@/layout/login-layout/LoginContainer.vue'
import UserLoginLayout from '@/layout/login-layout/UserLoginLayout.vue' import UserLoginLayout from '@/layout/login-layout/UserLoginLayout.vue'
import loginApi from '@/api/user/login' import loginApi from '@/api/chat-user/user-login.ts'
import authApi from '@/api/system-settings/auth-setting' import authApi from '@/api/chat-user/auth-setting'
import { t, getBrowserLang } from '@/locales' import {t, getBrowserLang} from '@/locales'
import useStore from '@/stores' import useStore from '@/stores'
import { useI18n } from 'vue-i18n' import {useI18n} from 'vue-i18n'
import QrCodeTab from '@/views/login/scanCompinents/QrCodeTab.vue' import QrCodeTab from '@/views/login/scanCompinents/QrCodeTab.vue'
import { MsgConfirm, MsgError } from '@/utils/message.ts' import {MsgConfirm, MsgError} from '@/utils/message.ts'
import * as dd from 'dingtalk-jsapi' // import * as dd from 'dingtalk-jsapi'
import { loadScript } from '@/utils/utils' // import {loadScript} from '@/utils/utils'
const router = useRouter() const router = useRouter()
const { login, user, theme } = useStore() const {login, user, theme} = useStore()
const { locale } = useI18n({ useScope: 'global' }) const {locale} = useI18n({useScope: 'global'})
const loading = ref<boolean>(false) const loading = ref<boolean>(false)
const route = useRoute()
const identifyCode = ref<string>('') const identifyCode = ref<string>('')
const {
params: {accessToken}
} = route as any
const loginFormRef = ref<FormInstance>() const loginFormRef = ref<FormInstance>()
const loginForm = ref<LoginRequest>({ const loginForm = ref<LoginRequest>({
username: '', username: '',
@ -183,13 +186,13 @@ const loginHandle = () => {
if (loginMode.value === 'LDAP') { if (loginMode.value === 'LDAP') {
login.asyncLdapLogin(loginForm.value, loading).then(() => { login.asyncLdapLogin(loginForm.value, loading).then(() => {
locale.value = localStorage.getItem('MaxKB-locale') || getBrowserLang() || 'en-US' locale.value = localStorage.getItem('MaxKB-locale') || getBrowserLang() || 'en-US'
router.push({ name: 'home' }) router.push({name: 'home'})
}) })
} else { } else {
login.asyncLogin(loginForm.value, loading).then(() => { login.asyncLogin(loginForm.value, loading).then(() => {
locale.value = localStorage.getItem('MaxKB-locale') || getBrowserLang() || 'en-US' locale.value = localStorage.getItem('MaxKB-locale') || getBrowserLang() || 'en-US'
localStorage.setItem('workspace_id', 'default') localStorage.setItem('workspace_id', 'default')
router.push({ name: 'home' }) router.push({name: 'home'})
}) })
} }
}) })
@ -206,7 +209,7 @@ onBeforeMount(() => {
}) })
const modeList = ref<string[]>(['']) const modeList = ref<string[]>([''])
const QrList = ref<any[]>(['']) //const QrList = ref<any[]>([''])
const loginMode = ref('') const loginMode = ref('')
const showQrCodeTab = ref(false) const showQrCodeTab = ref(false)
@ -225,55 +228,54 @@ function uuidv4() {
}) })
} }
function redirectAuth(authType: string) { function redirectAuth(authType: string, needMessage: boolean = false) {
if (authType === 'LDAP' || authType === '') { if (authType === 'LDAP' || authType === '') {
return return
} }
authApi.getAuthSetting(authType, loading).then((res: any) => { authApi.getAuthSetting(authType, loading).then((res: any) => {
if (!res.data) { if (!res.data || !res.data.config) {
return return;
} }
const config = res.data.config;
const redirectUrl = eval(`\`${config.redirectUrl}/${accessToken}\``);
let url;
if (authType === 'CAS') {
url = config.ldpUri;
url += url.indexOf('?') !== -1
? `&service=${encodeURIComponent(redirectUrl)}`
: `?service=${encodeURIComponent(redirectUrl)}`;
} else if (authType === 'OIDC') {
const scope = config.scope || 'openid+profile+email';
url = `${config.authEndpoint}?client_id=${config.clientId}&redirect_uri=${redirectUrl}&response_type=code&scope=${scope}`;
if (config.state) {
url += `&state=${config.state}`;
}
} else if (authType === 'OAuth2') {
url = `${config.authEndpoint}?client_id=${config.clientId}&response_type=code&redirect_uri=${redirectUrl}&state=${uuidv4()}`;
if (config.scope) {
url += `&scope=${config.scope}`;
}
}
if (!url) {
return;
}
if (needMessage) {
MsgConfirm(t('views.login.jump_tip'), '', { MsgConfirm(t('views.login.jump_tip'), '', {
confirmButtonText: t('views.login.jump'), confirmButtonText: t('views.login.jump'),
cancelButtonText: t('common.cancel'), cancelButtonText: t('common.cancel'),
confirmButtonClass: '', confirmButtonClass: '',
}) })
.then(() => { .then(() => {
if (!res.data.config_data) { window.location.href = url;
return })
} .catch(() => {
const config = res.data.config_data });
const redirectUrl = eval(`\`${config.redirectUrl}\``)
let url
if (authType === 'CAS') {
url = config.ldpUri
if (url.indexOf('?') !== -1) {
url = `${config.ldpUri}&service=${encodeURIComponent(redirectUrl)}`
} else { } else {
url = `${config.ldpUri}?service=${encodeURIComponent(redirectUrl)}` console.log('url', url);
window.location.href = url;
} }
} });
if (authType === 'OIDC') {
const scope = config.scope || 'openid+profile+email'
url = `${config.authEndpoint}?client_id=${config.clientId}&redirect_uri=${redirectUrl}&response_type=code&scope=${scope}`
if (config.state) {
url += `&state=${config.state}`
}
}
if (authType === 'OAuth2') {
url =
`${config.authEndpoint}?client_id=${config.clientId}&response_type=code` +
`&redirect_uri=${redirectUrl}&state=${uuidv4()}`
if (config.scope) {
url += `&scope=${config.scope}`
}
}
if (url) {
window.location.href = url
}
})
.catch(() => {})
})
} }
function changeMode(val: string) { function changeMode(val: string) {
@ -297,9 +299,16 @@ onBeforeMount(() => {
loading.value = true loading.value = true
user.asyncGetProfile().then((res) => { user.asyncGetProfile().then((res) => {
if (user.isEnterprise()) { if (user.isEnterprise()) {
user loginApi
.getAuthType() .getAuthType(accessToken)
.then((res) => { .then((res: any) => {
res = res.data || {}
const direct = res.needDirect
res = res.authType || []
if (direct) {
redirectAuth(res[0], false)
} else {
//如果结果包含LDAP，把LDAP放在第一个 //如果结果包含LDAP，把LDAP放在第一个
const ldapIndex = res.indexOf('LDAP') const ldapIndex = res.indexOf('LDAP')
if (ldapIndex !== -1) { if (ldapIndex !== -1) {
@ -307,111 +316,113 @@ onBeforeMount(() => {
res.unshift(ldap) res.unshift(ldap)
} }
modeList.value = [...modeList.value, ...res] modeList.value = [...modeList.value, ...res]
}) console.log(modeList.value)
.finally(() => (loading.value = false))
user
.getQrType()
.then((res) => {
if (res.length > 0) {
modeList.value = ['QR_CODE', ...modeList.value]
QrList.value = res
QrList.value.forEach((item) => {
orgOptions.value.push({
key: item,
value:
item === 'wecom'
? t('views.system.authentication.scanTheQRCode.wecom')
: item === 'dingtalk'
? t('views.system.authentication.scanTheQRCode.dingtalk')
: t('views.system.authentication.scanTheQRCode.lark'),
})
})
} }
}) })
.finally(() => (loading.value = false)) .finally(() => (loading.value = false))
// user
// .getQrType()
// .then((res) => {
// if (res.length > 0) {
// modeList.value = ['QR_CODE', ...modeList.value]
// QrList.value = res
// QrList.value.forEach((item) => {
// orgOptions.value.push({
// key: item,
// value:
// item === 'wecom'
// ? t('views.system.authentication.scanTheQRCode.wecom')
// : item === 'dingtalk'
// ? t('views.system.authentication.scanTheQRCode.dingtalk')
// : t('views.system.authentication.scanTheQRCode.lark'),
// })
// })
// }
// })
// .finally(() => (loading.value = false))
} else { } else {
loading.value = false loading.value = false
} }
}) })
}) })
declare const window: any //declare const window: any
onMounted(() => { // onMounted(() => {
makeCode() // makeCode()
const route = useRoute() // const route = useRoute()
const currentUrl = ref(route.fullPath) // const currentUrl = ref(route.fullPath)
const params = new URLSearchParams(currentUrl.value.split('?')[1]) // const params = new URLSearchParams(currentUrl.value.split('?')[1])
const client = params.get('client') // const client = params.get('client')
//
const handleDingTalk = () => { // const handleDingTalk = () => {
const code = params.get('corpId') // const code = params.get('corpId')
if (code) { // if (code) {
dd.runtime.permission.requestAuthCode({ corpId: code }).then((res) => { // dd.runtime.permission.requestAuthCode({corpId: code}).then((res) => {
console.log('DingTalk client request success:', res) // console.log('DingTalk client request success:', res)
user.dingOauth2Callback(res.code).then(() => { // user.dingOauth2Callback(res.code).then(() => {
router.push({ name: 'home' }) // router.push({name: 'home'})
}) // })
}) // })
} // }
} // }
//
const handleLark = () => { // const handleLark = () => {
const appId = params.get('appId') // const appId = params.get('appId')
const callRequestAuthCode = () => { // const callRequestAuthCode = () => {
window.tt?.requestAuthCode({ // window.tt?.requestAuthCode({
appId: appId, // appId: appId,
success: (res: any) => { // success: (res: any) => {
user.larkCallback(res.code).then(() => { // user.larkCallback(res.code).then(() => {
router.push({ name: 'home' }) // router.push({name: 'home'})
}) // })
}, // },
fail: (error: any) => { // fail: (error: any) => {
MsgError(error) // MsgError(error)
}, // },
}) // })
} // }
//
loadScript('https://lf-scm-cn.feishucdn.com/lark/op/h5-js-sdk-1.5.35.js', { // loadScript('https://lf-scm-cn.feishucdn.com/lark/op/h5-js-sdk-1.5.35.js', {
jsId: 'lark-sdk', // jsId: 'lark-sdk',
forceReload: true, // forceReload: true,
}) // })
.then(() => { // .then(() => {
if (window.tt) { // if (window.tt) {
window.tt.requestAccess({ // window.tt.requestAccess({
appID: appId, // appID: appId,
scopeList: [], // scopeList: [],
success: (res: any) => { // success: (res: any) => {
user.larkCallback(res.code).then(() => { // user.larkCallback(res.code).then(() => {
router.push({ name: 'home' }) // router.push({name: 'home'})
}) // })
}, // },
fail: (error: any) => { // fail: (error: any) => {
const { errno } = error // const {errno} = error
if (errno === 103) { // if (errno === 103) {
callRequestAuthCode() // callRequestAuthCode()
} // }
}, // },
}) // })
} else { // } else {
callRequestAuthCode() // callRequestAuthCode()
} // }
}) // })
.catch((error) => { // .catch((error) => {
console.error('SDK 加载失败:', error) // console.error('SDK 加载失败:', error)
}) // })
} // }
//
switch (client) { // switch (client) {
case 'dingtalk': // case 'dingtalk':
handleDingTalk() // handleDingTalk()
break // break
case 'lark': // case 'lark':
handleLark() // handleLark()
break // break
default: // default:
break // break
} // }
}) // })
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.login-gradient-divider { .login-gradient-divider {

4
ui/src/views/login/index.vue
View File

@ -234,10 +234,10 @@ function redirectAuth(authType: string) {
confirmButtonClass: '' confirmButtonClass: ''
}) })
.then(() => { .then(() => {
if (!res.data.config_data) { if (!res.data.config) {
return return
} }
const config = res.data.config_data const config = res.data.config
const redirectUrl = eval(`\`${config.redirectUrl}\``) const redirectUrl = eval(`\`${config.redirectUrl}\``)
let url let url
if (authType === 'CAS') { if (authType === 'CAS') {