Nails two times development is divided into the following table shows three types of development, only enterprise internal application needs to JSAPI authentication.
Type |
Development method |
JSAPI Authentication |
Application Scenarios |
Third-party enterprise applications |
E Application Development |
Don't need |
Used for post to nail application market for download by users, application optional fee or free, need to collect margin and apply audit |
Enterprise Internal application |
H5 Development, also began to support E - application development in the middle of 8 months |
Need |
Can only be applied within the enterprise, cannot be posted to nail market |
Third party personal applications |
E Application Development |
Need |
Applications are not linked to the enterprise and serve the individual |
Let's take a look at the JSAPI authentication process, which is divided into four steps:
- Get token
- Get ticket
- Get a digital signature
- Set permissions
View Nail Development documentation, it gives two JSAPI authentication demo, Java and PHP, respectively, need front and back, and this article is about the pure front-end JSAPI authentication, fully realize the separation of front and rear.
The following code will use the three JS dependency packages:
Import Cryptojs from ' Crypto-js '; Encryption, used to generate a digital signature * as DD from "dingtalk-jsapi" "Axios"; HTTP request
Hint: The following code, with ES6 and ES7 some syntax, no contact with friends, can self-Baidu
1. Get token
First, the token is obtained from the nail server based on the corpid and Corpsecret parameters.
/** * *function getToken ( params) {return await Axios.get ('/proxy/gettoken ', { params }) . Then (function(response) { return response.data.access_token; });
Attentive friends will find that the URL of the Axios request does not directly specify the Oapi.dingtalk.com/gettoken, this is because directly write this URL, there will be cross-domain problems, so, here we use the proxy.
Proxy can use the Nginx Proxy or node agent, which is recommended here with node Proxy.
Because the request for Proxy is HTTPS request, I did not run through the Nginx proxy HTTPS request, if there is a friend ran through the Nginx agent, trouble to tell a sound, also learn the following.
2, set up the agent
If you create a project with VUE-CLI, you can configure it directly in the proxytable as follows:
proxytable: { '/proxy ': { ' oapi.dingtalk.com ', false, // set cross-domain true, pathrewrite: {' ^/proxy ': ' } } }
However, the above configuration can only be used in the dev development environment, if you need to use it in a production environment, or you need to write your own Nodejs code implementation, as follows:
var express = require (' Express '); var proxy = require (' Http-proxy-middleware '); var app = Express (); App.use ('/proxy ', proxy ({ ' oapi.dingtalk.com ') , true , pathrewrite: { ' ^/proxy ': '} }); App.listen (3000);
This amount of code is not very small, any Baidu under the fix.
3. Get ticket
Based on the Access_token obtained above, obtain the ticket from the nail server.
/** * *function getjsticket ( params) {return await Axios.get ('/proxy/get_jsapi_ticket ', { params }) . Then (function(response { return response.data.ticket; });}
4. Get Digital signature
Nail Nail Official Website demo is the background to generate digital signatures, through the CRYPTO-JS front-end encryption library can be ported to the front-end.
The ticket is generated above;
A nonce can be any string;
Timestamp is the current timestamp;
URL is the URL address of the current access, not including # and the following section, pay special attention to this parameter, do not make mistake. If the setting is wrong, you can view the URL address obtained by the Spike server via the dd.error output below.
/** *function getjsapisingnature (Ticket, nonce, TimeStamp, url ) {= " Jsapi_ticket= "+ Ticket +" &noncestr= "+ nonce +" ×tamp= "+ timestamp +" &url= "+ URL; = CRYPTOJS.SHA1 (plaintex). toString (); return signature;}
5. Set permissions
Setting the required permissions through Dd.config
// Step 4: Set Permissions dd.config ({ agentid:agentid, // required, Enterprise ID // required, time stamp for signature generation // required, generate a signed random string // required, signature // required, List of Jsapi to use, note: Do not bring DD. });
Jsapilist is a list of permissions, such as:
var jsapilist = [ ' Biz.user.get ', ' Device.geolocation.get ', ' Biz.util.uploadImage '];
6. Verification
Once the above configuration is successful, you will be able to invoke the function that requires authentication in Jsapi, as an example of obtaining the current location:
/** * Test code, by invoking the location service, test authentication is correct*/functionTestjsapi () {//Get LocationDd.ready (() ={dd.device.geolocation.get ({targetaccuracy:200, coordinate:1, Withregeocode:false, UseCache:true,//The default is true, if you need to get geographically frequently, set false,Onsuccess:result = { /*German coordinate result structure {longitude:number, latitude:numb Er, accuracy:number, address:string, province:s Tring, City:string, district:string, Road:strin G, Nettype:string, operatortype:string, errormess Age:string, Errorcode:number, Iswifienabled:boolean, Isgpsenabled:boolean, Isfrommock:boolean, Provider:wifi|lbs|gps, Accuracy:number, Ismobileenabled:boolean} */console.log (Result) alert ("Success:" +json.stringify (Result)}, Onfail:err={console.log (ERR) alert ("Error:" +json.stringify (err))} }); }); //Viewing authentication error messagesDd.error (function(ERR) {alert (' DD Error: ' + json.stringify (ERR)); });}
If authentication fails, the DD.ERROR will output the digital signature parameters used by the nail server, which can be compared with its own parameters.
Attached: string up the Code
AsyncfunctionGetaccesstoken () {//Step 1: Get tokenLet Access_token =await GetToken ({corpid, corpsecret}); //Step 2: Get TicketLet ticket =await Getjsticket ({access_token}); //Step 3: Get a digital signatureLet signature =getjsapisingnature (Ticket, nonce, TimeStamp, URL); //Step 4: Set PermissionsDd.config ({agentid:agentid, corpid:corpid,//required, Enterprise IDTimestamp:timestamp,//required, time stamp for signature generationNoncestr:nonce,//required, generate a random string of signaturesSignature:signature,//Required, SignatureJsapilist:jsapilist//Required , need to use the Jsapi list, note: Do not bring DD. }); //Test positioning functionTestjsapi ();}