WebFlux 网站微信第三方登录

JAVA herman 701浏览
公告:“业余草”微信公众号提供免费CSDN下载服务(只下Java资源),关注业余草微信公众号,添加作者微信:xttblog,发送下载链接帮助你免费下载!
本博客日IP超过1800,PV 2600 左右,急需赞助商。
极客时间所有课程通过我的二维码购买后返现24元微信红包,请加博主新的微信号:xttblog,之前的微信号好友位已满,备注:返现
所有面试题(java、前端、数据库、springboot等)一网打尽,请关注文末小程序
视频教程免费领

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

参考资料

业余草公众号

最后,欢迎关注我的个人微信公众号:业余草(yyucao)!可加QQ1群:135430763(2000人群已满),QQ2群:454796847(已满),QQ3群:187424846(已满)。QQ群进群密码:xttblog,想加微信群的朋友,之前的微信号好友已满,请加博主新的微信号:xttblog,备注:“xttblog”,添加博主微信拉你进群。备注错误不会同意好友申请。再次感谢您的关注!后续有精彩内容会第一时间发给您!原创文章投稿请发送至532009913@qq.com邮箱。商务合作可添加助理微信进行沟通!

本文原文出处:业余草: » WebFlux 网站微信第三方登录