feat(系统设置): 登录页面新增钉钉登陆
This commit is contained in:
guoyuqi
刘瑞斌
parent
9e46c80c05
commit
fdafb1236a
|
|
@ -0,0 +1,53 @@
|
|||
<template>
|
||||
<div id="ding-talk-qr" class="ding-talk-qrName" />
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { useScriptTag } from '@vueuse/core';
|
||||
|
||||
const { load } = useScriptTag('https://g.alicdn.com/dingding/h5-dingtalk-login/0.21.0/ddlogin.js');
|
||||
|
||||
const a = encodeURIComponent('https://s0my5tnf41e2.ngrok.xiaomiqiu123.top/');
|
||||
|
||||
const url = `https://login.dingtalk.com/oauth2/auth?redirect_uri=${a}&response_type=code&client_id=dinglsfxhodjquu4gq2x&scope=openid&state=dddd&prompt=consent`;
|
||||
|
||||
const initActive = async () => {
|
||||
await load(true);
|
||||
window.DTFrameLogin(
|
||||
{
|
||||
id: 'ding-talk-qr',
|
||||
width: 300,
|
||||
height: 300,
|
||||
},
|
||||
{
|
||||
redirect_uri: a,
|
||||
client_id: 'dinglsfxhodjquu4gq2x',
|
||||
scope: 'openid',
|
||||
response_type: 'code',
|
||||
state: 'xxxxxxxxx',
|
||||
prompt: 'consent',
|
||||
},
|
||||
(loginResult) => {
|
||||
const { redirectUrl, authCode, state } = loginResult;
|
||||
// 这里可以直接进行重定向
|
||||
window.location.href = redirectUrl;
|
||||
// 也可以在不跳转页面的情况下，使用code进行授权
|
||||
console.log(authCode);
|
||||
},
|
||||
(errorMsg) => {
|
||||
// 这里一般需要展示登录失败的具体原因,可以使用toast等轻提示
|
||||
console.error(`errorMsg of errorCbk: ${errorMsg}`);
|
||||
}
|
||||
);
|
||||
};
|
||||
onMounted(() => {
|
||||
initActive();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.ding-talk-qrName {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,8 +1,8 @@
|
|||
<template>
|
||||
<a-tabs v-model:active-key="activeName" class="tabPlatform" @change="handleClick">
|
||||
<a-tab-pane key="wecom" :title="t('project.messageManagement.WE_COM')" class="font-[16px]"></a-tab-pane>
|
||||
<!-- <a-tab-pane key="dingtalk" :title="t('project.messageManagement.DING_TALK')" ></a-tab-pane>
|
||||
<a-tab-pane key="lark" :title="t('project.messageManagement.LARK')"></a-tab-pane>
|
||||
<a-tab-pane key="dingtalk" :title="t('project.messageManagement.DING_TALK')" class="font-[16px]"></a-tab-pane>
|
||||
<!-- <a-tab-pane key="lark" :title="t('project.messageManagement.LARK')"></a-tab-pane>
|
||||
<a-tab-pane key="larksuite" :title="t('project.messageManagement.LARK_SUITE')"></a-tab-pane>-->
|
||||
</a-tabs>
|
||||
<div v-if="activeName === 'wecom'" class="login-qrcode">
|
||||
|
|
@ -10,11 +10,16 @@
|
|||
<wecom-qr v-if="activeName === 'wecom'" />
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div class="login-qrcode" v-if="activeName === 'dingtalk'">
|
||||
<div v-if="activeName === 'dingtalk'" class="login-qrcode">
|
||||
<div class="qrcode">
|
||||
<dingtalk-qr v-if="activeName === 'dingtalk'"/>
|
||||
<div class="title">
|
||||
<MsIcon type="icon-logo_dingtalk" size="24"></MsIcon>
|
||||
钉钉登录
|
||||
</div>
|
||||
<ding-talk-qr v-if="activeName === 'dingtalk'" />
|
||||
</div>
|
||||
</div>
|
||||
<!--
|
||||
<div class="login-qrcode" v-if="activeName === 'lark'">
|
||||
<div class="qrcode">
|
||||
<lark-qr v-if="activeName === 'lark'"/>
|
||||
|
|
@ -31,6 +36,8 @@
|
|||
import { ref } from 'vue';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
|
||||
import MsIcon from '@/components/pure/ms-icon-font/index.vue';
|
||||
import dingTalkQr from './dingTalkQrCode.vue';
|
||||
import WecomQr from './weComQrCode.vue';
|
||||
|
||||
const { t } = useI18n();
|
||||
|
|
@ -83,11 +90,12 @@
|
|||
justify-content: center;
|
||||
align-items: center;
|
||||
overflow: hidden;
|
||||
margin: 0 0 16px;
|
||||
font-size: 18px;
|
||||
font-weight: 500;
|
||||
font-style: normal;
|
||||
line-height: 26px;
|
||||
margin-bottom: -24px;
|
||||
z-index: 100000;
|
||||
.ed-icon {
|
||||
margin-right: 8px;
|
||||
font-size: 24px;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,22 @@
|
|||
export default function loadScript(url: string, jsId?: string) {
|
||||
return new Promise(function (resolve, reject) {
|
||||
const scriptId = jsId || 'de-fit2cloud-script-id';
|
||||
let dom = document.getElementById(scriptId);
|
||||
if (dom) {
|
||||
dom.parentElement?.removeChild(dom);
|
||||
dom = null;
|
||||
}
|
||||
const script = document.createElement('script');
|
||||
|
||||
script.id = scriptId;
|
||||
script.onload = function () {
|
||||
return resolve(null);
|
||||
};
|
||||
script.onerror = function () {
|
||||
return reject(new Error('Load script from '.concat(url, ' failed')));
|
||||
};
|
||||
script.src = url;
|
||||
const head = document.head || document.getElementsByTagName('head')[0];
|
||||
(document.body || head).appendChild(script);
|
||||
});
|
||||
}
|
||||
|
|
@ -1,3 +1,40 @@
|
|||
// ********************************************************************************
|
||||
// DOM包裹容器相关参数
|
||||
// ********************************************************************************
|
||||
// 注意！width与height参数只用于设置二维码iframe元素的尺寸，并不会影响包裹容器尺寸。
|
||||
// 包裹容器的尺寸与样式需要接入方自己使用css设置
|
||||
interface IDTLoginFrameParams {
|
||||
id: string; // 必传，包裹容器元素ID，不带'#'
|
||||
width?: number; // 选传，二维码iframe元素宽度，最小280，默认300
|
||||
height?: number; // 选传，二维码iframe元素高度，最小280，默认300
|
||||
}
|
||||
|
||||
// ********************************************************************************
|
||||
// 统一登录参数
|
||||
// ********************************************************************************
|
||||
// 参数意义与“拼接链接发起登录授权”的接入方式完全相同（缺少部分参数）
|
||||
// 增加了isPre参数来设定运行环境
|
||||
interface IDTLoginLoginParams {
|
||||
redirect_uri: string; // 必传，注意url需要encode
|
||||
response_type: string; // 必传，值固定为code
|
||||
client_id: string; // 必传
|
||||
scope: string; // 必传，如果值为openid+corpid，则下面的org_type和corpId参数必传，否则无法成功登录
|
||||
prompt: string; // 必传，值为consent。
|
||||
state?: string; // 选传
|
||||
org_type?: string; // 选传，当scope值为openid+corpid时必传
|
||||
corpId?: string; // 选传，当scope值为openid+corpid时必传
|
||||
exclusiveLogin?: string; // 选传，如需生成专属组织专用二维码时，可指定为true，可以限制非组织帐号的扫码
|
||||
exclusiveCorpId?: string; // 选传，当exclusiveLogin为true时必传，指定专属组织的corpId
|
||||
}
|
||||
|
||||
// ********************************************************************************
|
||||
// 登录成功后返回的登录结果
|
||||
// ********************************************************************************
|
||||
interface IDTLoginSuccess {
|
||||
redirectUrl: string; // 登录成功后的重定向地址，接入方可以直接使用该地址进行重定向
|
||||
authCode: string; // 登录成功后获取到的authCode，接入方可直接进行认证，无需跳转页面
|
||||
state?: string; // 登录成功后获取到的state
|
||||
}
|
||||
declare interface Window {
|
||||
kity: any;
|
||||
angular: any;
|
||||
|
|
@ -9,4 +46,10 @@ declare interface Window {
|
|||
minderEditor: Record<string, any>;
|
||||
km: Record<string, any>;
|
||||
canvg: (canvas: HTMLCanvasElement, xml: string, option: Record<string, any>) => void;
|
||||
DTFrameLogin: (
|
||||
frameParams: IDTLoginFrameParams, // DOM包裹容器相关参数
|
||||
loginParams: IDTLoginLoginParams, // 统一登录参数
|
||||
successCbk: (result: IDTLoginSuccess) => void, // 登录成功后的回调函数
|
||||
errorCbk?: (errorMsg: string) => void // 登录失败后的回调函数
|
||||
) => void;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue