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

Hi_MrXiao

已于 2023-12-25 09:37:31 修改

阅读量4.8k

点赞数 9

分类专栏： javascript 文章标签：微信微信开放平台 javascript 前端

于 2023-12-22 17:12:52 首次发布

本文链接：https://blog.csdn.net/Hi_MrXiao/article/details/135156410

版权

javascript 专栏收录该内容

26 篇文章

订阅专栏

扫码登录

流程：首先是生成二维码，二维码对应的 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是可以的