微信公众号关注与用户绑定实现指南

tl;dr: 详细介绍如何在网页中实现引导用户关注公众号、完成用户绑定，以及后续进行模板消息推送的完整解决方案。

功能概述

在很多场景下，我们需要让用户关注公众号并完成账号绑定，以便后续能够通过模板消息推送重要通知。本文将详细介绍如何实现这一功能。

实现步骤

1. 准备工作

首先需要准备以下内容：

一个已认证的微信公众号（订阅号无法实现模板消息推送）
在微信公众平台后台配置好网页授权域名
后端服务器用于处理微信接口调用

2. 引导关注公众号

2.1 生成带参数二维码

通过微信公众号的接口生成带参数的二维码，用于识别用户身份：

// 后端示例代码（Node.js）
const axios = require('axios');

async function generateQrCode(sceneStr) {
  const accessToken = await getAccessToken(); // 获取access_token的方法
  const url = `https://api.weixin.qq.com/cgi-bin/qrcode/create?access_token=${accessToken}`;
  
  const response = await axios.post(url, {
    expire_seconds: 2592000, // 30天有效期
    action_name: 'QR_STR_SCENE',
    action_info: {
      scene: {
        scene_str: sceneStr // 可以是用户ID或其他标识
      }
    }
  });
  
  return `https://mp.weixin.qq.com/cgi-bin/showqrcode?ticket=${response.data.ticket}`;
}

2.2 前端展示二维码

<template>
  <div class="qr-container">
    <img :src="qrCodeUrl" alt="关注公众号" />
    <p>请使用微信扫码关注公众号</p>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'

const qrCodeUrl = ref('')

onMounted(async () => {
  const response = await fetch('/api/generate-qrcode')
  const data = await response.json()
  qrCodeUrl.value = data.url
})
</script>

3. 处理用户关注事件

当用户扫码关注公众号时，微信服务器会发送事件通知到我们配置的服务器地址：

// 后端示例代码（Node.js + Express）
app.post('/wechat/callback', (req, res) => {
  const xml = req.body // 使用相关中间件解析XML
  
  if (xml.Event === 'subscribe') {
    // 处理关注事件
    const sceneStr = xml.EventKey.replace('qrscene_', '') // 获取场景值
    const openId = xml.FromUserName
    
    // 保存用户关注信息
    await saveUserSubscribe(openId, sceneStr)
  }
  
  res.send('success')
})

4. 网页授权获取用户信息

用户关注后，需要获取用户基本信息并完成账号绑定：

// 前端实现
const authUrl = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appId}&redirect_uri=${encodeURIComponent(redirectUrl)}&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect`

// 后端处理授权回调
app.get('/wechat/oauth/callback', async (req, res) => {
  const code = req.query.code
  
  // 1. 通过code获取access_token
  const tokenRes = await getAccessToken(code)
  
  // 2. 通过access_token获取用户信息
  const userInfo = await getUserInfo(tokenRes.access_token, tokenRes.openid)
  
  // 3. 保存用户信息并绑定账号
  await bindUserAccount(userInfo)
})

5. 发送模板消息

完成绑定后，就可以向用户发送模板消息：

async function sendTemplateMessage(openId, templateId, data) {
  const accessToken = await getAccessToken()
  const url = `https://api.weixin.qq.com/cgi-bin/message/template/send?access_token=${accessToken}`
  
  const response = await axios.post(url, {
    touser: openId,
    template_id: templateId,
    data: {
      first: {
        value: data.title,
        color: "#173177"
      },
      keyword1: {
        value: data.content
      },
      // ... 其他模板字段
      remark: {
        value: data.remark
      }
    }
  })
  
  return response.data
}

注意事项

安全性考虑
- 所有敏感接口都需要进行签名验证
- access_token 要安全存储并及时刷新
- 用户信息要进行加密存储
用户体验优化
- 提供清晰的引导提示
- 在微信内打开时使用 JS-SDK 实现更好的体验
- 考虑用户取消授权的情况
开发建议
- 本地开发时可使用 ngrok 等工具进行调试
- 建议封装统一的微信 API 调用模块
- 做好错误处理和日志记录

总结

通过以上步骤，我们就实现了一个完整的公众号关注、用户绑定和消息推送流程。这个方案可以根据具体业务需求进行调整和扩展。