具体代码逻辑部分,其他配置问题请查看钉钉开发者文档。
引入钉钉 JS-SDK.js
<script src="https://g.alicdn.com/dingding/dinglogin/0.0.5/ddLogin.js"></script>
设置一个二维码显示容器
<div class="ddlogin" id="ddlogin"></div>
mounted
mounted(){ //code为传给后端的 const { code } = this.$route.query if (code) { this.submitLogin(code) } else { //钉钉二维码 this.ddLoginInit() } }
method
mounted(){ //code是登录所需最终参数 const { code } = this.$route.query if(code){ //登录接口 this.goDdLogin(code) }else{ //钉钉二维码 this.ddLoginInit() } }, methods: { ddLoginInit(){ let url = encodeURIComponent('换成自己的回调地址'); let appid = '自己的AppID' let goto = encodeURIComponent(`https://oapi.dingtalk.com/connect/oauth2/sns_authorize?appid=${appid}&response_type=code&scope=snsapi_login&state=STATE&redirect_uri=${url}`) let obj = DDLogin({ id:"login_container", goto: goto, style: "border:none;background-color:#FFFFFF;", width : "100%", height: "300" }); let handleMessage = (event) =>{ let origin = event.origin; if( origin == "https://login.dingtalk.com" ) { //判断是否来自ddLogin扫码事件。 let loginTmpCode = event.data; window.location.href = `https://oapi.dingtalk.com/connect/oauth2/sns_authorize?appid=${appid}&response_type=code&scope=snsapi_login&state=STATE&redirect_uri=${url}&loginTmpCode=${loginTmpCode}` } }; }, goDdLogin(code){ // 写自己的登录后的逻辑 }