前端对接钉钉的步骤以及代码

对接钉钉的步骤:

第一步首先项目安装dd
$ cnpm install dingtalk-jsapi --save

前端对接钉钉的步骤以及代码_第1张图片

第二步项目中所需要的文件中引入dd
import React, {
      Component } from 'react';
import * as dd from 'dingtalk-jsapi';	//全部引入,也可以局部引入

export default class DDLogin extends Component {
     
  componentDidMount() {
     
    const outThis = this;
    dd.ready(() => {
     
      dd.runtime.permission.requestAuthCode({
     
        corpId: 'xxxxxxx',	//后端给提供的企业id,这里是固定写死的,也可以发请求获取过来。
        onSuccess(result) {
     	//如果上面的corpId和其他的情况都没出错就会走onSuccess
          const {
      code } = result;
          outThis.determineIfLoginIsRequired(code);		//注意this的指向。这里指向你要进行的操作函数。
        },
        onFail(err) {
     	//如果出错了就会走onFail,在这里alert出问题原因。
          alert('fail');
          alert(JSON.stringify(err));
        },
      });
    });
  }

  // 你要进行的操作函数
  determineIfLoginIsRequired = (code) => {
     
    // your code。。。
  }

  render() {
     
    return (
      <div style={
     {
      textAlign: 'center', lineHeight: '100vh' }}>
        钉钉登录页面
      </div>
    );
  }
}

对接钉钉最大的问题就是前端调试起来不方便,需要后端的反复部署,下面是解决办法的链接:

https://blog.csdn.net/weixin_43606158/article/details/97632401

你可能感兴趣的:(项目实战,前端对接钉钉的步骤以及代码,前端对接钉钉的注意事项,前端对接钉钉,对接钉钉,前端开发钉钉)