微信公众号网页授权获取用户信息（客户端/node服务端）

利用微信公众平台接口测试帐号申请获取测试appID、appsecret。

• 流程

1. 第一步：用户同意授权，获取code
2. 第二步：通过code换取网页授权access_token
3. 第三步：刷新access_token（如果需要）
4. 第四步：拉取用户信息(需scope为 snsapi_userinfo)

• 直接上图

直接上代码（客户端代码）

/**
 *  公众号授权获取用户信息 客户端
 *  getCode()获取code
 *  getUserInfo(code)根据code获取用户信息
 * 
*/

import React, { useEffect } from "react";
import { getQueryString } from "@/utils";
import { getCode, getUserInfo } from './server';

const Authorize = () => {
  //微信授权反的code
  const code = getQueryString("code") || "";

  const getUser = () => {
    if (!code) {
      getCode();
    } else {
      getUserInfo(code);
    }
  }

  useEffect(() => {
    getUser()
  }, [])

  return (
    <div className="endImgBox">
      <img src="https://img.kaikeba.com/a/95442151302202fwsw.png" alt="" />
      <span>授权获取用户信息</span>
    </div>
  );
};

export default Authorize;

/*
*客户端请求接口
*/
import request from '@/utils/request';

// 获取code
export const getCode = async () => {
  const res = await request.get('http://10.20.56.113:3000/getCode')
  return res
}

// 获取用户信息
export const getUserInfo = async (code) => {
  const res = await request.post('http://10.20.56.113:3000/getUserInfo', { code })
  return res;
}

服务端代码

/*
* node服务端
* 搭建服务端实现获取微信公众号用户信息
* 安装 express、axios、body-parser、dotenv、cors
*/
const app = require('express')();
const { default: axios } = require('axios');
const bodyParser = require('body-parser');
const cors = require('cors');
require('dotenv').config();

app.use(bodyParser.json());
app.use(cors());

app.get('/getCode', async (req, res) => {
  const url = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${process.env.APPID}&redirect_uri=${encodeURIComponent(
    'http:10.20.56.113:4000'
  )}&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redire`;
  console.log("url", url)
  res.send(url);
});

//获取用户信息
app.post('/getUserInfo', async (res, rej) => {
  const code = rqe.body.code；
  const access_tokenUrl = `https://api.weixin.qq.com/sns/oauth2/access_token?appid=${process.env.APPID}&secret=${process.env.APPSECRET}&code=${code}&grant_type=authorization_code`
  let token = (await axios.get(access_tokenUrl)).data.access_token
  const userInfoUrl = ` https://api.weixin.qq.com/sns/userinfo?access_token=${token}&openid=${process.env.APPID}&lang=zh_CN`;
  const userinfo = (await axios.get(userInfoUrl)).data;
  console.log('userinfo', userinfo)
  res.send(userinfo)
})

app.listen('3000', () => {
  console.log('http://localhost:3000')
})

微信公众号网页授权官方文档

developers.weixin.qq.com/doc/offiacc…