新建一个dingtalk.ts文件
/**
* 钉钉扫码登录
* @version 2021-11-09 zzc
*/
import UserApi, { DingtalkLoginConfig } from '@/api/user'
import cookide from '@/utils/cookie'
import config from '@/config'
class Dingtalk {
goto: string
backUrl: string
state: number
urlPreffix: string
appid: string
domain: string
constructor() {
// 文档地址:https://open.dingtalk.com/document/orgapp-server/scan-qr-code-to-log-on-to-third-party-websites
this.state = Math.random()
this.appid = config.IS_TEST ? '测试环境appid' : '正式环境appid'
this.domain = config.IS_TEST ? '测试域名' : '正式域名'
this.urlPreffix = `https://oapi.dingtalk.com/connect/oauth2/sns_authorize?appid=${this.appid}&response_type=code&scope=snsapi_login&state=`
this.backUrl = encodeURIComponent(`${this.domain}appadmin/#/login`) // 扫码后跳转的地址
this.goto = `${this.urlPreffix}${this.state}&redirect_uri=${this.backUrl}`
}
/**
* 初始化钉钉二维码
* @version 2023-06-19 zzc
* @param { String } codeId 显示二维码的id
* @param { Function } callback 回调
*/
public init(codeId: string, callback?: Function) {
const scriptEle = document.createElement('script')
const win: any = window
const handleMessage = (event: any) => {
const { origin, data } = event
if (origin === 'https://login.dingtalk.com') {
const redirectUri = `${this.goto}&loginTmpCode=${data}`
if (win.parent === window ) {
parent.location.href = redirectUri
} else {
win.parent.location.href = redirectUri
}
}
}
scriptEle.id = 'dinglogin'
scriptEle.src = 'https://g.alicdn.com/dingding/dinglogin/0.0.5/ddLogin.js'
document.head.appendChild(scriptEle)
scriptEle.onload = () => {
// @ts-ignore
DDLogin({
id: codeId,
goto: encodeURIComponent(this.goto),
style: 'background-color: transparent;border: none',
with: '210',
height: '310'
})
callback && callback()
}
if (typeof win.addEventListener !== 'undefined') {
win.addEventListener('message', handleMessage, false)
} else if (typeof win.attachEvent !== 'undefined') {
win.attachEvent('onmessage', handleMessage)
}
}
/**
* 钉钉扫码登陆
* @param { Object } params 参数对象
* @param { String } params.code code
* @param { Object } params.state state
* @version 2021-11-09 zzc
*/
public async login(params: DingtalkLoginConfig) {
const { code, state } = params
if (!code || !state) {
return
}
// UserApi.dingtalkLogin 是请求后端接口,这里改成你自己的
const { result } = await UserApi.dingtalkLogin(params)
// 这里进行扫码成功后的操作
return result
}
}
export default new Dingtalk();
在vue中使用
<script lang="ts" setup>
import { onMounted, nextTick } from 'vue'
import dingtalk from '@/utils/dingtalk'
import { useRoute } from 'vue-router'
const route = useRoute()
dingtalk.init('dingtalk-qrcode', () => {
// 加载完的回调
showCode.value = false
})
</script>
<templete>
<div id="dingtalk-qrcode"></div>
</templete>