钉钉免登陆前端操作详解
来源:互联网 发布:胡杏儿黄宗泽爱情知乎 编辑:程序博客网 时间:2024/06/05 20:23
在钉钉免登陆中,前端操作是很重要的,因为在前端我们需要调用钉钉的jsapi来获取code,而这个code值是至关重要的。所以我
代码如下:
当我们在钉钉手机版点击微应用时,微应用就访问我的demo的主页,在主页里定义了一个变量_config,这个变量是用来接收后台计算出来的验证需要的参数(详见我的博客钉钉免登详解)。然后便会去执行我们引入的demo.js文件,这个文件中所有调用的接口函数在jsapi中都有定义(在主页的代码中我们也引入了jsapi),然后我们钉钉手机版就相当于一个对象,这个对象名就是dd,我们再demo.js中调用这个对象执行了一些操作。
因为我们在获得code之后想再获得userId,所以要通过$.ajax请求后台处理程序,所以调用了jquery的$.ajax方法,用这个方法需要
引入jquery库,手机版和PC版引入的库不一样,手机版引入的是zepto.min.js,电脑版需要引入的是jquery-1.4.4.min.js,自己先下好,放到本地,然后导入到相应的主页。
至此,钉钉免登陆问题就基本解决了。
再次清清楚楚的解析一遍前端的操作。下面的是我写的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右上角看到红色的叉号,那就是错误),然后根据错误改正就好。
因为我们在获得code之后想再获得userId,所以要通过$.ajax请求后台处理程序,所以调用了jquery的$.ajax方法,用这个方法需要
引入jquery库,手机版和PC版引入的库不一样,手机版引入的是zepto.min.js,电脑版需要引入的是jquery-1.4.4.min.js,自己先下好,放到本地,然后导入到相应的主页。
至此,钉钉免登陆问题就基本解决了。
3 0
- 钉钉免登陆前端操作详解
- SQL登陆用户操作
- mac首次登陆操作
- form实现登陆操作
- ThinkPHP-登陆操作
- SourceTree 免登陆操作
- FTP登陆错误详解
- 登陆现象详解
- 登陆现象详解
- Struts1简单登陆详解
- php 登陆动作详解
- python模拟登陆详解
- 前端实战之登陆注册页
- 从登陆框看前端(转)
- SpringMVC前端获取登陆用户姓名
- 前端登陆加密和后端解密
- 常用前端操作
- jQuery 前端操作
- leetcode-20. Valid Parentheses
- 在Eclipse中使用JUnit4进行单元测试(高级篇)
- OpenGL ES着色语言-光照效果之散射光
- ExtJS5 Grid组件扩展
- jQuery父类子类选择器汇总
- 钉钉免登陆前端操作详解
- 一个app出现两个图标
- SSH Key的生成和使用
- hive的wui访问hive
- c#中的双问号 运算符(??)
- AJAX实现JSP连接数据库(Oracle)异步验证
- CTS Verifier
- RabbitMQ与java、Spring结合实例详细讲解
- 发送用户给其他APP