vue实现钉钉扫码登录

流程图

由于很多人问这个，发现并不是代码问题，都是流程不清楚导致，遂补一个流程图

如图所示：

官网文档：

扫码登陆第三方网站

代码如下：

//在public/index.html引入钉钉js
//需注意如果报错DDLogin未定义，需要将此代码放入head中或者body中，放在body-html标签之间有些项目会报错。
<script src="https://g.alicdn.com/dingding/dinglogin/0.0.5/ddLogin.js"></script>

//html
// id必写，style是为了调整二维码大小，二维码官方固定尺寸，只好出此下策。
<div id="login_container" style="transform: scale(.8);"></div>

//在这里插入代码片
mounted(){
  //code是登录所需最终参数
  const { code } = this.$route.query
  if(code){ //登录接口
    this.handleCodeLogin(code)
  }else{ //钉钉二维码
    this.ddLoginInit()
  } 
},
methods: {
ddLoginInit(){
	//钉钉扫码流程：扫码成功登录后会自动跳到这个url页面，url路径会携带code，你拿到这个code，调用登录接口成功就跳转。
	//你的项目页面
   let url = encodeURIComponent('http://baidu.com.cn/weekly/#/login');
   // appid 找后端要
   let appid = 'dingappid'
   // 钉钉自己的url 修改上面俩，不需要动这个
   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",//这里需要你在自己的页面定义一个HTML标签并设置id，例如<div id="login_container"></div>或<span id="login_container"></span>
       goto: goto, //请参考注释里的方式
       style: "border:none;background-color:#FFFFFF;",
       width : "100%",//官方参数 365
       height: "300"//官方参数 400
   });
   let handleMessage =  (event) =>{
     let origin = event.origin;
     console.log("origin", event.origin);
     if( origin == "https://login.dingtalk.com" ) { //判断是否来自ddLogin扫码事件。
       let loginTmpCode = event.data; 
       //获取到loginTmpCode后就可以在这里构造跳转链接进行跳转了
       console.log("loginTmpCode", loginTmpCode);
       //此步拿到临时loginTmpCode换取正式code
       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}`
     }
   };
   if (typeof window.addEventListener != 'undefined') {
       window.addEventListener('message', handleMessage, false);
   } else if (typeof window.attachEvent != 'undefined') {
       window.attachEvent('onmessage', handleMessage);
   }
 },
 handleCodeLogin(code){
   this.$store.dispatch('user/codeLogin', {authCode:code}).then((res) => {
   //到这里就成功了直接路由跳转，下面是我个人逻辑
   this.$router.push( '/index')
   //this.$store.dispatch('user/getMenuList').then(() => {
   // if(res.instType == 0){
   //  this.$router.push( '/queryWeekly')
   // }else{
   //  this.$router.push( '/addWeekly')
   // }
   // this.loading = false
   //})
   }).catch(() => {
     this.$router.push( '/')
     this.loading = false
   })
 },
}

备注： 阴晴不定，小雨连绵；春困夏乏秋打盹，睡不醒的冬三月。