PC端实现微信扫码登入功能

微信注册应用
首先需要在微信开放平台进行注册（https://open.weixin.qq.com/），并认证一个网站应用。
注册步骤可参考：https://blog.csdn.net/qq_36014509/article/details/88996562
微信二维码API对接文档：https://developers.weixin.qq.com/doc/oplatform/Website_App/WeChat_Login/Wechat_Login.html

前端二维码展示

<div id="bodyDiv">
<button onclick="wxLogin()" class="layui-btn layui-btn-normal layui-btn-fluid" style="box-shadow: 0 1px 6px #1E9FFF;border-radius: 4px;"><img src="${path}/img/wx.png" style="width: 18px;">
使用微信登录
</button>
</div>

页面需要引入JS文件（支持https）：

http://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js

生成微信二维码

//用的layUI的弹出框
var wxLoginSoleCodeGetTimer ;
function wxLogin(){//背景添加高斯模糊$("#bodyDiv").addClass("vague");//显示微信扫码登录layer.open({type: 1,closeBtn:1,resize:false,skin: 'wxClass',title:['微信扫码登录'],area: ['340px', '485px'],content: '<div id="wx-qrcode" style="margin:20px;"></div>',cancel: function(index, layero){ //删除背景添加高斯模糊$("#bodyDiv").removeClass("vague");//停止定时器window.clearInterval(wxLoginSoleCodeGetTimer); }     });//调用方法生成二维码createQRCode();
}

微信二维码进行倒计时

function createQRCode(){//获取当前时间戳准备存入redisvar soleCode= Date.parse(new Date());   //把当前时间戳传到后台$.get("${path}/login/wxLoginSole.do",{soleCode:soleCode},function(data){if(data.code == "success"){//实例微信登录二维码JS对象var obj = new WxLogin({self_redirect:false,id:"wx-qrcode",  //这个id为弹出框的样式id,主要是为了让生产的二维码嵌套在弹出框中appid: "wx31bb558f766faae6", scope: "snsapi_login", redirect_uri: "http://localhost/login/wxLoginOAuth",  //扫码后调用的后台方法state: soleCode})//设置定时器每秒请求后台获取redis中时间戳做对比wxLoginSoleCodeGetTimer = window.setInterval("getWxLoginSoleCode('"+soleCode+"')",1000); }else{layer.alert('出错了，请重试！', {icon: 2});}});
}

把时间戳存入redis

    //获取前端生成的时间戳存进redis@ResponseBody@RequestMapping("/wxLoginSole")public Object wxLoginSole(HttpServletRequest request,HttpServletResponse response){Map<String,Object> result = new HashMap<String,Object>();//取出时间戳String soleCode = request.getParameter("soleCode");if(StringUtils.isNotBlank(soleCode)){//选择redis数据库1boolean resultSetDb = redisUtil.select(1)if(resultSetDb){//将guid存在redis里，保存时间十分钟boolean resultSet = redisUtil.set(soleCode ,"1",600);if(resultSet){result .put("code", "success");}else{result .put("code", "failed");}}else{result .put("code", "failed");}}else{result .put("code", "failed");}return result;}

定时请求redis中的时间戳，看二维码是否超时

