点赞
评论
收藏
分享
举报
10分钟带你完成微信网页授权&获取用户信息&搭建内网映射测试
发表于2021-12-02 17:15

浏览 1.1k

文章标签

前言

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

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

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

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

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

image.png

在这个流程中,前端不用做太多事,只需要判断有没有用户信息,如果没有,剩下的事情交给服务端,等服务端全部处理完成,会带着用户信息,返回之前的页面。

并且前端无需准备专门的授权结果页。

流程

第一步:内网映射

下载软件

下载地址:ngrok.com/download

image.png

解压出来之后是这个东西
image.png

终端启动

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

启动之后出现下面这个界面,就说明成功了。
image.png

这个就是我们需要的域名:https://0772-183-159-254-252....

第二步:微信测试号

登录测试账号

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

image.png

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

修改授权回调域名

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

image.png

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

image.png

扫码关注测试号
因为如果不关注,测试授权会报错的

第三步:搭建项目

这里我们使用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人员社群,获得人脉拓展和大佬们面对面交流~更有大厂面试经验、内推岗位的一手资料同步获取~
已修改于2023-03-09 08:23
创作不易,留下一份鼓励
好文分享者

暂无个人介绍

关注



写下您的评论
发表评论
全部评论(0)

按点赞数排序

按时间排序

关于作者
好文分享者
这家伙很懒还未留下介绍~
2
文章
0
问答
1
粉丝
相关文章