钉钉扫码登录前端页面(附加参考php后端&钉钉消息通知)

钉钉扫码登录前端页面，另提供php后台处理授权code的参考代码。

http://dingding.ranjuan.cn/saoma.html——直接访问该地址，可以显示扫码

http://dingding.ranjuan.cn/getUserCode.html——上一步扫码后跳转的地址

使用前先在钉钉开发者后台配置扫码登录应用。回调域名我测试的时候，只要填写到顶级域名就行(如：http://dingding.ranjuan.cn)，不一定非得填写到具体的uri路径

下面是saoma.html文件源码，注意修改redirect_uri与appid的配置

 1<head>
 2    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 3     <title></title>
 4</head>
 5<script src="https://g.alicdn.com/dingding/dinglogin/0.0.5/ddLogin.js"></script>
 6<style>
 7 
 8body{
 9	background: url(./bg1.jpg) no-repeat 0px 0px;
10	font-family: 'Open Sans', sans-serif;
11	background-size:cover;
12	-webkit-background-size:cover;
13	-moz-background-size:cover;
14	-o-background-size:cover;
15	min-height:1050px;
16}
17h1 {
18	font-family: 'Exo 2', sans-serif;
19	  text-align: center;
20	  padding-top: 4em;
21	  font-weight: 400;
22	  color: #2B2B36;
23	  font-size: 2em;
24}
25</style>
26 
27<div class="main" style="margin 0 auto;text-algin:center;"><h1>统一登录平台</h1>
28<div id="login_container" style="margin:0 auto;width:370px;height:500px;"></div>
29<div>
30 
31<script>
32 
33var redirect_uri='http://dingding.ranjuan.cn/cms/getUserCode.html'
34var appid = 'dingoaii1csc1wtn'
35 
36var state_time = Date.parse(new Date());
37 redirect_uri = encodeURIComponent(redirect_uri+'?test=test1');
38//var goto = encodeURIComponent('https://oapi.dingtalk.com/connect/oauth2/sns_authorize?appid='+appid+'&response_type=code&scope=snsapi_login&state='+state_time+'&redirect_uri='+url)
39var goto = encodeURIComponent('https://oapi.dingtalk.com/connect/oauth2/sns_authorize?appid='+appid+'&response_type=code&scope=snsapi_login&state='+state_time+'&redirect_uri='+ redirect_uri)
40 
41var obj = DDLogin({
42     id:"login_container",//这里需要你在自己的页面定义一个HTML标签并设置id，例如<div id="login_container"></div>或<span id="login_container"></span>
43     goto: goto, //请参考注释里的方式
44     style: "border:none;background-color:#FFFFFF;",
45     width : "365",
46     height: "400"
47 });
48 
49var handleMessage = function (event) {// 客户端扫码确认后触发获取loginTmpCode
50        var origin = event.origin;
51        console.log("origin", event.origin);
52        if( origin == "https://login.dingtalk.com" ) { //判断是否来自ddLogin扫码事件。
53            var loginTmpCode = event.data; //拿到loginTmpCode后就可以在这里构造跳转链接进行跳转了
54          //var redirect_uri=redirect_uri;
55            console.log("loginTmpCode", loginTmpCode);
56        //  alert( loginTmpCode);
57 
58      //window.location='https://oapi.dingtalk.com/connect/oauth2/sns_authorize?appid='+appid+'&response_type=code&scope=snsapi_login&state='+state_time+'&redirect_uri='+ redirect_uri+'&loginTmpCode='+loginTmpCode;
59      window.location='https://oapi.dingtalk.com/connect/oauth2/sns_authorize?appid='+appid+'&response_type=code&scope=snsapi_login&state='+state_time+'&loginTmpCode='+loginTmpCode;
60          //window.location=url_ding
61         // 此链接处理成功后，会302跳转到你goto参数指定的redirect_uri，并向url参数中追加临时授权码code及state两个参数。
62   
63        }
64};
65 
66if (typeof window.addEventListener != 'undefined') {
67    window.addEventListener('message', handleMessage, false);
68} else if (typeof window.attachEvent != 'undefined') {
69    window.attachEvent('onmessage', handleMessage);
70}
71 
72</script>

下面是getUserCode.html文件源码，也就是上面saoma.html里面的redirect_uri配置（理论上来讲这个html页面逻辑可以交给后端一并处理）。其实这个html主要作用是把钉钉回调后带过来的code参数，交给后端进行用户信息的获取。后端根据接口只能获取到unionid，如果想要获取到用户的userid还需要进一步的接口调用，会需要用到企业微应用的appid和appkey（这个跟扫码登录创建的appid和appkey不是同一个东西哦）

 1<head>
 2    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 3     <title></title>
 4</head>
 5<script>
 6function getUrlParam(name) {
 7    var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
 8    var r = window.location.search.substr(1).match(reg);  //匹配目标参数
 9    if (r != null) return decodeURI(r[2]); return null; //返回参数值
10}
11 
12alert('需要后端服务器请求钉钉的code：'+getUrlParam('code'));
13 
14alert('前端ajax请求后台http://dingding.ranjuan.cn/api/DingLogin?code='+getUrlParam('code')+'，等待返回code对应的用户的登录信息')
15// 将浏览器获取的code参数发送后台，由后台接口请求钉钉服务器接口，获取该code对应的unionid
16alert('后端根据code调用钉钉接口（获取unionid）https://oapi.dingtalk.com/sns/getuserinfo_bycode')
17// 后台根据unionid再去获取该unionid对应钉钉的userid
18/*
19{"errcode":0,"errmsg":"ok","user_info":{"nick":"\u5170\u5f3a","unionid":"hh0LIRUoydeY09l3ou","dingId":"$:LWCP_v1:$\/KVBpujmTsD+gK4VvTnn7g==","openid":"UmDpw5YNRSuDiPjs6Bkdrj","main_org_auth_high_level":true}}
20nick用户在钉钉上面的昵称
21 
22openid用户在当前开放应用内的唯一标识
23 
24unionid用户在当前开放应用所属企业内的唯一标识
25*/
26alert('后端根据union调用钉钉接口（获取userid）https://oapi.dingtalk.com/user/getUseridByUnionid')
27 
28 
29alert('后端根据userid查找用户信息，返回前端成功登陆的用户信息')
30//前端将token等信息存入浏览器，跳转到登陆后的首页
31 
32 
33 // htmlobj=$.ajax({url:"http://dingding.ranjuan.cn/api/DingLogin",async:false});
34 // alert('后端接口返回'+htmlobj.responseText);
35 // console.log(htmlobj.responseText);
36 
37 // 1.创建ajax对象
38		var xhr = new XMLHttpRequest();
39		// 2.告诉Ajax对象要向哪发送请求，以什么方式发送请求
40		// 1)请求方式 2)请求地址
41		xhr.open('get', 'http://dingding.ranjuan.cn/api/DingLogin?code='+getUrlParam('code'));
42		// 3.发送请求
43		xhr.send();
44		// 4.获取服务器端响应到客户端的数据
45		xhr.onload = function (){
46			// xhr.status 获取http状态码
47			console.log(xhr.responseText);
48                alert('后端接口返回'+htmlobj.responseText);
49			if (xhr.status == 400) {
50				alert('请求出错')
51			}
52		}
53		// 当网络中断时会触发onerrr事件
54		xhr.onerror = function () {
55			alert('错误404？？ 跨域？？')
56		}
57  
58</script>

用于参考的php后端。里面用到了钉钉的phpsdk（TopSdk.php钉钉SDK）。里面也包含了用于发送钉钉通知的接口demo，当时写测试用例的时候也尝试了几种不同类型的消息通知方式，可以看下面的$mms开头的数组变量做下参考！

  1<?php
  2// 指定允许其他域名访问    
  3header('Access-Control-Allow-Origin:*');    
  4// 响应类型    
  5header('Access-Control-Allow-Methods:POST');    
  6// 响应头设置    
  7header('Access-Control-Allow-Headers:x-requested-with,content-type'); 
  8 
  9error_reporting(E_ALL^E_NOTICE^E_WARNING);// 屏蔽报错代码不影响正常使用
 10$tmpcode=$_GET['code'];
 11 
 12//echo '<br>获取到tmpcode'.$tmpcode;
 13 
 14$appid='dingoaii1csc1wtn';//扫码的
 15$appsecret='8vmhlktUs12tfoSHQDI3i0Ds8-LOoSB18TsPLCFnq2hMUAFtmnjKz';
 16$appkey_qiye='dingcsf4irjarnz';// 用来定位企业内部应用-----方便获取到该钉钉用户在企业内的userid
 17$appsecret_qiye='0lGFIvW42UaYx6H5EVRgvlFS1fvwBAbmbPK6_N7gv9T_Mq_2nJ6whGr0Xb';
 18$agentId='294775567';// 用来发送通知的应用app的agentid
 19 
 20//配置结束
 21 
 22 
 23//////////////////获取accesstoken
 24 
 25$url='https://oapi.dingtalk.com/gettoken?appkey='.$appkey_qiye.'&appsecret='.$appsecret_qiye;
 26 
 27  $ch = curl_init(); 
 28 curl_setopt($ch, CURLOPT_URL, $url); 
 29   //return the transfer as a string 
 30   curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1); 
 31   // $output contains the output string 
 32   $result = curl_exec($ch); 
 33   //echo output
 34  // echo '<br><br>'.$result.'<br>';
 35   // close curl resource to free up system resources 
 36   curl_close($ch);
 37//echo '<br>----<br>';
 38//var_dump($result);
 39 
 40$accessToken_array=json_decode($result,true);
 41$accessToken=$accessToken_array['access_token'];
 42 
 43//////////////////获取accesstoken
 44//echo '<br>获取到accessToken'.$accessToken;
 45 
 46 
 47//////////////////////////获取unionid
 48include "../TopSdk.php";
 49$c = new DingTalkClient(DingTalkConstant::$CALL_TYPE_OAPI, DingTalkConstant::$METHOD_POST , DingTalkConstant::$FORMAT_JSON);
 50$req = new OapiSnsGetuserinfoBycodeRequest;
 51$req->setTmpAuthCode($tmpcode);
 52$resp=$c->executeWithAccessKey($req, "https://oapi.dingtalk.com/sns/getuserinfo_bycode",$appid,$appsecret);
 53//echo '<br>';
 54/*
 55nick用户在钉钉上面的昵称
 56openid用户在当前开放应用内的唯一标识
 57unionid用户在当前开放应用所属企业内的唯一标识
 58*/
 59 
 60//$resp=json_encode($resp);
 61//echo '<br>获取到unionid';
 62 
 63//var_dump($resp);
 64//echo '<br><br><br>';
 65 
 66$unionid=$resp->user_info->unionid;
 67 
 68//////////////////////////获取unionid
 69 
 70 
 71//////////////////////unionid 与accesstoken 获取userid  注意accesstoken获取的appkey  与appsecret    同web扫码登录的appId  appSecret
 72 
 73//include('TopSdk.php');
 74$c = new DingTalkClient(DingTalkConstant::$CALL_TYPE_OAPI, DingTalkConstant::$METHOD_GET , DingTalkConstant::$FORMAT_JSON);
 75$req = new OapiUserGetUseridByUnionidRequest;
 76$req->setUnionid($unionid);
 77$resp=$c->execute($req,$accessToken, "https://oapi.dingtalk.com/user/getUseridByUnionid");
 78//echo '<br><br>userid<br>';
 79//var_dump($resp);
 80$userid=$resp->userid;
 81/*
 82{
 83    "errcode": 0,
 84    "errmsg": "ok",
 85    "contactType": 0,
 86    "userid": "userid"
 87}
 88*/
 89//////////////////////unionid 与accesstoken 获取userid 
 90$userid->errcode==0?'':die('无该接口的调用权限');
 91 
 92 
 93 
 94 
 95//获取用户信息
 96//echo $accessToken;
 97// DingTalkConstant::$METHOD_GET 要与下面调用接口url要求的保持一致
 98$c = new DingTalkClient(DingTalkConstant::$CALL_TYPE_OAPI, DingTalkConstant::$METHOD_GET , DingTalkConstant::$FORMAT_JSON);
 99$req = new OapiUserGetRequest();
