网页微信扫码登录代码实现,前后端分离

1.先获取到微信appId 和 appSecret 确定好 回调方法的域名。

2.获取生成微信二维的url

wxWebDomain:回调的域名,例如:https://www.baidu.com/ 

第一步获取到微信生成二维码的url;

第二步编写回调方法get请求并且要公开能访问,在回调方法中生成token令牌存入redis;

第三步前端通过state检查扫码状态码来轮询检查用户是否扫码成功,并且获取生成的令牌token;

  /**
     * 后台等-微信扫码登录 跳转到微信扫码的url 界面
     */
    @GetMapping(value = "/wxLogin")
    public AjaxResult wxLogin(){
        AjaxResult ajax = AjaxResult.success();
        String callBackMethod=wxWebDomain+"/weChatLoginCallBack";
        String state=IdUtils.fastUUID().replace("-","");
        String url = WeChatUtil.getWeChatUrl(wxAppId,state,callBackMethod);
        ajax.put("wxCodeUrl",url);
        ajax.put("state",state);
        return ajax;
    }

    /**
     * 微信扫码登录后 回调方法
     */
    @GetMapping("/weChatLoginCallBack")
    public void weChatLoginCallBack(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException
    {
        String code = req.getParameter("code");
        String state = req.getParameter("state").replace("STATE","");
        //1.使用微信用户信息直接登录,无需注册和绑定
        WeChatUserLoginInfoVo userInfo =WeChatUtil.getWeChatUserInfo(wxAppId,wxAppSecret,code);
        //2.生成令牌-->将微信与当前系统的账号进行绑定
        WxResultVo wxResultVo= loginService.loginByWxOpenId(userInfo);
        //存到redis中
        redisCache.setCacheObject("login:code:"+state,wxResultVo,5, TimeUnit.MINUTES);
    }

    /**
     * 前端轮询判断用户是否登录了
     */
    @GetMapping(value = "/wxLoginPolling")
    public AjaxResult wxLoginPolling(@RequestParam String state){
        //WxResultVo 自己构造返回给前端的数据
        WxResultVo wxResultVoRedis=redisCache.getCacheObject("login:code:"+state);
        WxResultVo wxResultVoResult=wxResultVoRedis!=null?wxResultVoRedis:new WxResultVo("0","","扫码登录中");
        return AjaxResult.success(wxResultVoResult);
    }

 

@Slf4j
public class WeChatUtil {

    /***
     * 获取网页版微信扫码url地址
     * @param wxAppId 微信appid
     * @param checkStateCore 扫码状态检查码
     * @param callBackMethod 回调方法
     */
    public static String getWeChatUrl(String wxAppId,String checkStateCore,String callBackMethod){
        log.info("微信扫码后回调方法====="+callBackMethod);
        return  "https://open.weixin.qq.com/connect/qrconnect?appid="+wxAppId
                +"&redirect_uri="+ URLEncoder.encode(callBackMethod)
                +"&response_type=code"
                +"&scope=snsapi_login&state=STATE"+checkStateCore
                +"#wechat_redirect";
    }


    /**
     * 获取微信用户的基本信息
     * @param wxAppId 微信appid
     * @param wxAppSecret 微信的secret
     * @param code 对应扫码得到的code
     */
    public static WeChatUserLoginInfoVo getWeChatUserInfo(String wxAppId, String wxAppSecret, String code){
        //获取用户openid
        String url="https://api.weixin.qq.com/sns/oauth2/access_token?appid="+wxAppId
                + "&secret="+wxAppSecret
                + "&code="+code
                + "&grant_type=authorization_code";
        String jsonString=OkHttpUtils.getInstance().doGet(url);
        JSONObject jsonObject =JSONObject.parseObject(jsonString) ;
        String openid = jsonObject.getString("openid");
        String accessToken = jsonObject.getString("access_token");
        //微信公开的用户信息
        String infoUrl = "https://api.weixin.qq.com/sns/userinfo?access_token="+accessToken
                +"&openid="+openid
                +"&lang=zh_CN";
        String userInfoString=OkHttpUtils.getInstance().doGet(infoUrl);
        log.info("回调后获取微信用户信息: "+userInfoString);
        return JSON.toJavaObject(JSONObject.parseObject(userInfoString),WeChatUserLoginInfoVo.class);
    }

}

@Data
public class WeChatUserLoginInfoVo {

    /**
     * 用户唯一的unionid
     */
    private String unionid;

    /**
     * 用户对应的应用的openid
     */
    private String openid;

//    /**
//     * 手机号,登录扫码是没有手机号的
//     */
//    private String phone;

    /**
     * 呢称
     */
    private String nickname;

    /**
     * 头像
     */
    private String headimgurl;

    /**
     *  性别 1-女 2-男
     */
    private String sex;

    /**
     * 使用语言
     */
    private String language;

    /**
     * 所属城市
     */
    private String city;

    /**
     * 所属省份
     */
    private String province;

    /**
     * 所属国家
     */
    private String country;

    /**
     * 权限
     */
    private String privilege;

}

 

  • 6
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 5
    评论
实现微信登录的前后分离流程如下: 1. 前生成登录二维码:前页面加载时,向后发送请求获取登录二维码的参数信息,包括appid和redirect_uri等,后根据这些参数生成登录二维码的URL,并返回给前。 2. 前展示二维码:前使用第三方库(如qrcode.js)将生成的登录二维码展示给用户。 3. 用户码确认登录:用户使用微信描前展示的二维码,微信客户会将用户的微信账号与该二维码关联,并向后发送确认登录的请求。 4. 后验证登录状态:后接收到微信客户发送的确认登录请求后,根据请求中的参数进行验证,包括校验appid、redirect_uri、code等信息的有效性。 5. 后获取用户信息:验证通过后,后使用code参数向微信服务器发送请求,获取用户的access_token和openid等信息。 6. 后生成登录凭证:后根据获取到的用户信息生成自己的登录凭证(如JWT),并将该凭证返回给前。 7. 前保存登录状态:前接收到后返回的登录凭证后,可以将该凭证保存在本地(如localStorage或cookie)用于后续的请求验证和会话管理。 8. 后续请求的验证:前后分离后,后续的请求需要在请求头中携带登录凭证进行验证,后根据凭证的有效性判断用户的登录状态。 这就是前后分离实现微信登录的大致流程,通过这种方式可以实现用户使用微信账号进行快速登录和注册。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值