前言

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

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

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

第一步：用户同意授权，获取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，如果没有，就直接重定向跳转到服务器地址开始授权；
• 如果有，就直接把获取到的头像显示在页面上；
• 注意：这里也需要把内网映射地址修改一下

<!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...
觉得文章写的好，请给戳↑链接关注作者，给文章点个赞嗷~

更多好文， 前端学习资料（Vue、React、Js） ，请关注公众号【推推猿】，加入IT人员社群，获得人脉拓展和大佬们面对面交流~更有大厂面试经验、内推岗位的一手资料同步获取~