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

前言

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

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

先看看微信官网的鉴权流程怎么形容的

第一步：用户批准受权，获取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 = ''; // 微信测试号的appidconst 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 = ''; // 微信测试号的appidconst 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，如果没有，就间接重定向跳转到服务器地址开始受权；
• 如果有，就间接把获取到的头像显示在页面上；
• 留神：这里也须要把内网映射地址批改一下

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.js"></script></head><body><div id="app"></div><script>    var SERVICE_BASE = 'https://0772-183-159-254-252.ngrok.io' // 内网映射的服务端地址    // 获取url参数    function getQueryVariable() {        var url = location.search; //获取url中"?"符后的字串        var theRequest = new Object();        if (url.indexOf("?") != -1) {            var str = url.substr(1);            strs = str.split("&");            for (var i = 0; i < strs.length; i++) {                theRequest[strs[i].split("=")[0]] = unescape(strs[i].split("=")[1]);            }        }        return theRequest;    }    // 获取用户信息    function getUserInfo() {        var params = getQueryVariable();        var openid = params.openid;        if (!openid) { // 开始受权            window.location.href = SERVICE_BASE + '/goAuth?webUrl=' + window.location.href;        } else { // 受权完结            let html = `头像：<img src="${params.headimgurl}">`            let app = document.getElementById('app');            app.innerHTML = html;        }    }    window.addEventListener('load', function () {        getUserInfo();    })</script></body></html>

第四步：测试

装置依赖

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人员社群，取得人脉拓展和大佬们面对面交换~更有大厂面试教训、内推岗位的一手材料同步获取~