Spring Boot实现微信扫码登录功能流程分析

目录
  • 1. 授权流程说明
    • 第一步:请求CODE
    • 第二步:通过code获取access_token
    • 第三步:通过access_token调用接口
  • 2. 授权流程代码
  • 3. 用户登录和登出
  • 4. Spring AOP校验用户有没有登录
  • 5. 拦截登录校验不通过抛出的异常

微信开放平台:微信扫码登录功能

官方文档:https://developers.weixin.qq.com/doc/oplatform/Website_App/WeChat_Login/Wechat_Login.html

1. 授权流程说明

微信OAuth3.0授权登录让微信用户使用微信身份安全登录第三方应用或网站,在微信用户授权登录已接入微信OAuth3.0的第三方应用后,第三方可以获取到用户的接口调用凭证(access_token),通过access_token可以进行微信开放平台授权关系接口调用,从而可实现获取微信用户基本开放信息和帮助用户实现基础开放功能等。

微信OAuth3.0授权登录目前支持authorization_code模式,适用于拥有server端的应用授权。该模式整体流程为:

① 第三方发起微信授权登录请求,微信用户允许授权第三方应用后,微信会拉起应用或重定向到第三方网站,并且带上授权临时票据code参数;

② 通过code参数加上AppID和AppSecret等,通过API换取access_token;

③ 通过access_token进行接口调用,获取用户基本数据资源或帮助用户实现基本操作。

第一步:请求CODE

第三方使用网站应用授权登录前请注意已获取相应网页授权作用域(scope=snsapi_login),则可以通过在PC端打开以下链接:https://open.weixin.qq.com/connect/qrconnect?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&state=STATE#wechat_redirect

返回说明

用户允许授权后,将会重定向到redirect_uri的网址上,并且带上code和state参数

redirect_uri?code=CODE&state=STATE

若用户禁止授权,则重定向后不会带上code参数,仅会带上state参数

redirect_uri?state=STATE

例如:登录一号店网站应用 https://passport.yhd.com/wechat/login.do 打开后,一号店会生成state参数,跳转到 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 微信用户使用微信扫描二维码并且确认登录后,PC端会跳转到 https://passport.yhd.com/wechat/callback.do?code=CODE&state=3d6be0a4035d839573b04816624a415e

第二步:通过code获取access_token

通过code获取access_token

https://api.weixin.qq.com/sns/oauth3/access_token?appid=APPID&secret=SECRET&code=CODE&grant_type=authorization_code

返回说明

正确的返回:

{
"access_token":"ACCESS_TOKEN",
"expires_in":7200,
"refresh_token":"REFRESH_TOKEN",
"openid":"OPENID",
"scope":"SCOPE",
"unionid": "o6_bmasdasdsad6_2sgVt7hMZOPfL"
}

错误返回样例:

{"errcode":40029,"errmsg":"invalid code"}
  • Appsecret 是应用接口使用密钥,泄漏后将可能导致应用数据泄漏、应用的用户数据泄漏等高风险后果;存储在客户端,极有可能被恶意窃取(如反编译获取Appsecret);
  • access_token 为用户授权第三方应用发起接口调用的凭证(相当于用户登录态),存储在客户端,可能出现恶意获取access_token 后导致的用户数据泄漏、用户微信相关接口功能被恶意发起等行为;
  • refresh_token 为用户授权第三方应用的长效凭证,仅用于刷新access_token,但泄漏后相当于access_token 泄漏,风险同上。

建议将secret、用户数据(如access_token)放在App云端服务器,由云端中转接口调用请求。

第三步:通过access_token调用接口

获取access_token后,进行接口调用,有以下前提:

  1. access_token有效且未超时;
  2. 微信用户已授权给第三方应用帐号相应接口作用域(scope)。

对于接口作用域(scope),能调用的接口有以下:

2. 授权流程代码

因为微信开放平台的AppiD和APPSecret和微信公众平台的AppiD和AppSecret都是不同的,因此需要配置一下:

# 开放平台
wechat.open-app-id=wx6ad144e54af67d87
wechat.open-app-secret=91a2ff6d38a2bbccfb7e9f9079108e2e
@Data
@Component
@ConfigurationProperties(prefix = "wechat")
public class WechatAccountConfig {

