在釘釘免登陸中，前端操作是很重要的，因?yàn)樵谇岸宋覀冃枰{(diào)用釘釘?shù)膉sapi來(lái)獲取code，而這個(gè)code值是至關(guān)重要的。所以我
再次清清楚楚的解析一遍前端的操作。下面的是我寫的demo，我講以這個(gè)demo為例進(jìn)行講解。
先是demo的主頁(yè)代碼：
- <!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>
-
- //調(diào)用jquery需要的庫(kù)，手機(jī)版和電腦版的不同
- <script type="text/javascript" src="javascripts/zepto.min.js">
- </script>
-
- //手機(jī)版釘釘免登引入的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>
然后是調(diào)用jsapi前端的js代碼文件demo.js(我放在項(xiàng)目的javascripts文件夾下)
代碼如下：
- dd.config({ //實(shí)現(xiàn)驗(yàn)證
- 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() { //驗(yàn)證成功
-
- dd.runtime.permission.requestAuthCode({ //獲取code碼值
- corpId : _config.corpId,
- onSuccess : function(info) {
- alert('authcode: ' + info.code);
- $.ajax({
- url : 'userinfo?code=' + info.code + '&corpid=' //請(qǐng)求后臺(tái)通過(guò)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) { //驗(yàn)證失敗
- alert("進(jìn)入到error中");
- document.getElementById("userName").innerHTML = "驗(yàn)證出錯(cuò)";
- alert('dd error: ' + JSON.stringify(err));
- });
當(dāng)我們?cè)卺斸斒謾C(jī)版點(diǎn)擊微應(yīng)用時(shí)，微應(yīng)用就訪問(wèn)我的demo的主頁(yè)，在主頁(yè)里定義了一個(gè)變量_config，這個(gè)變量是用來(lái)接收后臺(tái)計(jì)
算出來(lái)的驗(yàn)證需要的參數(shù)（詳見我的博客釘釘免登詳解）。然后便會(huì)去執(zhí)行我們引入的demo.js文件，這個(gè)文件中所有調(diào)用的接口函數(shù)在jsapi中都有定義(在主頁(yè)的代碼中我們也引入了jsapi)，然后我們釘釘手機(jī)版就相當(dāng)于一個(gè)對(duì)象，這個(gè)對(duì)象名就是dd,我們?cè)賒emo.js中調(diào)用這個(gè)對(duì)象執(zhí)行了一些操作。
首先得操作是驗(yàn)證信息，通過(guò)調(diào)用函數(shù)config()來(lái)實(shí)現(xiàn)，驗(yàn)證成功就會(huì)去執(zhí)行dd.ready()這個(gè)函數(shù)中定義的函數(shù)，如果驗(yàn)證失敗，就執(zhí)行error()函數(shù)。注意，ready和error都是回調(diào)函數(shù)，要先執(zhí)行config()，才會(huì)執(zhí)行回調(diào)函數(shù)。并且所有的驗(yàn)證成功后的操作都要放在ready()中才會(huì)被執(zhí)行。
最后我再總結(jié)一下常見的錯(cuò)誤:
1.config(),ready()等接口得不到執(zhí)行：
有幾種原因會(huì)造成這種情況，最常見的就是你沒有在手機(jī)上訪問(wèn)demo主頁(yè)，而是隨便找了一個(gè)電腦做測(cè)試訪問(wèn)。因?yàn)閐d對(duì)象
是釘釘應(yīng)用，只要在釘釘手機(jī)版訪問(wèn)時(shí)，才會(huì)有dd對(duì)象，相應(yīng)的接口方法才會(huì)得到執(zhí)行。另外一種常見的原因是你寫的js文件有錯(cuò)誤，錯(cuò)誤就會(huì)導(dǎo)致js文件執(zhí)行不下去，所以建議你用PC版的釘釘去調(diào)試，先下載一個(gè)PC版的釘釘RC版（RC版就是調(diào)試版），然后在RC版釘釘上找一個(gè)空白的地方右鍵，就能看到show DevTools,點(diǎn)擊進(jìn)去，然后你再RC版中訪問(wèn)一下你的微應(yīng)用，相應(yīng)的錯(cuò)誤信息會(huì)在devtools的控制臺(tái)中顯示(你可以在devtool右上角看到紅色的叉號(hào)，那就是錯(cuò)誤)，然后根據(jù)錯(cuò)誤改正就好。
2.$ is not define:
因?yàn)槲覀冊(cè)讷@得code之后想再獲得userId，所以要通過(guò)$.ajax請(qǐng)求后臺(tái)處理程序，所以調(diào)用了jquery的$.ajax方法，用這個(gè)方法需要
引入jquery庫(kù)，手機(jī)版和PC版引入的庫(kù)不一樣，手機(jī)版引入的是zepto.min.js，電腦版需要引入的是jquery-1.4.4.min.js，自己先下好，放到本地，然后導(dǎo)入到相應(yīng)的主頁(yè)。
至此，釘釘免登陸問(wèn)題就基本解決了。
本站僅提供存儲(chǔ)服務(wù)，所有內(nèi)容均由用戶發(fā)布，如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容，請(qǐng)
點(diǎn)擊舉報(bào)。
