DingTalk Enterprise Internal-H5 Micro Application Development

Foreword

The company needs to use DingTalk-related API to complete the company's internal reimbursement platform.

Project construction

1. Create H5 Microapp

Log in to DingTalk Open Platform (https://open-dev.dingtalk.com/#/index), enter "Application Development" -> Internal Development of H5 Micro-Apps -> Create Application, and fill in basic information and configuration development information

Note: Application home page link: vscode needs to install the Liver Server plug-in, open the home page in this way, replace the IP address of the obtained address with the local IP address, and get the application home page link.

2. JSAPI authentication API development

(1) Development of JSAPI authentication server API:

① Obtain the call interface certificate AccessToken through appKey and appSecret (https://oapi.dingtalk.com/gettoken?               appkey=appKey&appsecret=appSecret)

②Get a temporary ticket Ticket for JSAPI through AccessToken(https://oapi.dingtalk.com/get_jsapi_ticket?access_token=ACCESS_TOKEN)

I will not write the details of the backend. If you are interested, you can take a look at Dingding Server API Development Document

(2) Development of JSAPI authentication front-end API:

The front end obtains the JSAPI authentication configuration information of the server by sending a request.

 if (!localStorage.getItem('sessionId')) {console.log("Authentication started");//App homepage linkvar datas = { "url": "http://192.168.0.66:5500/html/index.html" };apiRequest('post', 'ding_talk/config', datas, function (data) {_config = data.row;dd.config({agentId: _config.agentId, // required, micro application IDcorpId: _config.corpId,//required, enterprise IDtimeStamp: _config.timeStamp, // Required, the timestamp for generating the signaturenonceStr: _config.nonceStr, // Required, generate a random string for signaturesignature: _config.signature, // required, signaturetype: 0, //Optional.0 means the jsapi of the micro application, 1 means the jsapi of the service window; if not filled, the default is 0.This parameter is supported since version 0.8.3 of dingtalk.jsjsApiList: []});dd.ready(function () {console.log('Authentication successful');//Log in});dd.error(function (err) {window.localStorage.setItem("sessionId", '');console.log('dd error: ' + JSON.stringify(err));});}, function (res) {dd.error(function (err) {console.log('dd error: ' + JSON.stringify(err));});console.log(res);});}

(3) H5 micro-app free login (users automatically log in to the app)

After the backend gets the login authorization code, it obtains the user information through the server API (/user/getuserinfo) and returns it.

dd.runtime.permission.requestAuthCode({corpId: _config.corpId, // enterprise idonSuccess: function (info) {code = info.code; // User identity information can be obtained through the login-free authorization code//Log inapiRequest('post', 'ding_talk/login', { "code": code }, function (data) {window.localStorage.setItem("sessionId", data.row.sessionId);window.localStorage.setItem("userId", data.row.userId);}, function (res) {console.log(res);})},onFail: function (res) {window.localStorage.setItem("sessionId", '');}});

For details on the front-end, see Front-end API Development Documentation