10分钟带你完成微信网页授权&获取用户信息&搭建内网映射测试前端

前言大家平时在工作中，或多或少应该接触过微信鉴权登录，获取用户信息的相关需求。也有小伙伴经常会在群里问一些相关的问题，比如

鉴权登录的整体流程是什么？
整个流程里面，前端和后端的分工是什么？
前端专门准备了一个鉴权回调页面，要怎么回到鉴权前的页面？
怎么在本地测试微信网页授权？

先看看微信官方的鉴权流程怎么描述的

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

还是懵，没关系，我在这里专门准备了一个小，来实现了一套简易版的网页授权+获取用户信息的功能，整个流程大概是这样的

文章图片

在这个流程中，前端不用做太多事，只需要判断有没有用户信息，如果没有，剩下的事情交给服务端，等服务端全部处理完成，会带着用户信息，返回之前的页面。
并且前端无需准备专门的授权结果页。
流程第一步：内网映射
下载软件

下载地址：ngrok.com/download

文章图片

【10分钟带你完成微信网页授权&获取用户信息&搭建内网映射测试】解压出来之后是这个东西

文章图片

终端启动
将解压出来的文件拖到终端中，紧接着写http 3000，意思就是用ngrok在3000端口上开启一个http映射隧道。

文章图片

启动之后出现下面这个界面，就说明成功了。

文章图片

这个就是我们需要的域名：https://0772-183-159-254-252....
第二步：微信测试号
登录测试账号

登录地址：mp.weixin.qq.com/debug/cgi-b…

文章图片

目前我们拿到了appID和appsecret，接口配置信息和JS接口安全域名先暂时不用管，网页授权用不到。

修改授权回调域名

网页向下翻，翻到网页服务 => 网页账号 => 修改

文章图片

将之前拿到的内网映射地址填进来，注意不要写https://

文章图片

扫码关注测试号
因为如果不关注，测试授权会报错的
第三步：搭建项目

这里我们使用express这个node框架

package.json

{ "name": "simple-wx-auth-by-express", "version": "1.0.0", "scripts": { "start": "node index.js" }, "dependencies": { "axios": "^0.21.4", "express": "^4.17.1" }, "devDependencies": {} }

index.js

注意将之前内网映射的地址、微信测试号的appID和appsecret填写到对应的位置；

const express = require('express'); const app = express(); const axios = require('axios'); const port = 3000; // 启动端口const SERVICE_URL = 'https://0772-183-159-254-252.ngrok.io'; // 服务器地址，把内网映射的地址填写到这里 const appID = ''; // 微信测试号的appid const appsecret = ''; // 微信测试号的appsecret/** * @description 拼接完整的授权地址 * @param {string} webUrl 前端调用授权前的地址（授权结束后需要返回的地址） * @date: 2021/9/27 */ const getAuthUrl = (webUrl) => { let redirectUri = encodeURIComponent(`${SERVICE_URL}/wxBack?webUrl=${webUrl}`); return `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appID}&redirect_uri=${redirectUri}&response_type=code&scope=snsapi_userinfo#wechat_redirect` }/** * @description 获取accessToken和openid * @param {string} code 授权得到的code * @date: 2021/9/27 */ const getAccessTokenByCode = async (code) => { let {data} = await axios.get(`https://api.weixin.qq.com/sns/oauth2/access_token?appid=${appID}&secret=${appsecret}&code=${code}&grant_type=authorization_code`) return data }/** * @description 获取微信用户信息 * @param {string} accessToken * @param {string} openid 用户openid * @date: 2021/9/27 */ const getUserInfo = async (accessToken, openid) => { let {data} = await axios.get(`https://api.weixin.qq.com/sns/userinfo?access_token=${accessToken}&openid=${openid}&lang=zh_CN`) return data }// 前端页面 app.get('/user', (req, res) => res.sendFile(__dirname + "/" + "user.html")); // 鉴权第一步：重定向至微信 app.get('/goAuth', (req, res) => { // 拿到调用授权的前端地址 let {webUrl} = req.query; // 拿到鉴权的完整地址 let authUrl = getAuthUrl(webUrl); // 重定向 res.redirect(authUrl); })// 鉴权第二步：微信重定向回服务 app.get('/wxBack', async (req, res) => { // 拿到code和调用授权的前端地址 let {webUrl, code} = req.query; // 获取accessToken let {access_token, openid} = await getAccessTokenByCode(code); // 获取用户信息 let {nickname, headimgurl} = await getUserInfo(access_token, openid); // 重定向回前端 headimgurl = headimgurl.replace('thirdwx.qlogo.cn', 'wx.qlogo.cn'); res.redirect(`${webUrl}?openid=${openid}&nickname=${nickname}&headimgurl=${headimgurl}`); })app.listen(port, () => { console.log(`app listening at http://localhost:${port}`) })const express = require('express'); const app = express(); const axios = require('axios'); const port = 3000; // 启动端口const SERVICE_URL = 'https://0772-183-159-254-252.ngrok.io'; // 服务器地址，把内网映射的地址填写到这里 const appID = ''; // 微信测试号的appid const appsecret = ''; // 微信测试号的appsecret/** * @description 拼接完整的授权地址 * @param {string} webUrl 前端调用授权前的地址（授权结束后需要返回的地址） * @date: 2021/9/27 */ const getAuthUrl = (webUrl) => { let redirectUri = encodeURIComponent(`${SERVICE_URL}/wxBack?webUrl=${webUrl}`); return `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appID}&redirect_uri=${redirectUri}&response_type=code&scope=snsapi_userinfo#wechat_redirect` }/** * @description 获取accessToken和openid * @param {string} code 授权得到的code * @date: 2021/9/27 */ const getAccessTokenByCode = async (code) => { let {data} = await axios.get(`https://api.weixin.qq.com/sns/oauth2/access_token?appid=${appID}&secret=${appsecret}&code=${code}&grant_type=authorization_code`) return data }/** * @description 获取微信用户信息 * @param {string} accessToken * @param {string} openid 用户openid * @date: 2021/9/27 */ const getUserInfo = async (accessToken, openid) => { let {data} = await axios.get(`https://api.weixin.qq.com/sns/userinfo?access_token=${accessToken}&openid=${openid}&lang=zh_CN`) return data }// 前端页面 app.get('/user', (req, res) => res.sendFile(__dirname + "/" + "user.html")); // 鉴权第一步：重定向至微信 app.get('/goAuth', (req, res) => { // 拿到调用授权的前端地址 let {webUrl} = req.query; // 拿到鉴权的完整地址 let authUrl = getAuthUrl(webUrl); // 重定向 res.redirect(authUrl); })// 鉴权第二步：微信重定向回服务 app.get('/wxBack', async (req, res) => { // 拿到code和调用授权的前端地址 let {webUrl, code} = req.query; // 获取accessToken let {access_token, openid} = await getAccessTokenByCode(code); // 获取用户信息 let {nickname, headimgurl} = await getUserInfo(access_token, openid); // 重定向回前端 headimgurl = headimgurl.replace('thirdwx.qlogo.cn', 'wx.qlogo.cn'); res.redirect(`${webUrl}?openid=${openid}&nickname=${nickname}&headimgurl=${headimgurl}`); })app.listen(port, () => { console.log(`app listening at http://localhost:${port}`) })

user.html