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. 跳转到空白页面获取的逻辑，代码如下：

<template>
	<view></view>
</template>

<script>
export default {
	data() {
		return {};
	},
	methods: {
		loginForH5(code) {
			//微信登录H5
			auth.H5login({ code})
				.then(res => {
					if (res.accessToken) {
						this.$store.commit('SET_LOGIN', true);
						uni.setStorageSync('accessToken', res.accessToken);
					}
				})
				.catch(({ data, status }) => {
					console.log('h5err-------->', status, data);
						uni.showToast({
							icon: 'error',
							title: '出现未知错误！',
							duration: 1000,
							success: () => {
								uni.switchTab({
									url: '/pages/home/index',
									fail: e => {
										console.error(e);
									}
								});
							}
						});
				});
		},
		//获取链接参数
		urlPamras() {
			let url = window.document.location.href.toString(); //获取的完整url
			let u = url.split('?');
			if (typeof u[1] == 'string') {
				u = u[1].split('&');
				let get = {};
				for (let i in u) {
					let j = u[i].split('=');
					get[j[0]] = j[1];
				}
				return get;
			} else {
				return {};
			}
		}
	},
	onLoad() {
		const code = this.urlPamras()['code'];
		console.log('授权回调--------------', code);
		if (code) {
			this.loginForH5(code);
		} else {
			uni.showToast({
				icon: 'error',
				title: '出现未知错误！',
				duration: 1000,
				success: () => {
					uni.switchTab({
						url: '/pages/home/index',
						fail: e => {
							console.error(e);
						}
					});
				}
			});
		}
	}
};
</script>

5.外网穿透

最后

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