网页微信扫码登录,以及redirect_uri参数错误解决方案

扫码登录

流程:首先是生成二维码,二维码对应的 url 中包含一个回调地址,在用户同意授权之后,将会在你的回调 url 上拼接参数 code 并且跳转,跳转之后前端从 url 中获取 code,调用接口发送给后端,后端用 code 去获取所需要的信息即可

扫码页面
引入微信封装好的js

// 引入微信封装好的 js
<script src="https://res.wx.qq.com/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.com/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是可以的

### PC端微信登录中 `redirect_uri` 的使用方法及配置 #### 配置域名白名单 为了使本地开发环境中能够顺利进行微信登录的调试,在微信公众平台后台需先配置好合法的回调域名。即使是在本地开发阶段,也应将用于测试的域名(如 `demo.test.com`)加入到该白名单列表中[^1]。 #### 修改应用内的重定向链接 当涉及到具体的应用逻辑时,对于基于 Vue.js 或 React 等框架构建的应用程序来说,应该把由这些前端框架启动的服务所暴露出来的 IP 地址作为临时性的 `redirect_uri` 值来使用。这允许开发者不必每次都将代部署至生产环境即可完成必要的接口调用验证工作[^2]。 #### 处理成功后的跳转 URL 一旦用户通过描二维完成了身份认证过程,则会触发一次 HTTP GET 请求指向预先设定好的 `redirect_uri` 路径,并附带两个重要参数——`code` 和 `state`。其中,`code` 是后续换取 access token 及 openid 所必需的信息;而 `state` 则可用于保持请求前后状态的一致性[^3]。 ```javascript // JavaScript 示例:解析 URL 中携带的 code 参数 function getQueryVariable(variable) { var query = window.location.search.substring(1); var vars = query.split("&"); for (var i=0;i<vars.length;i++) { var pair = vars[i].split("="); if(pair[0] === variable){return pair[1];} } return(false); } const code = getQueryVariable('code'); if(code){ console.log(`Received authorization code: ${code}`); } else { console.error('Authorization failed or canceled.'); } ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值