    //公众号appid
    private String mpAppId;
    //公众号appSecret
    private String mpAppSecret;
    //商户号
    private String mchId;
    //商户秘钥
    private String mchKey;
    //商户证书路径
    private String keyPath;
    //微信支付异步通知
    private String notifyUrl;
    //开放平台id
    private String openAppId;
    //开放平台秘钥
    private String openAppSecret;
}
@Configuration
public class WechatOpenConfig {
    @Autowired
    private WechatAccountConfig accountConfig;
    @Bean
    public WxMpService wxOpenService() {
        WxMpService wxOpenService = new WxMpServiceImpl();
        wxOpenService.setWxMpConfigStorage(wxOpenConfigStorage());
        return wxOpenService;
    }
    public WxMpConfigStorage wxOpenConfigStorage() {
        WxMpInMemoryConfigStorage wxMpInMemoryConfigStorage = new WxMpInMemoryConfigStorage();
        wxMpInMemoryConfigStorage.setAppId(accountConfig.getOpenAppId());
        wxMpInMemoryConfigStorage.setSecret(accountConfig.getOpenAppSecret());
        return wxMpInMemoryConfigStorage;
@Controller
@RequestMapping("/wechat")
@Slf4j
public class WeChatController {
    private WxMpService wxMpService;
    private WxMpService wxOpenService;
    @GetMapping("/qrAuthorize")
    public String qrAuthorize() {
        //returnUrl就是用户授权同意后回调的地址
        String returnUrl = "http://heng.nat300.top/sell/wechat/qrUserInfo";
        //引导用户访问这个链接,进行授权
        String url = wxOpenService.buildQrConnectUrl(returnUrl, WxConsts.QRCONNECT_SCOPE_SNSAPI_LOGIN, URLEncoder.encode(returnUrl));
        return "redirect:" + url;
    //用户授权同意后回调的地址,从请求参数中获取code
    @GetMapping("/qrUserInfo")
    public String qrUserInfo(@RequestParam("code") String code) {
        WxMpOAuth3AccessToken wxMpOAuth3AccessToken = new WxMpOAuth3AccessToken();
        try {
            //通过code获取access_token
            wxMpOAuth3AccessToken = wxOpenService.oauth3getAccessToken(code);
        } catch (WxErrorException e) {
            log.error("【微信网页授权】{}", e);
            throw new SellException(ResultEnum.WECHAT_MP_ERROR.getCode(), e.getError().getErrorMsg());
        }
        //从token中获取openid
        String openId = wxMpOAuth3AccessToken.getOpenId();
        //这个地址可有可无,反正只是为了拿到openid,但是如果没有会报404错误,为了好看随便返回一个百度的地址
        String  returnUrl = "http://www.baidu.com";
        log.info("openid={}", openId);
        return "redirect:" + returnUrl + "?openid="+openId;

请求路径:在浏览器打开

https://open.weixin.qq.com/connect/qrconnect?appid=wx6ad144e54af67d87&redirect_uri=http%3A%2F%2Fsell.springboot.cn%2Fsell%2Fqr%2FoTgZpwenC6lwO2eTDDf_-UYyFtqI&response_type=code&scope=snsapi_login&state=http%3A%2F%2Fheng.nat300.top%2Fsell%2Fwechat%2FqrUserInfo

获取了openid:openid=o9AREv7Xr22ZUk6BtVqw82bb6AFk

3. 用户登录和登出

@Controller
@RequestMapping("/seller")
public class SellerUserController {

    @Autowired
    private SellerService sellerService;
    private StringRedisTemplate redisTemplate;
    private ProjectUrlConfig projectUrlConfig;
    @GetMapping("/login")
    public ModelAndView login(@RequestParam("openid") String openid,                               HttpServletResponse response,                               Map<String, Object> map) {
        //1. openid去和数据库里的数据匹配
        SellerInfo sellerInfo = sellerService.findSellerInfoByOpenid(openid);
        if (sellerInfo == null) {
            map.put("msg", ResultEnum.LOGIN_FAIL.getMessage());
            map.put("url", "/sell/seller/order/list");
            return new ModelAndView("common/error");
        }
        //2. 设置token至redis
        String token = UUID.randomUUID().toString();
        //设置token的过期时间
        Integer expire = RedisConstant.EXPIRE;
        redisTemplate.opsForValue().set(String.format(RedisConstant.TOKEN_PREFIX, token), openid, expire, TimeUnit.SECONDS);
        //3. 设置token至cookie
        CookieUtil.set(response, CookieConstant.TOKEN, token, expire);
        return new ModelAndView("redirect:" + "http://heng.nat300.top/sell/seller/order/list");
    }
    @GetMapping("/logout")
    public ModelAndView logout(HttpServletRequest request,                        HttpServletResponse response,                        Map<String, Object> map) {
        //1. 从cookie里查询
        Cookie cookie = CookieUtil.get(request, CookieConstant.TOKEN);
        if (cookie != null) {
            //2. 清除redis
            redisTemplate.opsForValue().getOperations().delete(String.format(RedisConstant.TOKEN_PREFIX, cookie.getValue()));
            //3. 清除cookie
            CookieUtil.set(response, CookieConstant.TOKEN, null, 0);
        map.put("msg", ResultEnum.LOGOUT_SUCCESS.getMessage());
        map.put("url", "/sell/seller/order/list");
        return new ModelAndView("common/success", map);
}

① 将上一步获取到的openid存入数据库

② 将授权后跳转的地址改为登录地址

 //用户授权同意后回调的地址,从请求参数中获取code
    @GetMapping("/qrUserInfo")
    public String qrUserInfo(@RequestParam("code") String code) {
        WxMpOAuth3AccessToken wxMpOAuth3AccessToken = new WxMpOAuth3AccessToken();
        try {
            //通过code获取access_token
            wxMpOAuth3AccessToken = wxOpenService.oauth3getAccessToken(code);
        } catch (WxErrorException e) {
            log.error("【微信网页授权】{}", e);
            throw new SellException(ResultEnum.WECHAT_MP_ERROR.getCode(), e.getError().getErrorMsg());
        }
        //从token中获取openid
        String openId = wxMpOAuth3AccessToken.getOpenId();

        //授权成功后跳转到卖家系统的登录地址
        String  returnUrl = "http://heng.nat300.top/sell/seller/login";
        log.info("openid={}", openId);
        return "redirect:" + returnUrl + "?openid="+openId;
    }

③ 在浏览器请求这个链接:

https://open.weixin.qq.com/connect/qrconnect?appid=wx6ad144e54af67d87&redirect_uri=http%3A%2F%2Fsell.springboot.cn%2Fsell%2Fqr%2FoTgZpwenC6lwO2eTDDf_-UYyFtqI&response_type=code&scope=snsapi_login&state=http%3a%2f%2fheng.nat300.top%2fsell%2fwechat%2fqrUserInfo

第三应用请求使用微信扫码登录,而不是使用本网站的密码:

用户同意授权后登入第三方应用的后台管理系统:

4. Spring AOP校验用户有没有登录

@Aspect
@Component
@Slf4j
public class SellerAuthorizeAspect {

    @Autowired
    private StringRedisTemplate redisTemplate;
    @Pointcut("execution(public * com.hh.controller.Seller*.*(..))" +
    "&& !execution(public * com.hh.controller.SellerUserController.*(..))")
    public void verify() {}
    @Before("verify()")
    public void doVerify() {
        ServletRequestAttributes attributes = (ServletRequestAttributes) RequestContextHolder.getRequestAttributes();
        HttpServletRequest request = attributes.getRequest();
        //查询cookie
        Cookie cookie = CookieUtil.get(request, CookieConstant.TOKEN);
        //如果cookie中没有token说明已经登出或者根本没有登录
        if (cookie == null) {
            log.warn("【登录校验】Cookie中查不到token");
            //校验不通过,抛出异常
            throw new SellerAuthorizeException();
        }
        //去redis里查询
        String tokenValue = redisTemplate.opsForValue().get(String.format(RedisConstant.TOKEN_PREFIX, cookie.getValue()));
        //如果redis中没有对应的openid,同样表示登出或者根本没有登录
        if (StringUtils.isEmpty(tokenValue)) {
            log.warn("【登录校验】Redis中查不到token");
    }
}

5. 拦截登录校验不通过抛出的异常

拦截及登录校验不通过的异常,让其跳转到登录页面,扫码登录

@ControllerAdvice
public class SellExceptionHandler {
    //拦截登录异常
    @ExceptionHandler(value = SellerAuthorizeException.class)     public ModelAndView handlerAuthorizeException() {
        //拦截异常后,跳转到登录界面
        return new ModelAndView("redirect:".concat("https://open.weixin.qq.com/connect/qrconnect?" +
                "appid=wx6ad144e54af67d87" +
                "&redirect_uri=http%3A%2F%2Fsell.springboot.cn%2Fsell%2Fqr%2F" +
                "oTgZpwenC6lwO2eTDDf_-UYyFtqI" +
                "&response_type=code&scope=snsapi_login" +
                "&state=http%3a%2f%2fheng.nat300.top%2fsell%2fwechat%2fqrUserInfo"));
    }
    @ExceptionHandler(value = SellException.class)     @ResponseBody     public ResultVO handlerSellerException(SellException e) {
        return ResultVOUtil.error(e.getCode(), e.getMessage());
    }
    @ExceptionHandler(value = ResponseBankException.class)     @ResponseStatus(HttpStatus.FORBIDDEN)     public void handleResponseBankException() {
    }
}

到此这篇关于Spring Boot 实现微信扫码登录的文章就介绍到这了,更多相关Spring Boot微信扫码登录内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • java编程之基于SpringBoot框架实现扫码登录

    目录 项目简介 实现思路 二次认证的原因 实现步骤 用户访问网页端,选择扫码登录 使用手机扫码,二维码状态改变 手机确认登录 效果演示 完整代码已上传到GitHub. Web端体验地址:http://47.116.72.33/(只剩一个月有效期) apk下载地址:https://github.com/zhangjiwei1221/qrscan/releases/tag/0.0.1. 用户名:非空即可,密码:123456,效果见文末,整体实现如有不妥之处,欢迎交流讨论 实现部分参考二维码扫码登录是

  • springBoot基于webSocket实现扫码登录

    最近单位又有一个新Java项目. 涉及到扫码登录.之前项目使用的是 ajax轮询的方式.感觉太low了. 所以这次用webSocket的方式进行实现 好.废话不多说!咱们开始!! 一.首先咱们需要一张表 这表是干啥的呢? 就是记录一下谁扫码了.谁登录了. User_Token表 字段如下: 1.uuid : 用于确保唯一性 2.userId : 谁登录的 3.loginTime : 登录时间 4.createTime :创建时间 用于判断是否过期 5.state: 是否二维码失效  0有效 1失

  • SpringBoot微信扫码支付的实现示例

    一.首先导入生成二维码和微信支付环境 <!-- 生成二维码工具 --> <dependency> <groupId>com.google.zxing</groupId> <artifactId>core</artifactId> <version>3.2.1</version> </dependency> <dependency> <groupId>com.google.zx

  • springboot扫码登录的简单实现

    目录 前言 项目简介 实现思路 实现步骤 前言 本文将介绍基于SpringBoot + Vue + Android实现的扫码登录demo的总体思路,完整代码已上传到GitHub.Web端体验地址:http://47.116.72.33/(只剩一个月有效期),apk下载地址:https://github.com/zhangjiwei1221/qrscan/releases/tag/0.0.1.用户名:非空即可,密码:123456,效果见文末,整体实现如有不妥之处,欢迎交流讨论,实现部分参考二维码扫

  • Java Spring Boot实现简易扫码登录详解

    目录 前言 项目简介 实现思路 实现步骤 1.用户访问网页端,选择扫码登录 2.使用手机扫码,二维码状态改变 3.手机确认登录 效果演示 总结 前言 本文将介绍基于SpringBoot + Vue + Android实现的扫码登录demo的总体思路,完整代码已上传到GitHub.Web端体验地址:http://47.116.72.33/(只剩一个月有效期),apk下载地址:https://github.com/Zjvngvn/qrscan/releases/tag/0.0.1.用户名:非空即可,

  • SpringBoot实现扫码登录的示例代码

    目录 一.首先咱们需要一张表 二.角色都有哪些 三.接口都需要哪些? 四.步骤 五.疯狂贴代码 SpringBoot中操作WebSocket 最近有个项目涉及到websocket实现扫码登录,看到一篇不错的技术文,分享一下. 一.首先咱们需要一张表 这表是干啥的呢?就是记录一下谁扫码了.谁登录了. User_Token表 字段如下: uuid : 用于确保唯一性 userId :谁登录的 loginTime :登录时间 createTime :创建时间 用于判断是否过期 state:是否二维码失

  • Spring Boot实现微信扫码登录功能流程分析

    目录 1. 授权流程说明 第一步:请求CODE 第二步:通过code获取access_token 第三步:通过access_token调用接口 2. 授权流程代码 3. 用户登录和登出 4. Spring AOP校验用户有没有登录 5. 拦截登录校验不通过抛出的异常 微信开放平台:微信扫码登录功能 官方文档:https://developers.weixin.qq.com/doc/oplatform/Website_App/WeChat_Login/Wechat_Login.html 1. 授权

  • 基于 Swoole 的微信扫码登录功能实现代码

    随着微信的普及,扫码登录方式越来越被现在的应用所使用.它因为不用去记住密码,只要有微信号即可方便快捷登录.微信的开放平台原生就有支持扫码登录的功能,不过大部分人还是在用公众平台,所以扫码登录只能自行实现.这里基于微信公众平台的带参数临时二维码,并且结合 Swoole 的 WebSocket 服务实现扫码登录.大体流程如下: 客户端打开登录界面,连接到 WebSocket 服务 WebScoket 服务生成带参数二维码返回给客户端 用户扫描展示的带参数二维码 微信服务器回调扫码事件并通知开发者服务

  • 详解java实现简单扫码登录功能(模仿微信网页版扫码)

    java实现简单扫码登录功能 模仿微信pc网页版扫码登录 使用js代码生成qrcode二维码减轻服务器压力 js循环请求服务端,判断是否qrcode被扫 二维码超时失效功能 二维码被扫成功登录,服务端产生sessionId,传到页面使用js保存cookie 多线程 生成qrcode相关js jquery.qrcode.js 代码 页面div <div class="pc_qr_code"> <input type="hidden" id="

  • 企业微信扫码登录网页功能实现代码

    企业微信扫码登录网页功能,代码如下所示: //jq写法完善版 <!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> <title>信息平台</title> <script src="http://res

  • java实现微信扫码登录第三方网站功能(原理和代码)

    目录 一.查看微信扫码登录官方文档 二.实现微信第三方登录流程: 三.代码实现: 为避免繁琐的注册登陆,很多平台和网站都会实现三方登陆的功能,增强用户的粘性.这篇文章主要介绍了java实现微信扫码登录第三方网站功能(原理和代码),避免做微信登录开发的朋友们少走弯路. 一.查看微信扫码登录官方文档 官方文档:https://open.weixin.qq.com/cgi-bin/showdocument?action=dir_list&t=resource/res_list&verify=1&

  • Spring Boot实现微信小程序登录

    使用Spring Boot完成微信小程序登录 由于微信最近的版本更新,wx.getUserInfo()的这个接口即将失效,将用wx.getUserProfile()替换,所以近期我也对自己的登录进行更新,并且为了巩固学习到的知识,我自己做了一个小demo,在此分享给大家,希望能对大家有所帮助.废话不多说,直接上代码. 前端 .wxml <button class="r" bindtap="bindGetUserInfo">同意</button>

  • Vue PC端实现扫码登录功能示例代码

    目录 需求描述 思路解析 前端功能实现 如何控制二维码的时效性? 前端如何获取服务器二维码的状态? 本篇文章给大家带来了关于Vue的相关知识,其中主要介绍了在PC端实现扫码的原理是什么?怎么生成二维码图片?怎么用Vue实现前端扫码登录?感兴趣的朋友,下面一起来看一下吧,希望对大家有帮助. 需求描述 目前大多数PC端应用都有配套的移动端APP,如微信,淘宝等,通过使用手机APP上的扫一扫功能去扫页面二维码图片进行登录,使得用户登录操作更方便,安全,快捷. 思路解析 PC 扫码原理? 扫码登录功能涉

  • 自定义PC微信扫码登录样式写法

    PC微信扫码登录 近期做一个PC端微信扫码登录的需求,微信扫码有两种方式,一种是新开一个二维码页面,另一种是内嵌入产品网页.本次以内嵌二维码为例,具体怎样在页面中显示一个登陆二维码,文档说的很清楚,就不赘述了,文档地址:https://open.weixin.qq.com/cg... 解决自定义微信二维码样式问题 当一切准备妥当之后,网页上的二维码初始默认是这个样子. 特别大不说(默认二维码大小280x280),还有微信登录的title,下方也有扫码登录的提示. 幸运的是,微信留了一个api给我

  • 浅析微信扫码登录原理(小结)

    微信扫码登录原理解析 扫码登录是现在流行的登录方式,使用这种方式及其方便,而且安全 扫码登录流程 原理 获取唯一的uuid, 以及包含uid信息的二维码 // 获取uuid getUUID: function() { var e = t.defer(); return window.QRLogin = {}, $.ajax({ url: i.API_jsLogin, dataType: "script" }).done(function() { 200 == window.QRLogi

随机推荐