//定时请求微信登录数据
function getWxLoginSoleCode(soleCode){$.get("${path}/login/getWxLoginSoleCode.do", {soleCode:soleCode}, function(data) {if (data.code == 'success') {if(data.info == 'stop'){//二维码已过期，停止定时器且提示二维码已过期window.clearInterval(wxLoginSoleCodeGetTimer); //先删除微信二维码元素$("#wx-qrcode").empty();//自定义元素覆盖微信二维码元素$("#wx-qrcode").append('<div style="text-align: center;padding-top: 120px;"><p>二维码已失效</p><button style="margin-top: 5px;" id="retrieve-qrcode" type="button" class="layui-btn layui-btn-normal">重新获取二维码</button></div>');}}else{//后台异常或没有soleCode参数，停止定时器               window.clearInterval(wxLoginSoleCodeGetTimer); }});
}

    //前端定时请求该方法获取redis中存入的时间戳@ResponseBody@RequestMapping("/getWxLoginSoleCode")public Object getWxLoginSoleCode(HttpServletRequest request,HttpServletResponse response){JSONObject jsonObj = new JSONObject();try {//取出请求中带有的时间戳String soleCode= request.getParameter("soleCode");if(StringUtils.isNotBlank(soleCode)){//选择redisDb6boolean resultSetDb = redisUtil.setDb(6);if(resultSetDb){//定时器每秒获取一次redis中的时间戳String resultGet = (String)redisUtil.get(soleCode);if(StringUtils.isBlank(resultGet)){//当值为空已找不到时，说明二维码已到十分钟已过期，返回给前端停止定时器jsonObj.put("info", "stop");jsonObj.put("code", "success");}else{//否则继续等待jsonObj.put("code", "success");}}}else{jsonObj.put("code", "failed");}} catch (Exception e) {jsonObj.put("code", "failed");e.printStackTrace();}return jsonObj;}

//重新获取二维码
$(document).on("click", "#retrieve-qrcode", function(){//先删除自己元素$("#wx-qrcode").empty();//重新加上二维码createQRCode();});

后端代码进行验证

返回说明

正确的返回：

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

错误返回样例：

{"errcode":40029,"errmsg":"invalid code"}

后端登入操作

   //微信登录鉴权及跳转@ResponseBody@RequestMapping("/wxLoginOAuth")public Object wxLoginOAuth(HttpServletRequest request,HttpServletResponse response){Map<String,Object> result = new HashMap<String,Object>();// 第三方发起微信授权登录请求，微信用户允许授权第三方应用后，微信会拉起应用或重定向到第三方网站，并且带上授权临时票据code参数；String code = request.getParameter("code");//前端扫码登入传来的时间戳String state = request.getParameter("state");//用户拒绝授权时code为空，微信也不会请求该接口。为了防止非法请求，若code为空则返回if(StringUtils.isBlank(code)){result.put("code","failed");result.put("msg","登入请求被拒绝！");  return result;}//请求state为空则不正常，直接返回。否则去redis验证是否正确合法if(StringUtils.isBlank(state)){result.put("code","failed");result.put("msg","请求状态异常！");return result;}else{//选择redis数据库6boolean resultSetDb = redisUtil.setDb(6);if(resultSetDb){//根据state判断redis中是否存在该state。若没值说明二维码已过期或者请求不合法boolean resultHasKey = redisUtil.hasKey(state);//微信账号和系统账号绑定时会用到redisUtil.set("code",code,600);  //在redis缓存中保留十分钟if(!resultHasKey){result.put("code","failed");result.put("msg","请求超时或异常，请重新扫码登入！");return result;}}else{result.put("code","failed");result.put("msg","请求超时或异常，请重新扫码登入！");return result;}}//请求微信通过code获取access_tokenString accessToken = getInfo("https://api.weixin.qq.com/sns/oauth2/access_token?appid=APPID&secret=SECRET&code=CODE&grant_type=authorization_code");//将请求结果字符串转jsonJSONObject accessTokenJson = JSONObject.fromObject(accessToken);String access_token = (String)accessTokenJson.get("access_token");//接口调用凭证，登录后右上角展示数据需要该值去获取String openid = (String)accessTokenJson.get("openid");//授权用户唯一标识String unionid = (String)accessTokenJson.get("unionid");//用户统一标识（微信登录不需要该字段，但后面如果拓展其他功能可能需要）if(StringUtils.isNotBlank(openid) && StringUtils.isNotBlank(unionid) && StringUtils.isNotBlank(access_token)){//跟据授权标识查询用户User user = userService.selectByOpenid(openid);//若根据openid查不到用户，则说明没有绑定系统账号，此时跳转到绑定账号页面。if(user == null){//跳转微信账号绑定页面，同时把时间戳参数state带过去response.sendRedirect("/wxbindlogin.html?key="+state);}else{//否则已绑定系统账号，可以直接登录//以下为登录User userNew = new User();userNew.setAccount(user.getAccount());loginService.updatePWD(userNew);//根据access_token和openid获取用户昵称和头像用作右上角显示String wxInfo = getInfo("https://api.weixin.qq.com/sns/userinfo?access_token="+access_token+"&openid="+openid);//将请求结果字符串转jsonJSONObject wxInfoJson = JSONObject.fromObject(wxInfo);String nickname = (String)wxInfoJson.get("nickname");//普通用户昵称String headimgurl = (String)wxInfoJson.get("headimgurl");//用户头像，最后一个数值代表正方形头像大小（有0、46、64、96、132数值可选，0代表640*640正方形头像），用户没有头像时该项为空HttpSession session = request.getSession();session.setAttribute("wxusername", nickname);session.setAttribute("wxuserimg", headimgurl);response.sendRedirect("/index3.jsp");}//不管有没有绑定账号或登录成功，state已完成鉴权任务，所以删除redis中的state信息redisUtil.setDb(6);redisUtil.del(state);}else{response.sendRedirect("/login.html");return;}} catch (Exception e) {e.printStackTrace();try {response.sendRedirect("/login.html");} catch (IOException e1) {// TODO Auto-generated catch blocke1.printStackTrace();}}}

//调用接口
private String getInfo(String URL) {// 创建Httpclient对象CloseableHttpClient httpclient = HttpClients.createDefault();CloseableHttpResponse response = null;String resultString = null;try {// 创建uriURIBuilder builder = new URIBuilder(URL);URI uri = builder.build();// 创建http GET请求HttpGet httpGet = new HttpGet(uri);// 执行请求response = httpclient.execute(httpGet);// 判断返回状态是否为200if (response.getStatusLine().getStatusCode() == 200) {resultString = EntityUtils.toString(response.getEntity(),"UTF-8");}} catch (Exception e) {e.printStackTrace();} finally {try {if (response != null) {response.close();}httpclient.close();} catch (IOException e) {e.printStackTrace();}}return resultString;
}

PC端实现微信扫码登入功能相关推荐

最最最详细的springboot项目中集成微信扫码登入功能.步骤代码超级详细(OAuth2)
说到登录注册,就会想到先要注册一个用户名,在进行登入,但是现在大多数的网站都集成了微信登入,不需要注册,给你一个二维码,微信一扫直接登录.这确实是十分便捷的.所以我们会尽量在项目中实现这一功能.减少用 ...
c#版在pc端发起微信扫码支付
c#版在pc端发起微信扫码支付参考此连接(https://www.cnblogs.com/vinsonLu/p/5166214.html#!comments) posted on 2019-01-0 ...
pc端实现微信扫码登录
pc端实现微信扫码登录流程:使用vue-wxlogin组件当我们打开微信扫一扫,此时二维码组件会有变化,显示扫描成功我们的手机就会弹出一个授权页面.记住让后端绑定一个微信公众,通过授权该公众就可以 ...
微信PC端网站微信扫码登陆
各种概念 1. 微信公众号开发平台,指的是mp.weixin.qq.com,也是公众号管理的平台,里面有一个开发者中心,开启后,才可以制作和自己网站有联系的功能,例如调用网站的用户信息等. 2. 微信 ...
Java SpringMVC实现PC端网页微信扫码支付完整版
一:前期微信支付扫盲知识前提条件是已经有申请了微信支付功能的公众号,然后我们需要得到公众号APPID和微信商户号,这个分别在微信公众号和微信支付商家平台上面可以发现.其实在你申请成功支付功能之后,微 ...
微信扫码登入改变二维码样式
node.js下载地址或者用代码将text 转换为base64 <script type="text/javascript" src="http://res ...
vue实现网页端企业微信扫码登录功能（前端部分）
时至今日,企业微信在企业日常工作中的使用越来越频繁也越来越重要,不少企业已使用企业微信进行着日常的工作安排管理.在这种背景下,各类系统和企业微信对接的需求也不断增加,今天要说的就是一个比较常见的需求 ...
企业微信H5_身份验证,PC网站企业微信扫码授权登录
企业微信H5_身份验证,PC网站企业微信扫码授权登录文章目录一.扫码登录配置 1. 企业微信扫码登录接入流程 2. 企业微信扫码登录接入流程拆解 3. 开启网页授权登录二.实战演练 2.1. 用 ...
java实现PC网站实现微信扫码登陆
近期,开发一个项目要求PC网站可以进行扫码登陆. 1.前期工作需要先在微信开放平台进行注册(https://open.weixin.qq.com/),并认证一个网站应用. 点击查看按钮,我们需要记录 ...