Web站，前端接入钉钉扫码登录！坚果大叔

具体代码逻辑部分，其他配置问题请查看钉钉开发者文档。

引入钉钉 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){
  // 写自己的登录后的逻辑
}

钉钉登录