Java基础、中级、高级、架构面试资料
    你的位置：业余草 > JAVA > WebFlux 网站微信第三方登录

    WebFlux 网站微信第三方登录

    JAVA herman 3875浏览
    公告：“业余草”微信公众号提供免费CSDN下载服务(只下Java资源)，关注业余草微信公众号，添加作者微信：xttblog2，发送下载链接帮助你免费下载！
    本博客日IP超过2000，PV 3000 左右，急需赞助商。
    极客时间所有课程通过我的二维码购买后返现24元微信红包，请加博主新的微信号：xttblog2，之前的微信号好友位已满，备注：返现
    受密码保护的文章请关注“业余草”公众号，回复关键字“0”获得密码
    所有面试题(java、前端、数据库、springboot等)一网打尽，请关注文末小程序
    视频教程免费领
    腾讯云】1核2G5M轻量应用服务器50元首年，高性价比，助您轻松上云

    微信的强社交属性让其拥有众多的用户。一些第三方网站，如果，每个都做一套用户管理系统，让每个用户都再注册一遍，首先管理上就面临很多问题。比如，要不要发短信验证码，涉及到信息安全等问题，小公司很难有保证。于是随着 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）！可加作者微信号：xttblog2。备注：“1”，添加博主微信拉你进微信群。备注错误不会同意好友申请。再次感谢您的关注！后续有精彩内容会第一时间发给您！原创文章投稿请发送至532009913@qq.com邮箱。商务合作也可添加作者微信进行联系！

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

    相关文章推荐