钉钉扫码登录讲解

一、扫码登录参数准备

①、首先我们进入钉钉开放平台 https://ding-doc.dingtalk.com/

②、选择《第三方企业应用》查看名词解释，并充分理解钉钉登录有关的关键词

redirect_uri 重定向地址

loginTmpCode 临时授权码

③、选择《服务端API》选项->《身份验证》->《扫码登录第三方网站》，得到教程

java 钉钉接口对接 调用钉钉登录接口_spring boot

 

④、根据教程，首先我们需要进入钉钉开发者后台 创建扫码登录应用授权，从而来获取AppId和AppSecret

登录开发者后台需《注册企业账号》->《应用开发》->《登录》->《创建扫码登录应用授权》

java 钉钉接口对接 调用钉钉登录接口_spring_02

 

⑤、授权LOGO地址：图片地址   回调域名：登录后跳转的页面

·

java 钉钉接口对接 调用钉钉登录接口_spring_03

⑥、创建好扫码登录应用授权后，得到如下参数

appId:     dingoauftacz0nypddeeno

appSecret:     6fozPqVOBMUwsNPgamYHfJAUG0z86_cIZPwHw8anqiVaWW-gcdStrWj5picue3vn

java 钉钉接口对接 调用钉钉登录接口_java 钉钉接口对接_04

 

二、搭建SpringBoot项目来实现钉钉扫码登录并在跳转页面上打印用户信息

①通过前端导入相应的钉钉扫码JS文件->实例化DDLogin JS对象->获取loginTmpCode(临时状态码)并将零时状态码传到后端

导入js文件

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

 

实例化DDLogin JS对象

const APPID = "dingoaiw7bmr3uvykaa1xt";

const URI = "http://localhost:8888/DingDing/DingDingAPI/DingLogin/";

var obj = DDLogin({

    id:"login_container",//这里需要你在自己的页面定义一个HTML标签并设置id，例如<div id="login_container"></div>或<span id="login_container"></span>

    goto: encodeURIComponent("https://oapi.dingtalk.com/connect/qrconnect?appid="+ APPID +"&response_type=code&scope=snsapi_login&state=STATE&redirect_uri=" + URI ), //请参考注释里的方式

    style: "border:none;background-color:#FFFFFF;",

    width : "365",

    height: "400"

});


获取loginTmpCode(临时状态码)并将零时状态码传到后端

var handleMessage = function (event) {

    var origin = event.origin;

    console.log("origin", event.origin);

    if( origin == "https://login.dingtalk.com" ) { //判断是否来自ddLogin扫码事件。

        var loginTmpCode = event.data;



        console.log("loginTmpCode", loginTmpCode);

        //获取到loginTmpCode后就可以在这里构造跳转链接进行跳转了

        window.location.href =

            "https://oapi.dingtalk.com/connect/oauth2/sns_authorize?appid="+ APPID +"&response_type=code&scope=snsapi_login&state=STATE&redirect_uri="+URI+"&loginTmpCode=" +

            loginTmpCode;

    }

};

②、由上步得：跳转到http://localhost:8888/DingDing/DingDingAPI/DingLogin/页面，该连接对应接口DingLogin，该接口获取临时授权码（loginTmpCode）并得到用户信息。随后将页面跳转到

getUserInfo.do接口。代码如下

@Controller
@RequestMapping("/DingDingAPI")
public class DingDingAPI {

    //钉钉登录应用的appId
    public static final  String APP_ID = "dingoaiw7bmr3uvykaa1xt";
    //钉钉登录应用的appSecret
    public  static final String APP_SCRET = "XBe08lvuDh8YqLf11jUvkdmcZtKW02UqlFaknuMLbq-ip6qpczmDyow7eOft9V4i";

    //loginTmpCode:前端小哥哥获取的临时登录Code
    @RequestMapping(value = "/DingLogin",method= RequestMethod.GET )
    public ModelAndView DingLogin(String code) throws ApiException{

        DefaultDingTalkClient client = new DefaultDingTalkClient("https://oapi.dingtalk.com/sns/getuserinfo_bycode");
        OapiSnsGetuserinfoBycodeRequest req = new OapiSnsGetuserinfoBycodeRequest();
        req.setTmpAuthCode(code);//code为临时授权码
        OapiSnsGetuserinfoBycodeResponse response = client.execute(req, APP_ID, APP_SCRET); //用户的信息都在这里面啦
        System.out.println(response.getBody());

        ModelAndView mav=new ModelAndView();
        mav.setViewName("redirect:/HomeController/getUserInfo.do");  //返回的文件名  ,这里必须加redirect
        mav.addObject("param1", response.getUserInfo().getNick());
        mav.addObject("param2", response.getUserInfo().getOpenid());
        mav.addObject("param3", response.getUserInfo().getUnionid());
        return mav;
    }
}

getUserInfo.do接口，跳转到UserInfo.html网页,并将参数传到页面上去

@RequestMapping("/getUserInfo.do")

public String getUserInfo(Model model , @RequestParam("param1") String param1,

                          @RequestParam("param2") String param2, @RequestParam("param3") String param3 ){



    model.addAttribute("param1", param1);

    model.addAttribute("param2", param2);

    model.addAttribute("param3", param3);



    return "UserInfo";

}

UserInfo.html页面

<!DOCTYPE html>

<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">

<head>

    <meta charset="UTF-8">

    <title>{{ nick}} Title {{openid}}</title>

</head>

<style>

    table,table tr td ,table tr th{

        border: 1px solid #cccccc;

        font-size: 25px;

    }

    table{

        width: 300px;

        border-collapse: collapse;

    }

</style>

<body>

    <div>

        <h2>你的用户信息如下</h2>

        <table border="1" >

            <tr>

                <td >nick</td>

                <td id="nick" th:text="${param1}"></td>

            </tr>`

            <tr>

                <td>openid</td>

                <td id="openid" th:text="${param2}"></td>

            </tr>

            <tr>

                <td>unionid</td>

                <td id="unionid" th:text="${param3}"></td>

            </tr>

        </table>



    </div>

</body>

<script>



</script>

</html>

 

最终运行结果：可以打印来自钉钉的用户信息

java 钉钉接口对接 调用钉钉登录接口_spring_05