114 lines
2.7 KiB
Vue
114 lines
2.7 KiB
Vue
<script setup lang="ts">
|
||
import { useRoute } from 'vue-router';
|
||
|
||
import { RiDingding } from '@vben/icons';
|
||
import { $t } from '@vben/locales';
|
||
|
||
import { alert, useVbenModal } from '@vben-core/popup-ui';
|
||
import { VbenIconButton } from '@vben-core/shadcn-ui';
|
||
import { loadScript } from '@vben-core/shared/utils';
|
||
|
||
interface Props {
|
||
clientId: string;
|
||
corpId: string;
|
||
// 登录回调地址
|
||
redirectUri?: string;
|
||
// 是否内嵌二维码登录
|
||
isQrCode?: boolean;
|
||
}
|
||
|
||
const props = defineProps<Props>();
|
||
|
||
const route = useRoute();
|
||
|
||
const [Modal, modalApi] = useVbenModal({
|
||
header: false,
|
||
footer: false,
|
||
fullscreenButton: false,
|
||
class: 'w-[302px] h-[302px] dingding-qrcode-login-modal',
|
||
onOpened() {
|
||
handleQrCodeLogin();
|
||
},
|
||
});
|
||
|
||
const getRedirectUri = () => {
|
||
const { redirectUri } = props;
|
||
if (redirectUri) {
|
||
return redirectUri;
|
||
}
|
||
return window.location.origin + route.fullPath;
|
||
};
|
||
|
||
/**
|
||
* 内嵌二维码登录
|
||
*/
|
||
const handleQrCodeLogin = async () => {
|
||
const { clientId, corpId } = props;
|
||
if (!(window as any).DTFrameLogin) {
|
||
// 二维码登录 加载资源
|
||
await loadScript(
|
||
'https://g.alicdn.com/dingding/h5-dingtalk-login/0.21.0/ddlogin.js',
|
||
);
|
||
}
|
||
(window as any).DTFrameLogin(
|
||
{
|
||
id: 'dingding_qrcode_login_element',
|
||
width: 300,
|
||
height: 300,
|
||
},
|
||
{
|
||
// 注意：redirect_uri 需为完整URL，扫码后钉钉会带code跳转到这里
|
||
redirect_uri: encodeURIComponent(getRedirectUri()),
|
||
client_id: clientId,
|
||
scope: 'openid corpid',
|
||
response_type: 'code',
|
||
state: '1',
|
||
prompt: 'consent',
|
||
corpId,
|
||
},
|
||
(loginResult: any) => {
|
||
const { redirectUrl } = loginResult;
|
||
// 这里可以直接进行重定向
|
||
window.location.href = redirectUrl;
|
||
},
|
||
(errorMsg: string) => {
|
||
// 这里一般需要展示登录失败的具体原因
|
||
alert(`Login Error: ${errorMsg}`);
|
||
},
|
||
);
|
||
};
|
||
|
||
const handleLogin = () => {
|
||
const { clientId, corpId, isQrCode } = props;
|
||
if (isQrCode) {
|
||
// 内嵌二维码登录
|
||
modalApi.open();
|
||
} else {
|
||
window.location.href = `https://login.dingtalk.com/oauth2/auth?redirect_uri=${encodeURIComponent(getRedirectUri())}&response_type=code&client_id=${clientId}&scope=openid&corpid=${corpId}&prompt=consent`;
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<template>
|
||
<div>
|
||
<VbenIconButton
|
||
@click="handleLogin"
|
||
:tooltip="$t('authentication.dingdingLogin')"
|
||
tooltip-side="top"
|
||
>
|
||
<RiDingding />
|
||
</VbenIconButton>
|
||
<Modal>
|
||
<div id="dingding_qrcode_login_element"></div>
|
||
</Modal>
|
||
</div>
|
||
</template>
|
||
|
||
<style>
|
||
.dingding-qrcode-login-modal {
|
||
.relative {
|
||
padding: 0 !important;
|
||
}
|
||
}
|
||
</style>
|