Use ww-open-data in the vue project to obtain corporate WeChat address book department information

Table of contents

1. Address book display component

1. Why use

2. How to use

1) Introduce open-data SDK into the project index.html file

2) Perform agentConfig

3) Used in pages to bind data to el-tree

4) Official document of address book display component

 2. Obtain the parameters required by wx.agentConfig

1. Get the jsapi_ticket of the application

2. Enter the front-end JS-API signature tool

3. Get timestamp, nonceStr, signature

4. Find the reason for wx.agentConfig callback failure

---

1. Address book display component

1. Why use

The corporate address book is important and sensitive data of the enterprise. Third parties will no longer directly obtain the address book data of authorized enterprises (the interface will no longer return person names and department names). If a third-party page needs to display the user's address book information, it can use the following open-data component to provide a more secure and better experience.

2. How to use

1) Introduce open-data SDK into the project index.html file

<script src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js" referrerpolicy="origin"></script>
<script src="https://open.work.weixin.qq.com/wwopen/js/jwxwork-1.0.0.js" referrerpolicy="origin"></script>

2) Perform agentConfig

mounted() {
    this.agentConfig()
},

methods: {
        agentConfig() {
                //调用后端接口获取wx.agentConfig需要的参数
                this.$axios({
                    url: 'http://*****************',
                    method: 'GET',
                    params: {},

                }).then(res => {
                    if (res.data.code === 200) {
                        //通过返回数据填写以下空白部分
                        wx.agentConfig({
                            corpid: '', // 必填，企业微信的corpid，必须与当前登录的企业一致
                            agentid: '', // 必填，企业微信的应用id （e.g. 1000247）
                            timestamp: '', // 必填，生成签名的时间戳
                            nonceStr: '', // 必填，生成签名的随机串
                            signature: '', // 必填，签名，见附录-JS-SDK使用权限签名算法
                            jsApiList: ['selectExternalContact'], //必填，传入需要使用的接口名称
                            success: function (result) {
                                console.log(result, '请求微信成功')
                                //  wx.agentConfig成功回调后，WWOpenData 才会注入到 window 对象上面
                                window.WWOpenData.bind(document.querySelector('ww-open-data'))
                            },
                            fail: function (res) {
                                console.log('查看错误信息' + res)
                                if (res.errMsg.indexOf('function not exist') > -1) {
                                    alert('版本过低请升级')
                                }
                            },
                        })
                    }
                })
            },
}

3) Used in pages to bind data to el -tree

    <el-tree
                :data="departmentTreeData"
                :props="treeDataProps"
                @node-click="nodeClick"
                node-key="id"
                draggable
                :default-expand-all="false"
        >
            <span class="custom-tree-node" slot-scope="{ node }">
                <span>
                    <ww-open-data type='departmentName' :openid='node.data.departmentId'></ww-open-data>
                </span>
            </span>
     </el-tree>

Precautions:

1. The legal values ​​of type can only be userName (user name), departmentName (department name)

2. If type=userName, openid corresponds to userid.

      If type=departmentName, openid corresponds to departmentid.

      A maximum of 1000 open-data elements can be bound every 20ms, and the excess will be ignored.

4) Official document of address book display component

 2. Obtain the parameters required by wx.agentConfig

The parameters are all returned by the backend, but if the backend interface has not been written yet, then create a data test yourself first.

Corpid and agentid are not explained in detail, but how to obtain timestamp, nonceStr, and signature are explained in detail.

1. Get the jsapi_ticket of the application

Open the Enterprise WeChat Developer Center document and enter https://qyapi.weixin.qq.com/cgi-bin/ticket/get?access_token=ACCESS_TOKEN&type=agent_config in the browser address bar

 Replace access_token with your own, and the ticket obtained in the return result is jsapi_ticket

2. Enter the front-end JS-API signature tool

 

3. Get timestamp, nonceStr, signature

Fill in the contents of 1 2 3 in the above figure into the parameters of wx.agentConfig, and print the information on the console to check whether the callback is successful. If successful, WWOpenData can be injected into the window object, and the dom node will display the corresponding information. Otherwise, the failure information will be printed, and the cause of the error can be found based on the failure code.

4. Find the reason for wx.agentConfig callback failure

Query through the server-side API error code query tool

Precautions:

1. You cannot enter the successful callback in the development environment because the URL is a trusted domain name of the third-party service provider, so the effect must be seen in the production environment.