微信的强社交属性让其拥有众多的用户。一些第三方网站，如果，每个都做一套用户管理系统，让每个用户都再注册一遍，首先管理上就面临很多问题。比如，要不要发短信验证码，涉及到信息安全等问题，小公司很难有保证。于是随着 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/pnotes/252004.html