政务钉钉扫码登录功能封装，可以通过 js 方法或 Vue 组件方式接入项目。钉钉开放平台-扫码登录
npm
npm i gdt-qrcodecdn
cdn 方式引入，暴露的全局变量为 GdtQRCode<!DOCTYPE html>
<html lang="en">
<body>
<div id="app">
<qr-code client-id="应用标识" redirect-uri="回调地址" />
</div>
<script src="https://unpkg.com/vue@latest"></script>
<script src="https://unpkg.com/gdt-qrcode@latest/dist/gdt-qrcode.umd.js"></script>
<script>
const app = Vue.createApp({})
app.component('QrCode', GdtQRCode.VGdtQRCode)
app.mount('#app')
</script>
</body>
</html>方式一：使用 JS 方法
import { GdtQRCode } from 'gdt-qrcode'
new GdtQRCode(document.getElementById('#domId'), {
clientId: '应用标识',
redirectUri: '回调地址',
onScanned(code: string) {
console.log('扫码成功', code)
}
})方式二：使用 Vue 组件
<script setup lang="ts">
import { VGdtQRCode } from 'gdt-qrcode'
function handleScanned(code: string) {
console.log('扫码成功', code)
}
</script>
<template>
<VGdtQRCode client-id="应用标识" redirect-uri="回调地址" @scanned="handleScanned" />
</template>interface QRCodeOptions {
// 应用标识，会作为 iframe src 地址参数
clientId?: string
// 回调地址，会作为 iframe src 地址参数
redirectUri?: string
// 扫码登录域名，默认 https://login-pro.ding.zj.gov.cn
domain?: string
// 扫码登录完整地址，默认 domian + /oauth2/auth.htm?response_type=code&scope=get_user_info&authType=QRCODE&embedMode=true
url?: string | ((options: QRCodeOptions) => string)
// iframe 宽，默认 100%
width?: number | string
// iframe 高，默认 320px
height?: number | string
// 元素单独占一行，display: block
blockLine?: boolean
// 是否展示 logo
showLogo?: boolean
// 只展示二维码
onlyShowCode?: boolean
// 扫码登录成功回调，拿到临时授权码 code
onScanned?: (code: string, data: object) => void
}
interface QRCodeInst {
dom: HTMLElement | undefined
domClassName: string
iframe: HTMLIFrameElement | undefined
url: string | undefined
options: QRCodeOptions
render: () => void
update: (options?: QRCodeOptions) => void
updateUrl: (url?: string) => void
updateStyle: (options?: QRCodeOptions) => void
destroy: () => void
}MIT