H5使用微信OAuth2.0授权登录，并实现内网调试。

H5实现微信授权登录的流程不在过多赘述官方文档传送门，下面直接上如何在开发状态下实现授权登录调试。

1.准备工作。

1. 微信公众号的开发权限，配置后续会讲。
2. 内网穿透工具。
3. 一个node服务点这里koa2快速搭建，传送门。

2.公众号配置

如图所示点击网页授权域名设置

将这个文件txt下载到本地，下面的域名就是回调域名，可以为http协议。

3.node服务配置

const Router = require('koa-router');const router = new Router({    prefix: '/',});router.get('这个就是下载的文件名包括文件格式名', async (ctx, next) => {    ctx.type = 'text';    ctx.body = '文件里面的内容';});router.get('call_back', (ctx) => {//重定向到code获取页面ctx.redirect(`H5项目穿透外网地址/#/H5项目空白页面路由?code=${ctx.query.code}`);});module.exports = router;

4.H5登录实现

1. 点击登录跳转微信授权页面，利用window.location.href，代码如下：

window.location.href ='https://open.weixin.qq.com/connect/oauth2/authorize?appid=公众号appid&redirect_uri=自己起的node服务穿透后的外网地址/call_back&response_type=code&scope=snsapi_userinfo&state=STATE%23wechat_redirect';

2. 跳转到空白页面获取的逻辑，代码如下：

5.外网穿透

最后

总的思路就是:
H5穿透拿到本地服务的外网地址——>node本地服务穿透外网地址——>node服务接收TX授权code——>重定向到H5外网地址
主要不想一天老发布测试H5，然后把后端惹毛了。无奈之举，原创不易，点赞加收藏。

来源地址：https://blog.csdn.net/alonesupermen/article/details/129728875