钉钉免登陆前端操作详解

在钉钉免登陆中，前端操作是很重要的，因为在前端我们需要调用钉钉的jsapi来获取code，而这个code值是至关重要的。所以我

再次清清楚楚的解析一遍前端的操作。下面的是我写的demo，我讲以这个demo为例进行讲解。

先是demo的主页代码：

<!DOCTYPE html>
<%@ page language="java" import="java.util.*" contentType="text/html;charset=utf-8"%>
<html><head><meta charset="utf-8"><title>dingding-1</title><script type="text/javascript">var _config = <%= controler.GetConfigs.getConfig(request) %>;</script>//调用jquery需要的库，手机版和电脑版的不同<script type="text/javascript" src="javascripts/zepto.min.js"></script>//手机版钉钉免登引入的jsapi,和电脑版引入的不同<script type="text/javascript" src="http://g.alicdn.com/ilw/ding/0.9.2/scripts/dingtalk.js"></script>//获取code码值的js文件<script type="text/javascript" src="javascripts/demo.js"></script></head><body><p id="userName">钉钉test</P><p id="userId">未知</p></body></html>

然后是调用jsapi前端的js代码文件demo.js(我放在项目的javascripts文件夹下)
代码如下：

dd.config({                                                          //实现验证agentId : _config.agentId,corpId : _config.corpId,timeStamp : _config.timeStamp,nonceStr : _config.nonceStr,signature : _config.signature,jsApiList : ['runtime.info','biz.contact.choose','device.notification.confirm', 'device.notification.alert','device.notification.prompt','biz.ding.post','biz.util.openLink' ]});dd.ready(function() {                                               //验证成功dd.runtime.permission.requestAuthCode({                         //获取code码值corpId : _config.corpId,onSuccess : function(info) {alert('authcode: ' + info.code);$.ajax({url : 'userinfo?code=' + info.code + '&corpid='     //请求后台通过code值获得userId+ _config.corpId,type : 'GET',success : function(data, status, xhr) {var info = JSON.parse(data);document.getElementById("userName").innerHTML = info.name;document.getElementById("userId").innerHTML = info.userid;},error : function(xhr, errorType, error) {logger.e("yinyien:" + _config.corpId);alert(errorType + ', ' + error);}});},onFail : function(err) {alert('fail: ' + JSON.stringify(err));}});
});dd.error(function(err) {                                             //验证失败alert("进入到error中");document.getElementById("userName").innerHTML = "验证出错";alert('dd error: ' + JSON.stringify(err));
});

当我们在钉钉手机版点击微应用时，微应用就访问我的demo的主页，在主页里定义了一个变量_config，这个变量是用来接收后台计算出来的验证需要的参数（详见我的博客钉钉免登详解）。然后便会去执行我们引入的demo.js文件，这个文件中所有调用的接口函数在jsapi中都有定义(在主页的代码中我们也引入了jsapi)，然后我们钉钉手机版就相当于一个对象，这个对象名就是dd,我们再demo.js中调用这个对象执行了一些操作。

首先得操作是验证信息，通过调用函数config()来实现，验证成功就会去执行dd.ready()这个函数中定义的函数，如果验证失败，就执行error()函数。注意，ready和error都是回调函数，要先执行config()，才会执行回调函数。并且所有的验证成功后的操作都要放在ready()中才会被执行。

最后我再总结一下常见的错误:
1.config(),ready()等接口得不到执行：
有几种原因会造成这种情况，最常见的就是你没有在手机上访问demo主页，而是随便找了一个电脑做测试访问。因为dd对象
是钉钉应用，只要在钉钉手机版访问时，才会有dd对象，相应的接口方法才会得到执行。另外一种常见的原因是你写的js文件有错误，错误就会导致js文件执行不下去，所以建议你用PC版的钉钉去调试，先下载一个PC版的钉钉RC版（RC版就是调试版），然后在RC版钉钉上找一个空白的地方右键，就能看到show DevTools,点击进去，然后你再RC版中访问一下你的微应用，相应的错误信息会在devtools的控制台中显示(你可以在devtool右上角看到红色的叉号，那就是错误)，然后根据错误改正就好。

2.$ is not define:
因为我们在获得code之后想再获得userId，所以要通过$.ajax请求后台处理程序，所以调用了jquery的$.ajax方法，用这个方法需要
引入jquery库，手机版和PC版引入的库不一样，手机版引入的是zepto.min.js，电脑版需要引入的是jquery-1.4.4.min.js，自己先下好，放到本地，然后导入到相应的主页。

至此，钉钉免登陆问题就基本解决了。

钉钉免登陆前端操作详解相关推荐

40079 钉钉_钉钉获取免登陆授权码CODE，返回：不存在的临时授权码40078
[官方正版]给孩子看的编程少儿读物 55.2元 (需用券) 去购买 > 最近在踩基于钉钉开放平台进行开发的坑,然后在进行身份认证时遇到了"钉钉获取免登陆授权码CODE,返回:不存在的临 ...
java控制mac录音代码_操作详解丨如何用 Cybery 控制 mac OS系统下的录音软件（DAW）...
原标题:操作详解丨如何用 Cybery 控制 mac OS系统下的录音软件(DAW) Cybery可以在各主流平台/操作系统下实现MIDI控制功能:mac OS(可通过蓝牙.USB线或者借助其它硬件连 ...
工程之星android版使用,安卓版工程之星软件网络1+1模式及网络cors连接操作详解...
原标题:安卓版工程之星软件网络1+1模式及网络cors连接操作详解现在,越来越多用户开始使用安卓版工程之星进行作业,科力达技术工程师总结了安卓版工程之星网络1+1模式及网络CORS连接方式操作步骤, ...
java io类库,Java利用io类库对各种文件的操作详解
Java中文网 - Java利用io类库对各种文件的操作详解 java中提供了io类库,可以轻松的用java实现对文件的各种操作.下面就来说一下如何用java来实现这些操作. 新建目录 //Strin ...
HTML5 多图片上传（前端+后台详解）
HTML5 多图片上传(前端+后台详解) 1.参考jquery插件库 2.修改代码 3.添加的后台代码 4.删除的后台代码 1.参考jquery插件库手机端实现多图片上传 2.修改代码我发现他这里 ...
switch怎么一个账号绑定各种服务器,任天堂switch主副机器介绍，ns数字版游戏共享操作详解...
原标题:任天堂switch主副机器介绍,ns数字版游戏共享操作详解任天堂在日前推送了switch主机的6.0系统,其网络会员服务Switch Online也正式上线,值得一提的是此次更新引入了主副机 ...
python输入参数改变图形_Python基于Tensor FLow的图像处理操作详解
本文实例讲述了Python基于Tensor FLow的图像处理操作.分享给大家供大家参考,具体如下: 在对图像进行深度学习时,有时可能图片的数量不足,或者希望网络进行更多的学习,这时可以对现有的图片数 ...
第 5 章 Nova - 041 - Resize Instance 操作详解
Resize Instance 操作详解 Resize 的作用是调整 instance 的 vCPU.内存和磁盘资源. Instance 需要多少资源是定义在 flavor 中的,resize 操作是 ...
SVN的Windows和Linux客户端操作详解
SVN的Windows和Linux客户端操作详解作者:尹正杰版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.Windows客户端操作 1.安装SVN客户端 a>.去官网下载svn软件 ...

钉钉免登陆前端操作详解

钉钉免登陆前端操作详解相关推荐

最新文章

热门文章