H5使用微信OAuth2.0授权登录,并实现内网调试。
H5实现微信授权登录的流程不在过多赘述官方文档传送门,下面直接上如何在开发状态下实现授权登录调试。
1.准备工作。
- 微信公众号的开发权限,配置后续会讲。
- 内网穿透工具。
- 一个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登录实现
- 点击登录跳转微信授权页面,利用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';
- 跳转到空白页面获取的逻辑,代码如下:
<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,然后把后端惹毛了。无奈之举,原创不易,点赞加收藏。
OnismYY: vuetify是越用越好用系列
乐喵。: 大佬有没有vue3的