1. 微信授权概述

  1. 引导用户访问授权页面：通过微信提供的API生成授权链接，引导用户点击进入。
  2. 用户登录并授权：用户在授权页面登录微信账户，并根据应用需求选择授权内容。
  3. 获取授权码：微信服务器将向第三方应用返回授权码，用于获取用户信息。
  4. 获取用户信息：使用授权码调用微信API，获取用户信息。

2. Vue微信授权实现

2.1 准备工作

  1. 申请公众号：在微信公众平台申请公众号，并获取AppID和AppSecret。
  2. 绑定域名：在公众号后台绑定您的应用域名。
  3. 配置回调地址：设置授权后重定向的回调地址。

2.2 生成授权链接

使用以下代码生成授权链接：

function getAuthUrl() {
  const appid = 'YOUR_APPID';
  const redirectUri = 'YOUR_REDIRECT_URI';
  const scope = 'snsapi_userinfo';
  const state = 'YOUR_STATE';

  return `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appid}&redirect_uri=${encodeURIComponent(redirectUri)}&response_type=code&scope=${scope}&state=${state}#wechat_redirect`;
}

2.3 处理授权回调

const axios = require('axios');

async function getAccessToken(code) {
  const appid = 'YOUR_APPID';
  const secret = 'YOUR_APPSECRET';
  const redirectUri = 'YOUR_REDIRECT_URI';
  const url = `https://api.weixin.qq.com/sns/oauth2/access_token?appid=${appid}&secret=${secret}&code=${code}&grant_type=authorization_code&redirect_uri=${encodeURIComponent(redirectUri)}`;

  const response = await axios.get(url);
  return response.data.access_token;
}

2.4 获取用户信息

async function getUserInfo(accessToken, openid) {
  const url = `https://api.weixin.qq.com/sns/userinfo?access_token=${accessToken}&openid=${openid}&lang=zh_CN`;

  const response = await axios.get(url);
  return response.data;
}

3. 总结