微信授权登录功能(第三方网站登录)

最新推荐文章于 2024-06-02 15:01:12 发布

置顶朱先森丶

最新推荐文章于 2024-06-02 15:01:12 发布

阅读量3.9k

点赞数 3

分类专栏： Java 文章标签：原创

本文链接：https://blog.csdn.net/weixin_41671621/article/details/100536130

版权

Java 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

写这篇博客的目的呢，一个是在于记录自己的开发过程，另一个目的就是将自己踩到的坑贴出来，供大家借鉴。

由于公司近期在做一个项目，在网页中使用微信扫码登录的功能，就开始了研究尝试，直到功能实现，从一脸懵逼，到豁然开朗感觉有点不易，因为以前没有做过第三方登录，刚开始的时候还是挺忐忑的，好了话不多说进入正题。

首先微信官方的api中给我们提供了两种方式用于微信扫码登录，第一跳转到微信网页登录，第二使用js引入二维码到自己网页中。我第一次使用的是跳转微信网页的方式，后来为了网站效果改成了用js引入网页的方式，api中说的很详细。
传送门：微信开放平台api

那么大致说下流程：
在这里插入图片描述
第一种方式是通过后台重定向过去的所以前端只需要写个链接就行了，api中有我就不细说了，其他博客也有，第二种方式是在页面上直接显示二维码登录减少了跳页面的时间，这种方式需要在网页上用js实现，一般第二种用的比较多。
第一种方式可以参考：https://blog.csdn.net/weixin_41759186/article/details/84564054.

在这里就重点说下网页中引入二维码的方式
实现代码：

<!DOCTYPE html>
<head>
<title>内嵌式 - 微信扫码登录</title>
<!-- 引入微信扫码登录js文件 -->
<script type="text/javascript" src="http://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js"></script>
</head>
<body>
  <!-- 放置二维码的div -->
  <div id="login_container"></div>
</body>
<script type="text/javascript">
		//获取微信二维码
		function wxLogin(){
			var url;
			var appId;
			$.ajax({
					url: base_api_url() + "traveler/wxWebAuth",//这里是我的后台获取路径的地方
					type: "GET",
					data: {},
					async : false,
					dataType: 'json',
					success: function(res) {
						url =res.url;
						appId =res.appid;
					},
					error: function() {
						alert('网络错误，请稍后重试 ！');
					}
				});
				var obj = new WxLogin({
				  self_redirect:true,
				  id:"login_container", 
				  appid: appId, //你的开发者账户的appid
				  scope: "snsapi_login", 
				  redirect_uri: encodeURIComponent(url), //这里就是你的授权后回调地址
				  state:state: Math.ceil(Math.random()*1000),
				  style: "black",
				  href: "data:text/css;base64,LmltcG93ZXJCb3ggLnFyY29kZSB7d2lkdGg6IDIzMHB4O30KLmltcG93ZXJCb3ggLmluZm8ge3dpZHRoOiAyMzBweDt9Ci5zdGF0dXNfaWNvbiB7ZGlzcGxheTogbm9uZX0KLmltcG93ZXJCb3ggLnN0YXR1cyB7dGV4dC1hbGlnbjogY2VudGVyO30K"
				});
		}
</script>
</html>

贴出后台路径

	@RequestMapping("/wxWebAuth")
	@ResponseBody
	public Map<String, Object> wxAuth(HttpServletRequest req, HttpServletResponse resp) {
		Map<String, Object> map = new HashMap<String, Object>();
		//回调地址
		String url = "localhost:8080/**/api/traveler/wxWebcallback";//你的项目后台回调地址
		String appid= "assdfiocodncrgtegtr";//你的开发者账户中的AppID
		map.put("url", url);
		map.put("appid", appid);
		return map;
	}

说明：这里的 href 参数可以自定义扫码样式，一种据说是引入一个https地址的css文件例如：href: “https://lws.com/test.css”，由于没有配置https所以没有实践，另一种是把样式代码进行base64加密放到href参数中。这里只支持https，所以做加密处理。

那么href的格式就为：data:text/css;base64,base64加密后的字符串

那么css样式，官方给出：

.impowerBox .qrcode {width: 200px;}
.impowerBox .title {display: none;}
.impowerBox .info {width: 200px;}
.status_icon {display: none}
.impowerBox .status {text-align: center;}

那么通过在线加密工具进行加密然后复制贴入就ok了
在这里插入图片描述
然后接下来就是扫码调用回调域进自己的后台了，后面步骤和第一种一样

到这里就能看到效果啦
在这里插入图片描述

点击微信登录调用js，效果如下：
在这里插入图片描述
那么现在试试扫码授权效果如何？
怎么样？发现问题了？哈哈，这里有一个小坑，是没细心看api文档造成的，是不是发现扫码之后网页跳转还在这个二维码的div里？没有到新的页面

api文档里是这样介绍的：
在这里插入图片描述
参数 self_redirect 设置为ture，那么就是在iframe 内跳转，设置为false就会跳转到新页面了，就因为刚开始没有细看api说明，结果绕了一大圈，网上找各种解决办法，最后仔细一看api说明才发现。

属性更改后：

self_redirect:false

现在再试试，ok成功跳转页面

如果是初次接触微信登录开发的，可以看看这篇博客，介绍详细：微信开放平台流程介绍

关于实现扫码登录的后台逻辑的，这里介绍几篇博客可以参考参考

https://blog.csdn.net/weixin_41759186/article/details/84564054.

https://www.jianshu.com/p/89c43290d7f6.

https://blog.csdn.net/weixin_36385007/article/details/84235489.

https://blog.csdn.net/weixin_41722928/article/details/83180978.

https://blog.csdn.net/weixin_43358050/article/details/91558060.

https://blog.csdn.net/durianll/article/details/81386621.

如果有用记得点赞哦！

在这里插入图片描述

朱先森丶

关注

3
点赞
踩
9

收藏

觉得还不错? 一键收藏
2
评论
微信授权登录功能(第三方网站登录)

写这篇博客的目的呢，一个是在于记录自己的开发过程，另一个目的就是将自己踩到的坑贴出来，供大家借鉴。由于公司近期在做一个项目，在网页中使用微信扫码登录的功能，就开始了研究尝试，直到功能实现，从一脸懵逼，到豁然开朗感觉有点不易，因为一起那么没有做过第三方登录，刚开始的时候还是挺忐忑的，好了话不多说进入正题。首先微信官方的api中给我们提供了两种方式用于微信扫码登录，第一跳转到微信网页登录，第二使用...
复制链接

扫一扫