钉钉小程序免登录授权
0. 权限申请
1. 安装JS SDK
插件
npm install dingtalk-design-libs --save
2. 应用授权对接
2.1 、 2.2 均在App.js文件内操作
2.1 引入钉钉统一授权套件SDK
import { onAuthAppBack } from 'dingtalk-design-libs/biz/openAuthMiniApp';
2.2 添加onAuthAppBack调用
onShow(options) {
onAuthAppBack(options, (data) => {
// 这里可以对返回数据做二次处理,之后需要把数据返回到page.onShow
dd.alert({
title: 'app is onAppShow have data :' + JSON.stringify(data),
});
return data;
});
},
3. 在小程序需要授权的页面,使用授权SDK
例如page/mine/mine.js 通过openAuthMiniApp
唤起授权套件
3.1 、 3.2、3.3、3.4 均在mine.js文件内操作
3.1 引入插件
import { openAuthMiniApp, disposeAuthData } from 'dingtalk-design-libs/biz/openAuthMiniApp';
3.2 定义唤起套件的方法
注意把clientId
换成自己小程序的appKey
/**
* 通过openAuthMiniApp唤起授权套件
*/
onTap() {
return openAuthMiniApp({
path: 'pages/home/home', //不要改!!! 这里是小程序dingwlanwvdmrtjjwdmd下的一个页面地址
panelHeight: 'percent50',
extraData: {
clientId: '这里需要替换成自己小程序的appKey', // 应用ID(唯一标识)
rpcScope: 'Contact.User.Read',
fieldScope: 'Contact.User.mobile',
type: 0,
ext: JSON.stringify({}),
from: ''
}
});
},
3.3 使用page.onShow方法调用disposeAuthData处理授权后的结果
onShow(e) {
/**
* 调用disposeAuthData处理授权后的结果
*/
disposeAuthData((options) => {
console.log('options',options)
dd.alert({
title: 'disposeAuthData',
content: JSON.stringify(options)
})
})
},
3.4 唤起套件
定义的onTap
方法在合适的地方调用即可
如:
onLoad() {
this.onTap()
}
3.5 真机调试
如果提示应用没申请该权限,请往上翻看文章开头的权限申请
如果一切配置正确,就会出现如图:
4. 授权逻辑
如果是如3.4逻辑一致,第二次进入就会提示如图:
所以在调用授权之前,需要添加一些逻辑,判断是否需要进行授权!!!