微信的强社交属性让其拥有众多的用户。一些第三方网站,如果,每个都做一套用户管理系统,让每个用户都再注册一遍,首先管理上就面临很多问题。比如,要不要发短信验证码,涉及到信息安全等问题,小公司很难有保证。于是随着 OAuth 等第三方授权协议的发展,越来越多的小网站采用第三方授权登录的形式开放接入用户的行为。
基于此,我们就来使用 WebFlux 来实现一个网站接入微信、QQ、Github等第三方登录吧!
群里有很多网友让我给他们做一个网站接入微信登录的 demo,并愿意出钱购买!没想到大家有这么迫切的需求,于是就有了本文。
网站实现微信第三方登录是非常的简单的。共有两种方式来实现。
第一种方式是网站嵌入微信扫码登录的二维码。实现起来非常的简单,需要引入 http://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js 文件。然后创建一个 WxLogin 对象。具体代码如下:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"/> <title>微信登录</title> <script src="http://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js" type="text/javascript"></script> </head> <body> <div id="login_container"> </div> </body> <script> var obj = new WxLogin({ self_redirect:true, id:"login_container", appid: "wxbdc5610cc59c1631", scope: "snsapi_login", redirect_uri: "https%3A%2F%2Fpassport.yhd.com%2Fwechat%2Fcallback.do", state: "3d6be0a4035d839573b04816624a415e", style: "", href: "" }); </script> </html>
WxLogin 对象的参数说明如下:
还有一种实现方式就是第三方使用网站应用授权登录前,将登录请求重定向到 https://open.weixin.qq.com/connect/qrconnect?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&state=STATE#wechat_redirect 地址。
上面的各个参数解释说明如下:
具体的实现代码,看下面的实例:
@Configuration public class OAuthWeixinRouter { @Autowired private WeixinHandler weixinHandler; @Bean RouterFunction<ServerResponse> routerFunction() { return RouterFunctions.route(RequestPredicates.GET("/redirect"), weixinHandler::loginUrl); } } @Component public class WeixinHandler { public Mono<ServerResponse> loginUrl(ServerRequest serverRequest) { String TargetUrl = "https://open.weixin.qq.com/connect/qrconnect?" + "appid=wxbdc5610cc59c1631" + "&redirect_uri=https%3A%2F%2Fpassport.yhd.com%2Fwechat%2Fcallback.do" + "&response_type=code&scope=snsapi_login" + "&state=3d6be0a4035d839573b04816624a415e#wechat_redirect"; return ServerResponse.temporaryRedirect(URI.create(TargetUrl)).build(); } }
需要源码的可以加我微信,免费获取!
用户允许授权后,将会重定向到 redirect_uri 的网址上,并且带上 code 和 state 参数。若用户禁止授权,则重定向后不会带上 code 参数,仅会带上 state 参数。
获得 code 后,我们可以通过 code 获取 access_token。然后根据 access_token 就可以获取登录用户的各种信息了。
参考资料
- https://oauth.net/2/
- 网站应用微信登录开发指南
: » WebFlux 网站微信第三方登录
原创文章,作者:jamestackk,如若转载,请注明出处:https://blog.ytso.com/tech/java/252004.html