巧用 Vue 调用企业微信授权，轻松获取用户通讯录，扩展应用功能

2024-01-05 00:12:57

前言

在企业级应用开发中，获取用户通讯录信息往往是必不可少的。企业微信作为一款功能强大的企业通讯和协作工具，为开发者 предоставила丰富的 API 接口，其中就包括通讯录管理接口。本文将介绍如何使用 Vue 调用企业微信授权，获取用户通讯录信息，帮助开发者轻松扩展应用功能。

技术原理

企业微信授权获取通讯录信息的基本原理是：

应用首先发起授权请求，引导用户在企业微信客户端进行授权。
用户授权后，企业微信会将授权码（code）返回给应用。
应用使用授权码换取访问令牌（access token）。
使用访问令牌调用通讯录管理接口，获取用户通讯录信息。

具体步骤

1. 申请企业微信应用

在使用企业微信授权前，需要先为你的应用在企业微信平台上注册并申请。具体步骤如下：

登录企业微信管理后台，点击「我的企业」-「应用管理」-「自建应用」，然后点击「新建应用」。
选择「应用类型」为「自建应用」，填写应用信息并提交。
应用审核通过后，即可获取应用的「应用 ID」和「应用密钥」。

2. 引入 Vue 授权库

在 Vue 项目中，可以使用 vue-wechat-work 库来简化授权和通讯录获取流程。具体步骤如下：

在项目中安装 vue-wechat-work 库：

npm install vue-wechat-work

在 Vue 实例中注册授权库：

import Vue from 'vue'
import VueWeChatWork from 'vue-wechat-work'

Vue.use(VueWeChatWork, {
  // 填写你的企业微信应用 ID 和密钥
  corpId: 'YOUR_CORP_ID',
  agentId: 'YOUR_APP_ID',
  secret: 'YOUR_APP_SECRET'
})

3. 发起授权

在 Vue 组件中，可以使用 useOAuth 方法发起授权：

import { useOAuth } from 'vue-wechat-work'

export default {
  setup() {
    const { doOAuth } = useOAuth()

    // 点击按钮发起授权
    const handleOAuth = () => {
      doOAuth()
    }

    return {
      handleOAuth
    }
  }
}

4. 获取通讯录信息

授权成功后，可以在 Vue 组件中使用 useContact 方法获取通讯录信息：

import { useContact } from 'vue-wechat-work'

export default {
  setup() {
    const { getContacts } = useContact()

    // 获取通讯录信息
    const getContactList = async () => {
      const res = await getContacts()
      console.log(res.data)
    }

    return {
      getContactList
    }
  }
}