前言
大家平时在工作中，或多或少应该接触过微信鉴权登录，获取用户信息的相关需求。也有小伙伴经常会在群里问一些相关的问题，比如
- 鉴权登录的整体流程是什么？
- 整个流程里面，前端和后端的分工是什么？
- 前端专门准备了一个鉴权回调页面，要怎么回到鉴权前的页面？
- 怎么在本地测试微信网页授权？
先看看微信官方的鉴权流程怎么描述的
第一步：用户同意授权，获取code
第二步：通过code换取网页授权access_token
第三步：刷新access_token（如果需要）
第四步：拉取用户信息(需scope为 snsapi_userinfo)
还是懵，没关系，我在这里专门准备了一个小，来实现了一套简易版的网页授权+获取用户信息的功能，整个流程大概是这样的
在这个流程中，前端不用做太多事，只需要判断有没有用户信息，如果没有，剩下的事情交给服务端，等服务端全部处理完成，会带着用户信息，返回之前的页面。
并且前端无需准备专门的授权结果页。
流程
第一步：内网映射
下载软件
下载地址：ngrok.com/download
解压出来之后是这个东西
终端启动
将解压出来的文件拖到终端中，紧接着写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
这是专门用来测试的页面，因为只需要测一下有没有拿到用户信息，所以仅仅简单的获取了一下openid和用户头像。
- 先判断url上有没有携带openid，如果没有，就直接重定向跳转到服务器地址开始授权；
- 如果有，就直接把获取到的头像显示在页面上；
- 注意：这里也需要把内网映射地址修改一下
Title
第四步：测试
安装依赖
npm install启动项目
npm run start微信访问页面
https://0772-183-159-254-252.ngrok.io/user如果不出意外，访问页面之后，你应该能弹出授权，同意之后回返回页面并出现你的头像了。
这里因为我同意授权过，所以没有再次弹出来～
git地址
地址：github.com/zhuyuqian/s…结束语
本文提供作者：嘟小乾
原贴地址： https://juejin.cn/post/701248...
觉得文章写的好，请给戳↑链接关注作者，给文章点个赞嗷~
更多好文，请关注 公众号【推推猿】，加入IT人员社群，获得人脉拓展和大佬们面对面交流~更有大厂面试经验、内推岗位的一手资料同步获取~