官方文檔：https://ding-doc.dingtalk.com/document/app/scan-qr-code-to-log-on-to-third-party-websites

準(zhǔn)備工作

1、登錄釘釘開放平臺(tái)，注冊(cè)應(yīng)用掃碼授權(quán)，創(chuàng)建成功以后拿到 appId 和 appSecret

登錄應(yīng)用授權(quán)碼

創(chuàng)建Vue項(xiàng)目

在index.html文件中引入

<script src="https://g.alicdn.com/dingding/dinglogin/0.0.5/ddLogin.js"></script>

3、Vue項(xiàng)目中創(chuàng)建 DDLogin.vue 組件

下面代碼有三個(gè)地方需要修改：

• 如果組件名不是 DDLogin，需要把 name: 'DDLogin' 換成自己的組件名
• addId修改成自己的appId
• redirect修改成自己的回調(diào)地址

<template>
  <div>
    <h2>釘釘掃描登錄</h2>
    <div id="login_container"></div>
    <button @click="dingLogin">點(diǎn)擊顯示二維碼</button>
  </div>
</template>

<script>
export default {
  name: 'DDLogin',
  data () {
    return {
      isShow:false, // 控制掃碼窗口顯示

      appId:'你的appId',
      // 重定向地址,必須和 掃碼登錄應(yīng)用授權(quán) 里面的回調(diào)地址一致，否則會(huì)無法完成跳轉(zhuǎn)?。?！
      redirect:encodeURIComponent('http://localhost:8989/DingLogin'),
    }
  },
  mounted() {
    let _this = this;
    let handleMessage = function(event) {
      let origin = event.origin;
      //判斷是否來自ddLogin掃碼事件。
      if (origin === "https://login.dingtalk.com") {
        //拿到loginTmpCode后就可以在這里構(gòu)造跳轉(zhuǎn)鏈接進(jìn)行跳轉(zhuǎn)了
        let loginTmpCode = event.data;
        window.location.href =
          "https://oapi.dingtalk.com/connect/oauth2/sns_authorize?appid="+_this.appId+"&response_type=code&scope=snsapi_login&state=STATE&redirect_uri="+
          _this.redirect+"&loginTmpCode=" + loginTmpCode;
      }
    };
    if (typeof window.addEventListener != "undefined") {
      window.addEventListener("message", handleMessage, false);
    } else if (typeof window.attachEvent != "undefined") {
      window.attachEvent("onmessage", handleMessage);
    }
  },
  methods:{
    dingLogin(){
      this.isShow=true;
      // 官網(wǎng)給的跳轉(zhuǎn)連接格式
      let goto = encodeURIComponent('https://oapi.dingtalk.com/connect/oauth2/sns_authorize?appid='+this.appId+'&response_type=code&scope=snsapi_login&state=STATE&redirect_uri='+this.redirect);
      let obj = DDLogin({
        id: "login_container",
        goto: goto,
        style: "border:none;background-color:#FFFFFF;",
        width: "365",
        height: "400"
      });
    }
  }
}
</script>

?

創(chuàng)建Springboot項(xiàng)目

pom.xml 中引入釘釘依賴

<dependency>
    <groupId>com.aliyun</groupId>
    <artifactId>alibaba-dingtalk-service-sdk</artifactId>
    <version>1.0.1</version>
</dependency>

創(chuàng)建controller業(yè)務(wù)代碼，通過臨時(shí)授權(quán)碼獲取授權(quán)用戶的個(gè)人信息

import com.dingtalk.api.DefaultDingTalkClient;
import com.dingtalk.api.request.OapiSnsGetuserinfoBycodeRequest;
import com.dingtalk.api.response.OapiSnsGetuserinfoBycodeResponse;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;


@CrossOrigin    //解決跨域問題
@RestController
public class LoginController {
    private static final String appId = "你的appId";
    private static final String appSecret = "你的appSecret";

    @RequestMapping("/DingLogin")
    public String DingLogin(String code) throws Exception {
        // 通過臨時(shí)授權(quán)碼code獲取授權(quán)用戶的個(gè)人信息
        DefaultDingTalkClient client2 = new DefaultDingTalkClient("https://oapi.dingtalk.com/sns/getuserinfo_bycode");
        OapiSnsGetuserinfoBycodeRequest codeRequest = new OapiSnsGetuserinfoBycodeRequest();
        // 通過掃描二維碼，跳轉(zhuǎn)指定的redirect_uri后，向url中追加的code臨時(shí)授權(quán)碼
        codeRequest.setTmpAuthCode(code);
        OapiSnsGetuserinfoBycodeResponse codeResponse = client2.execute(codeRequest, appId,appSecret);
        String success =  "登錄成功,"+codeResponse.getUserInfo().getNick();
        System.out.println(success);
        return success;
    }
}

獲取用戶信息userInfo
codeResponse 對(duì)象中存有用戶信息

{      
  "errcode": 0,      
  "errmsg": "ok",      
  "user_info": {          
       "nick": "張三",// 用戶在釘釘上面的昵稱          
       "openid": "liSii8KCxxxxx",// 用戶在當(dāng)前開放應(yīng)用內(nèi)的唯一標(biāo)識(shí)          
       "unionid": "7Huu46kk"http:// 用戶在當(dāng)前開放應(yīng)用所屬企業(yè)的唯一標(biāo)識(shí)  
  }  
}

因?yàn)樾Ч麍D中有釘釘?shù)卿浀亩S碼，發(fā)布文章后會(huì)被自動(dòng)鎖定，所以想看效果圖的請(qǐng)到博客內(nèi)查看（跳轉(zhuǎn)博客）

原文鏈接：https://www.qiudb.top/archives/52/