100$req->setUserid($userid);// 用户 id
101$resp=$c->execute($req, $accessToken,"https://oapi.dingtalk.com/user/get");
102$user_info=$resp;
103//echo '<br><br>用户返回信息：';
104//var_dump($resp);
105 
106//echo '<br>========================<br>';
107 
108$user_info->errcode==0?'':die('您不是本企业用户，无法登录系统');
109/*
110echo '<br><img src="'.$user_info->avatar.'" style="width:100px;"/>';
111echo '<br> 姓 名： '.$user_info->name;
112echo '<br>用户id： '.$user_info->userid;
113echo '<br>手机号： '.$user_info->mobile;
114echo '<br> 职 位： '.$user_info->position;
115*/
116 
117 
118////////////发送消息
119 
120$c = new DingTalkClient(DingTalkConstant::$CALL_TYPE_OAPI, DingTalkConstant::$METHOD_POST , DingTalkConstant::$FORMAT_JSON);
121$req = new OapiMessageCorpconversationAsyncsendV2Request();
122//$req->setUseridList($content_arr["userid"]);// 必填，与offset和limit配合使用
123$req->setUseridList($userid);//userid_list
124$req->setAgentId($agentId);
125//$req->setToAllUser(false);
126//$mms='{"msgtype":"text","text":{"content":"消息内容"}}';
127//$req->setMsg($mms);
128//$msg = new OapiMessageCorpconversationAsyncsendV2Request.Msg();
129//$msg->setMsgtype("text");
130//$msg->setText(new OapiMessageCorpconversationAsyncsendV2Request.Text());
131//$msg->getText().setContent("test123");
132$mms1=array("msgtype"=>"text",
133           "text"=>array("content"=>$user_info->name.'，您好！您已通过钉钉扫码登录系统。  '.date("Y-m-d H:i:s")." &".rand(10000,99999))
134          );
135          
136      
137$mms2['msgtype']='link'; 
138$mms2['link']['messageUrl']='https://dingding.ranjuan.cn';
139$mms2['link']['picUrl']='@lALOACZwe2Rk';
140$mms2['link']['title']=$user_info->name.' 您已登录系统';
141$mms2['link']['text']='点击查看详情~'.rand(1000,9999);
142 
143 
144$mms['msgtype']= 'oa';
145//$mms["oa"]["message_url"]= "#";
146$mms["oa"]["head"]["bgcolor"]= "FFBBBBBB";
147$mms["oa"]["head"]["text"]= "系统登录";/////向普通会话发送时有效，向企业会话发送时会被替换为微应用的名字)，长度限制为最多10个字符
148$mms["oa"]['body']['title']=date("Y-m-d H:i:s").'登录推送';
149$mms["oa"]['body']['form'][0]['key']='姓名：';
150$mms["oa"]['body']['form'][0]['value']=$user_info->name;
151$mms["oa"]['body']['form'][1]['key']='用户id：';
152$mms["oa"]['body']['form'][1]['value']=$user_info->userid;
153//$mms["oa"]['body']['rich']['num']='抽奖码：'.rand(1111,8855);//富文本
154//$mms["oa"]['body']['rich']['unit']='NO.';
155$mms["oa"]['body']['content']='已登录系统';
156$mms["oa"]['body']['image']='@lADOADmaWMzazQKA';
157$mms["oa"]['body']['file_count']='0';
158$mms["oa"]['body']['author']='系统消息';
159 
160 
161$mms4["msgtype"]="markdown";
162$mms4["markdown"]["title"]="首屏会话透出的展示内容";
163$mms4["markdown"]["text"]= "
164# 这是支持markdown的文本 \n
165## 标题2  \n
166### 标题3333  \n
167* 列表1 \n
168* 列表12222 \n
169**bold加粗显示** \n
170*italic斜体显示* \n
171> A 外事问谷歌，内事问度娘 \n
172[this is a link](https://baidu.com) \n
173![alt 啊](https://img.alicdn.com/tps/TB1XLjqNVXXXXc4XVXXXXXXXXXX-170-64.png)";
174 
175 
176$mms5["msgtype"]= "action_card";
177$mms5['action_card']['title']='店长/部门事务审批';
178$mms5['action_card']['markdown']="### 标题3333  \n 周五 \n 部门三人 张三、赵四、王五 \n 一起去 南京奥体管 \n 参加荣誉企业颁奖典礼 \n [this is a link](https://baidu.com) \n";
179$mms5['action_card']['btn_orientation']= "1";
180$mms5['action_card']['btn_json_list'][0]['title']='拒绝';
181$mms5['action_card']['btn_json_list'][0]['action_url']='https://www.baidu.com';
182$mms5['action_card']['btn_json_list'][1]['title']='同意';
183$mms5['action_card']['btn_json_list'][1]['action_url']='https://www.taobao.com';
184 
185//$mms=json_encode($mms,true);
186//echo '<br><br>'.$mms;
187 //$mms=json_encode($mms);        
188//$mms='{"msgtype":"text","text":{"content":"消息xxxxxxxxxxxxxxxxxxx内容"}}';
189//$mms='{"msgtype":"text","text":{"content":"12消息内容"}}';
190//$arrayobject = arrayToObject($mms);
191//$req->setMsg($arrayobject);
192$req->setMsg($mms);
193 
194//$req->setMsg($mms);// 虽然报错 但是可以从发送消息
195$resp=$c->execute($req, $accessToken,"https://oapi.dingtalk.com/topapi/message/corpconversation/asyncsend_v2");
196 
197//echo '<br><br>消息发送状态';
198//var_dump($resp);
199////////////发送消息
200 
201/*
202echo '<br><br><br>登录消息发送状态： ';
203echo $resp->errcode==0?'[成功]':die('[失败]');
204echo '<br>钉钉消息ID：'.$resp->task_id;
205echo '<br>request_id：'.$resp->request_id;
206*/
207session_start();
208 
209$_SESSION['userid']=$user_info->userid;
210$_SESSION['mobile']=$user_info->mobile;
211$_SESSION['name']=$user_info->name;
212$_SESSION['isadmin']=$user_info->isAdmin;
213$_SESSION['department']=$user_info->department;
214 
215$logtxt='钉钉UserId：'.$_SESSION['userid'].' '
216.'登录用户：'.$_SESSION['name'].' '
217.' 部门列表：'.json_encode($_SESSION['department']).' ';
218 
219file_put_contents("login.txt","\n ".date('Y-m-d H:i:s',time())." | 钉钉扫码登录平台         | http://".$_SERVER['SERVER_NAME'].":".$_SERVER["SERVER_PORT"].$_SERVER["REQUEST_URI"].'  |  来源：'.$_GET['referer']."\n ".$logtxt,FILE_APPEND);
220 
221header('location:'.$_GET['referer']);
222 die;
223echo '
224<script>
225localStorage.removeItem("key");//删除数据
226localStorage.setItem("key","user:'.$_SESSION['userid'].'-'.$_SESSION['userid'].'");    
227var data = localStorage.getItem("key");//获取数据
228//localStorage.removeItem("key");//删除数据
229//localStorage.clear();//删除保存的所有数据
230alert(\'已登录，请重新选择操作菜单\');
231window.location.href="http://dingding.ranjuan.cn/index.php";
232</script>
233';
234die;

有些钉钉后端调用接口可能需要将服务器ip加入钉钉开发者应用配置的ip出口白名单！

染卷不卷'blog

钉钉扫码登录前端页面(附加参考php后端&钉钉消息通知)

染卷

发表评论取消回复

染卷

发表评论 取消回复

发表评论取消回复