WebFlux 网站微信第三方登录

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

微信登录 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 网站微信第三方登录

: » WebFlux 网站微信第三方登录

原创文章,作者:jamestackk,如若转载,请注明出处:https://blog.ytso.com/tech/java/252004.html

(0)
上一篇 2022年5月3日 21:55
下一篇 2022年5月3日 21:59

相关推荐

发表回复

登录后才能评论