<template>
|
<div id="content" class="content">
|
<div>
|
<div style="text-align:center">钉钉扫码登录</div>
|
<div id="self_defined_element" class="self-defined-classname"></div>
|
</div>
|
</div>
|
</template>
|
|
<script setup name="Oss" lang="ts">
|
import { useRoute } from 'vue-router';
|
import { dingdingLogin } from '@/api/system/user';
|
const getUserDate = async (code: string) => {
|
// await dingdingLogin({
|
// authCode: code
|
// }).then((res: any) => {
|
// this.$router.push('/student');
|
// });
|
};
|
onMounted(() => {
|
const route = useRoute();
|
let code = route.query.code;
|
if (code) {
|
getUserDate(code);
|
} else {
|
// STEP3：在需要的时候，调用 window.DTFrameLogin 方法构造登录二维码，并处理登录成功或失败的回调。
|
window.DTFrameLogin(
|
{
|
id: 'self_defined_element',
|
width: 300,
|
height: 300
|
},
|
{
|
redirect_uri: encodeURIComponent('https://f060-183-223-248-101.ngrok-free.app/auth/dingdingLogin'),
|
client_id: 'dingl5dxahaj3uzfug66',
|
scope: 'openid',
|
response_type: 'code',
|
state: 'STATE',
|
prompt: 'consent'
|
},
|
(loginResult: any) => {
|
console.log('loginResult:' + loginResult);
|
|
debugger;
|
const { redirectUrl, authCode, state } = loginResult;
|
// 这里可以直接进行重定向
|
window.location.href = redirectUrl;
|
// 也可以在不跳转页面的情况下，使用code进行授权
|
console.log(authCode);
|
},
|
(errorMsg: any) => {
|
// 这里一般需要展示登录失败的具体原因,可以使用toast等轻提示
|
console.error(`errorMsg of errorCbk: ${errorMsg}`);
|
}
|
);
|
}
|
});
|
</script>
|
|
<style lang="scss" scoped>
|
.content {
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
}
|
.self-defined-classname {
|
// width: 300px;
|
// height: 300px;
|
}
|
</style>
|
