钉钉扫码登录讲解
一、扫码登录参数准备
①、首先我们进入钉钉开放平台 https://ding-doc.dingtalk.com/
②、选择《第三方企业应用》查看名词解释,并充分理解钉钉登录有关的关键词
AppId 应用唯一标识 AppSecret 应用密钥 redirect_uri 重定向地址
loginTmpCode 临时授权码
③、选择《服务端API》选项->《身份验证》->《扫码登录第三方网站》,得到教程
④、根据教程,首先我们需要进入钉钉开发者后台 创建扫码登录应用授权,从而来获取AppId和AppSecret
登录开发者后台需《注册企业账号》->《应用开发》->《登录》->《创建扫码登录应用授权》
⑤、授权LOGO地址:图片地址 回调域名:登录后跳转的页面
·
⑥、创建好扫码登录应用授权后,得到如下参数
appId: dingoauftacz0nypddeeno
appSecret: 6fozPqVOBMUwsNPgamYHfJAUG0z86_cIZPwHw8anqiVaWW-gcdStrWj5picue3vn
二、搭建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>
最终运行结果:可以打印来自钉钉的用户信息
资源连接:https://download.csdn.net/download/weixin_42311984/12840745