企业微信从自建h5应用=>推送

前言

xxxxx

1. 创建企业

官网链接：企业微信 (qq.com)

创建成功后，扫码登录管理页面

2. 创建自建应用

1.进入应用管理

2.点击创建应用

3. 应用配置

#1. 点击设置应用主页

#2. 网页网址：如果需要在打开的网页里面携带用户的身份信息，需要构造链接来获取code

官方文档：构造网页授权链接 - 文档 - 企业微信开发者中心 (qq.com)

https://open.weixin.qq.com/connect/oauth2/authorize?appid=CORPID&redirect_uri=REDIRECT_URI&response_type=code&scope=snsapi_base&state=STATE&agentid=AGENTID#wechat_redirect

REDIRECT_URI:授权后重定向的回调链接地址，请使用urlencode对链接进行处理

CORPID:企业的CorpID

tip: 如果没有企业id，可以去通讯录里设置一下部门

4. 添加可信域名与企业可信ip

#1 可信域名

域名输入完成后，点击申请校验域名

根据提示，将下载的文件放到域名的根目录下（我用的是win+iis部署的）

#2 可信ip

不填可信ip，完成不了获取用户信息之类的操作

5. 从进入应用~推送信息（demo）

前端用的vue3，写接口用的node.js

前端路由：

router

import { createRouter, createWebHistory } from 'vue-router'

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/',
      name: 'home',
      component: ()=>import('@/views/home/index.vue')
    },
  ]
})

export default router

接口：

node：

pnpm i aixos
pnpm i express

// 允许跨域
app.use(function (req, res, next) {
  res.header('Access-Control-Allow-Origin', '*') 
  res.header('Access-Control-Allow-Methods', '*')
  res.header('Access-Control-Allow-Headers', '*')
  res.header('Access-Control-Allow-Credentials', true)
  next()
})

5.1 获取code

在 应用配置-网页网址填写好之后，选择了始终进入主页，点击工作台里的应用，就可以跳转到准备好的前端页面，在该页面，我们就能获取到code

官方文档：构造网页授权链接 - 文档 - 企业微信开发者中心 (qq.com)

@/views/home/index.vue

<template>
  code: {{ query?.code }} 
</template>

<script setup>
import { onMounted, ref } from 'vue';
import { useRoute } from 'vue-router';
const route = useRoute();
const query = ref();
onMounted(() => {
  query.value = route.query;
});


</script>

<style scoped>
button {
  margin: 10px;
  height: 30px;
}
</style>

5.2 获取accessToken

获取access_token是调用企业微信API接口的第一步，相当于创建了一个登录凭证，其它的业务API接口，都需要依赖于access_token来鉴权调用者身份。

官方文档：获取access_token - 文档 - 企业微信开发者中心 (qq.com)

CORPID 我的企业 => 企业信息 => 企业id

CORPSECRET

接口代码

// corpid 我的企业 => 企业信息 => 企业id
const CORPID = 'wwd-------946'
const CORPSECRET = 'nj7WPBsRQ---------2Qlwmn2aBWM'

// 获取accessToken
app.get('/qywx/getAccessToken', async (req, res) => {
  try {
    const response = await axios.get(
      `https://qyapi.weixin.qq.com/cgi-bin/gettoken?corpid=${CORPID}&corpsecret=${CORPSECRET}`
    )
    if (response.data.errcode === 0) {
      // 成功获取到access_token
      res.json({
        success: true,
        accessToken: response.data.access_token,
      })
    } else {
      // 处理错误情况
      res.status(500).json({
        success: false,
        message: `Failed to get access token: ${response.data.errmsg}`,
      })
    }
  } catch (error) {
    console.error(error)
    res.status(500).json({
      success: false,
      message: 'An error occurred while fetching access token',
    })
  }
})

5.3 获取访问用户身份

5.4 推送消息（全体）

官方文档：发送应用消息 - 文档 - 企业微信开发者中心 (qq.com)

这边就发一个最简单的全体的文字消息

app.use(express.json()); // post需要的设置
// 发送文本消息的接口
app.post('/qywx/sendTextMessage', async (req, res) => {
  try {
    // 从请求体中获取参数
    console.log(req.body);
    console.log(1111111111111111111111);
    const { touser, content,accessToken, } = req.body
    console.log('accessToken', accessToken, 'touser', touser, 'content', content);

    // 构建请求体
    const requestBody = { 
      touser: touser || '@all', //指定接收消息的成员。 
      toparty: '@all',
      totag: '@all',
      msgtype: 'text',
      agentid: 1000002, // 应用详情里获得
      text: {
        content: content,// 推送的消息
      },
      safe: 0,
      enable_id_trans: 0,
      enable_duplicate_check: 0,
      duplicate_check_interval: 1800,
    }

    // 发送POST请求到企业微信API
    const response = await axios.post(
      `https://qyapi.weixin.qq.com/cgi-bin/message/send?access_token=${accessToken}`,
      requestBody
    )

    // 检查响应状态
    if (response.data.errcode === 0) {
      res.json({ success: true, message: '消息发送成功' })
    } else {
      res.status(500).json({ success: false, error: response.data.errmsg })
    }
  } catch (error) {
    console.error(error)
    res.json({ success: false, error })
  }
})

vue3

<script setup>
import axios from 'axios';
import { onMounted, ref } from 'vue';
import { useRoute } from 'vue-router';

const route = useRoute();
const query = ref();// 参数

onMounted(() => {
  query.value = route.query;
});

const accessToken = ref();
const userInfo = ref();

// 获取accessToken
const getAccessTokenFn = async () => {
  const res = await axios.get('http://xxx/qywx/getAccessToken');
  console.log(res.data);
  accessToken.value = res.data.accessToken;
};

// 根据code/access_token获取用户身份
const getUserInfoFn = async () => {
  const res = await axios.get('http://xxx/qywx/getUserInfo', {
    params: {
      access_token: accessToken.value,
      code: query.value.code,
    },
  });
  console.log(res);
  userInfo.value = res.data.userInfo.user_ticket;
};

// 发送消息
const sendMsgFn = async (val) => {
  const res = await axios.post('http://xxx/qywx/sendTextMessage', {
    accessToken: accessToken.value,
    touser: val,
    content: 'hello',
  });
  console.log(res);
};
</script>