钉钉h5微应用调试整理

钉钉 H5微应用整理

1.申请H5微应用
2.登录
3.调试

1.申请H5微应用

https://open.dingtalk.com/ 登录钉钉开发平台。

应用appId、CorpId都可以在网站上自行查找
应用首页地址（指手机端显示地址）

pc端首页地址（指电脑端显示地址）

我这写的2个项目（应用首页和pc端首页），不是一个项目

应用需要在平台发布后才能看到

2.登录

1.安装钉钉插件

复制代码

方法一： npm install dingtalk-jsapi --save

方法二：

复制代码

 <script src="https://g.alicdn.com/dingding/h5-dingtalk-login/0.21.0/ddlogin.js"></script>

2.创建getCode.js 获取钉钉code 便于登录

复制代码

 import { getJSapi } from "@/api/login";
export function getCode(callback) {
  if (dd.env.platform !== "notInDingTalk") {
    dd.ready(() => {
      //使用SDK 获取免登授权码
     dd.runtime.permission.requestAuthCode({
      corpId:store.state.user.corpId,
      onSuccess: (info) => {
        // 根据钉钉提供的api 获得code后,再次调用这个callback方法
        // 由于是钉钉获取code是异步操作,不知道什么时候执行完毕
        // callback 函数会等他执行完毕后在自己调用自己
        callback(info.code)
      },
      onFail: (err) => {
        alert('fail');
        alert(JSON.stringify(err));
      },
    });
    });
  }
}

3.在login.vue页面引用

复制代码

//获取钉钉code
	import {
		getCode
	} from "@/utils/js/getCode.js";

methods: {
			//获取钉钉code
			getddCode() {
				getCode(code => {
					//拿到钉钉code 到后台交换token
					// 获取用户验证的token
					this.loadGetAccessToken(code);
				});
			},
			loadGetAccessToken(code) {
				let that = this
				DDLogin({//后台接口
					code: code
				}).then(res => {
				//其他操作 如账号存储、页面跳转等
				})
		}