【统一授权套件SDK】



【接入流程】

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逻辑一致，第二次进入就会提示如图：

所以在调用授权之前，需要添加一些逻辑，判断是否需要进行授权！！！