前端微信H5公众号实现授权登录的方法总结
更新时间：2025年01月13日 08:32:51 作者：一口一个人.
这篇文章主要介绍了如何在微信公众号中实现网页授权功能,包括创建微信服务公众号、配置重定向地址、调试和开发使用等步骤,文中通过图文及代码介绍的非常详细,需要的朋友可以参考下
一，公众号
首先我们需要有一个微信服务公众号
首先账号是需要时公众号下的开发者
还需要在网页授权域名中配置 相应的H5正式域名 正式上线是需要用到这个的
二，重定向code说明
首先我们这为了方便调试 会将线上和本地调试 分开进行调试
这样就需要我们在前端执行中 判断好
我们可以先看这个 微信网页授权的开发文档 这个 重定向登录 说白了就是 一个微信授权
需要跳转这个链接
https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appId.value}&redirect_uri=${local}&response_type=code&connect_redirect=1&scope=snsapi_userinfo&state=STATE#wechat_redirect其中的lOCAL 就是微信会帮我们跳转的地址 所以我们需要微信跳转回来哪个页面 我们就填哪个页面就好了
还是需要编码的local
let local = `http://h5.liangpiao.net.cn/cdx2.html`; // 获取页面url
if (window.location.origin.indexOf("192.168.110.71") !== -1) {
local = `http://h5.liangpiao.net.cn/cdx1.html`; // 获取页面url
// 地址转码
local = encodeURIComponent(local);
// 获取 code 地址
let url = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appId.value}&redirect_uri=${local}&response_type=code&connect_redirect=1&scope=snsapi_userinfo&state=STATE#wechat_redirect`;
window.location.href = url;看以上的代码
我们可以看到有两个html 文件 一个是本地的地址 一个是线上的地址
这个就是重定向地址
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body></body>
</html>
<script>
window.onload = function() {
window.location.href = `http://192.168.110.71:5173/#/pages/login/index/${location.search}`;
};
</script>这个html 里的内容就是一段js
跳转的是
http://192.168.110.71:5173/#/pages/login/index/${location.search}
这个页面 就是说微信会重定向到这个页面里 ·location.search· 这个 / 后面的参数 这个必填 是用来接收查询参数的 会有code 参数在这个查询参数里面
这个链接 是我们本地的调试 链接
如果正式上线 我们需要 把本地IP变成 线上正式地址 但是我们为了调试方便 我们可以将这个两个都写上
三，开发使用
首先我们写一个函数
const getCode = () => {
let local = `http://xxxxx/cdx2.html`; // 获取页面url 线上
if (window.location.origin.indexOf("192.168.110.71") !== -1) {
local = `http://xxxxx/cdx1.html`; // 获取页面url 本地
}
// 地址转码
local = encodeURIComponent(local);
// 获取 code 地址
let url =
`https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appId.value}&redirect_uri=${local}&response_type=code&connect_redirect=1&scope=snsapi_userinfo&state=STATE#wechat_redirect`;
window.location.href = url;
// Taro.hideLoading();
};
//用户重定向登录
const getUserInfo = async (option) => {
let code = option.code;
let userInfo = uni.getStorageSync("userInfo") ?
uni.getStorageSync("userInfo") :
null;
if (userInfo) {
userInfo = await userApi
.userInfo({
userId: userInfo.id
})
.then((res : any) => res.data);
// if (!userInfo) {
// Taro.removeStorageSync("userInfo");
// }
} else if (code) {
const openId = await userApi
.EmitCodeByH5({
code
})
.then((res : any) => res.data);
openid.value = openId;
uni.setStorageSync("openid", openId);
const UserInfoRes = await userApi
.Login({
userName: openId
})
.then((res : any) => res);
if (UserInfoRes.state === 200) {
userInfo = UserInfoRes.data;
uni.setStorageSync("userInfo", UserInfoRes.data);
userInfo.value = UserInfoRes.data;
userStore.setUserinfo(UserInfoRes.data);
userStore.setToken(UserInfoRes["token"]);
} else if (UserInfoRes.state === 202) {
return
}
}
// 如果 userInfo 为空 代表 本地 没有 缓存数据 且 code 不存在 获取失效 重新获取code
if (!userInfo) {
getCode();
return;
} else {
}
};
我们需要做一个判断 根据缓存判断 微信公众号 就是依据 微信的缓存进行判断开发 为了避免有太多的 重定向跳转 影响用户体验
这个需要做好判断 否则会造成 重定向一直进行
总结
到此这篇关于前端微信H5公众号实现授权登录的文章就介绍到这了,更多相关前端微信H5公众号授权登录内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
清空div中input标签值的方法有很多，下面为大家介绍下使用循环清空某个div中的input标签值的具体实现2014-09-09
写了几年代码，很少谈到javascript程序的执行效率问题，今天就举几个例子看看，让大家看看程序优化是多么重要。 这节来看看createElement和innerHTML的表现。看看差别是多大2008-05-05
克隆javascript对象的三个方法整理，需要的朋友可以参考下。2011-01-01
这篇文章主要为大家详细介绍了在JavaScript中如何设置私有属性,文中的示例代码讲解详细,具有一定的借鉴价值,有需要的小伙伴可以参考下2024-03-03
JS是通过事件队列(Event Loop)的方式来实现异步回调的，但对很多初学JS的人来说，根本搞不清楚单线程的JS为什么拥有异步的能力，所以本文将从进程、线程的角度来解释这个问题2023-05-05
这篇文章主要介绍了JavaScript获取和操作时间戳的相关资料,时间戳通常用于记录时间、计算时间差、生成唯一的标识符等,文章详细讲解了如何使用Date.now()和new Date().getTime()获取当前时间戳,需要的朋友可以参考下2025-04-04
这篇文章主要介绍了JS给Textarea文本框添加行号的方法,涉及javascript针对页面元素结点的读取与判定技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-08-08
本篇文章主要是对用javascript替换URL中的参数值示例代码进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助2014-01-01
这篇文章主要介绍了自定义javascript验证框架,结合实例形式分析了javascript正则验证相关操作技巧,并附带源码供读者下载参考,需要的朋友可以参考下2019-05-05
下面小编就为大家带来一篇原生javascript实现的一个简单动画效果。小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-03-03
最新评论