admin管理员组文章数量:1559072
扫码登录
流程:首先是生成二维码,二维码对应的 url 中包含一个回调地址,在用户同意授权之后,将会在你的回调 url 上拼接参数 code 并且跳转,跳转之后前端从 url 中获取 code,调用接口发送给后端,后端用 code 去获取所需要的信息即可
扫码页面
引入微信封装好的js
// 引入微信封装好的 js
<script src="https://res.wx.qq/connect/zh_cn/htmledition/js/wxlogin.js"></script>
创建二维码容器,加载微信二维码
// 微信二维码容器
<div class="impowerbox">
<div class="wx_dialog_toiast_delltet" id="login_container"></div>
</div>
// 加载二维码
var ddns_resolution = encodeuricomponent("http:127.0.0.1:8080/index");
new wxlogin({
self_redirect: false, //该参数决定回调方式。默认是false,即授权后,整个页面发生跳转,true时,只有iframe嵌套部分发生跳转
id: "login_container", // 需要承载二维码的容器id
appid: "wx*********",
scope: "snsapi_login", // 网页授权,目前网页只有这一种方式,静默授权
redirect_uri: ddns_resolution, // 授权后跳转路径,请使用urlencode对链接进行处理
state: math.random(), // 可防止csrf攻击
style: "black",
//自定义样式链接,第三方可根据实际需求覆盖默认样式,可将写好的css文件转为base64放在这里
href: "data:text/css;base64,lmltcg93zxjcb3gglnrpdgxlihsnciagicbkaxnwbgf5oibub25low0kfq0klmltcg93zxjcb3gglnfyy29kzs5sawdodejvcmrlcib7dqogicagd2lkdgg6idiwmhb4ow0kfq==",
});
ps:二维码的样式可以自定义,href属性就是设置自定义样式链接的,我们可以将自定义的样式写在css文件里面,并把这个文件转为base64值后作为href的属性值,就可以覆盖原本的默认样式。
css样式
.impowerbox .title {
display: none;
}
.impowerbox .qrcode.lightborder {
width: 200px;
}
二维码效果
index页面
扫码页码用户授权确认后,会跳转到之前redirect_uri属性写的链接,且带着code值。在跳转之后前端从 url 中获取 code,调用接口发送给后端,后端用 code 去获取所需要的信息即可
var wx_url = window.location.href
if(wx_url.indexof("code")!=-1){
// 获取扫码回调地址中带着的code和state的值
var paramarr = wx_url.split("?")[1].split("&")
var loginparam={}
paramarr.foreach(item=>{
var [key,val]=item.split("=")
loginparam[key]=val
})
var formdata=new formdata()
formdata.append('code',loginparam.code)
formdata.append('state',loginparam.state)
//发请求,用code换token
this.$ajax.post("/api/web/login/wechatcallback",formdata).then(res=>{
if(res.code==200){
// 登录成功后清除地址上的参数,避免刷新页面会重复登录
var url = window.location.href;
if (url.indexof("?") != -1) {
url = url.replace(/(\?|#)[^'"]*/, '');
window.history.pushstate({}, 0, url);
}
}
}).catch(err=>{
console.log(err)
})
}
redirect_uri参数错误九游会真人第一品牌的解决方案
微信开放平台
【管理中心/应用详情】 设置的 【开发信息】 【授权回调域】 只要填定域名,不带https://,不带具体的页面,不需要填完整的请求路径。
在https://open.weixin.qq/connect/qrconnect?appid=你的appid&redirect_uri=回调的具体地址&response_type=code&scope=snsapi_login 中可以在前面加上https://头,后面加上具体的回调页面,我一开始填成了具体的请求页面,一直提示redirect_uri参数错误
提醒:
本地调试时域名可设置为本地ip:127.0.0.1是合法的;
在redirect_uri中要填http://127.0.0.1/oauth是可以的
j9九游会老哥俱乐部交流区的版权声明:本文标题:网页微信扫码登录,以及redirect_uri参数错误九游会真人第一品牌的解决方案 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://www.elefans.com/xitong/1727386441a1112375.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。