[Springboot] 钉钉扫码登录

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

准备工作

1、登录钉钉开放平台，注册应用扫码授权，创建成功以后拿到 appId 和 appSecret

登录应用授权码

创建Vue项目

在index.html文件中引入

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

3、Vue项目中创建 DDLogin.vue 组件

下面代码有三个地方需要修改：

• 如果组件名不是 DDLogin，需要把 name: 'DDLogin' 换成自己的组件名
• addId修改成自己的appId
• redirect修改成自己的回调地址

<template>
  <div>
    <h2>钉钉扫描登录</h2>
    <div id="login_container"></div>
    <button @click="dingLogin">点击显示二维码</button>
  </div>
</template>

<script>
export default {
  name: 'DDLogin',
  data () {
    return {
      isShow:false, // 控制扫码窗口显示

      appId:'你的appId',
      // 重定向地址,必须和 扫码登录应用授权 里面的回调地址一致，否则会无法完成跳转！！！
      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后就可以在这里构造跳转链接进行跳转了
        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;
      // 官网给的跳转连接格式
      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>

创建Springboot项目

pom.xml 中引入钉钉依赖

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

创建controller业务代码，通过临时授权码获取授权用户的个人信息

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 {
        // 通过临时授权码code获取授权用户的个人信息
        DefaultDingTalkClient client2 = new DefaultDingTalkClient("https://oapi.dingtalk.com/sns/getuserinfo_bycode");
        OapiSnsGetuserinfoBycodeRequest codeRequest = new OapiSnsGetuserinfoBycodeRequest();
        // 通过扫描二维码，跳转指定的redirect_uri后，向url中追加的code临时授权码
        codeRequest.setTmpAuthCode(code);
        OapiSnsGetuserinfoBycodeResponse codeResponse = client2.execute(codeRequest, appId,appSecret);
        String success =  "登录成功,"+codeResponse.getUserInfo().getNick();
        System.out.println(success);
        return success;
    }
}

获取用户信息userInfo
codeResponse 对象中存有用户信息

{      
  "errcode": 0,      
  "errmsg": "ok",      
  "user_info": {          
       "nick": "张三",// 用户在钉钉上面的昵称          
       "openid": "liSii8KCxxxxx",// 用户在当前开放应用内的唯一标识          
       "unionid": "7Huu46kk"// 用户在当前开放应用所属企业的唯一标识  
  }  
}

因为效果图中有钉钉登录的二维码，发布文章后会被自动锁定，所以想看效果图的请到博客内查看（跳转博客）

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