微信第三方登录前后端分离实现思路

前端实现

这里说一下前后端的思路，页面加载时声明一个变量state=‘时间戳+6位随机数’, 前端路径生成二维码，其中有个state参数需要我们传递，这个参数你传什么，微信回调的时候就会给你返回什么。我们用之前生成那个state，当用户点击微信登录的按钮，我们就通过以state值为key和后端进行websocket连接，同时弹出二维码页面。 state对前端来说就相当于一个令牌，告诉后端是谁在使用微信登录。目的在于，当后台收到回调的时候，能准确的把数据返回当前扫码的用户，后台在微信回调的时候能拿到code的值和state的值，通过code去拿access_token和openid ，通过这两个值去请求微信用户最新信息，后端定义好返回的状态值代表啥，无非两种状态码：1.已经绑定:取出user信息，通过websocket返回给前端，2.没绑定:返回微信账户的openid和头像昵称。前端收到后端发送的websocket信息，判断微信绑定状态，如果绑定路由跳转到登录完成页面，如果未绑定，跳转到绑定或注册页面。

（想自学习编程的小伙伴请搜索圈T社区，更多行业相关资讯更有行业相关免费视频教程。完全免费哦!）

第一步

前端先设置好生成二维码的路径，

this.url ="https://open.weixin.qq.com/connect/qrconnect?appid=" +this.appid +"&redirect_uri=" +this.redirect_uri +"&response_type=code&scope=snsapi_login&state=" +this.state +"#wechat_redirect";

参数解释（这里直解释需要修改的参数）

参数名	备注
appid	这个就是申请微信登录应用的appid
redirect_uri	微信的回调地址，记得这里要url转码
state	这个是微信给我们自己传递的参数，不管你传的是啥，都会在回调中给你返回回来

第二步

用户点击微信登录页面，和后端进行websocket连接，连接的key就是我们生产二维码连接中的state

 let wsname = "ws://www.niezhiliang.com:8086/socketServer/" + this.state;this.ws = new WebSocket(wsname);//连接成功触发this.ws.onopen = function(evt) {};//这个是接收后台发送信息的方法this.ws.onmessage = function(evt) {var data = JSON.parse(evt.data);console.log(data)//在这里判断后台给的状态是1还是2  并进行相应的操作})

然后再弹出二维码页面(居中显示)

//this.url=我们在页面加载的时候拼接好的
WxLogin() {this.itop = (window.screen.availHeight - 500) / 2;//获得窗口的水平位置this.ileft = (window.screen.availWidth - 400) / 2;this.w = window.open(this.url,"newwindow","height=500, width=400, top=" +this.itop +", left = " +this.ileft +", toolbar=no, menubar=no,scrollbars=no, resizable=no,location=no, status=no");}

后端Java实现(websocket就不解释啦，如果不懂可以去看我的另一个项目)

github.com/niezhiliang…

第一步

这边是websocket的代码

配置websocket连接服务

@ServerEndpoint(value = "/socketServer/{userid}")
@Component
public class SocketServer {private Session session;private static Map<String,Session> sessionPool = new HashMap<String,Session>();private static Map<String,String> sessionIds = new HashMap<String,String>();/*** 用户连接时触发* @param session* @param userid*/@OnOpenpublic void open(Session session,@PathParam(value="userid")String userid){this.session = session;sessionPool.put(userid, session);sessionIds.put(session.getId(), userid);}/*** 收到信息时触发* @param message*/@OnMessagepublic void onMessage(String message){System.out.println("当前发送人sessionid为"+session.getId()+"发送内容为"+message);}/*** 连接关闭触发*/@OnClosepublic void onClose(){sessionPool.remove(sessionIds.get(session.getId()));sessionIds.remove(session.getId());}/*** 发生错误时触发* @param session* @param error*/@OnErrorpublic void onError(Session session, Throwable error) {error.printStackTrace();}/***信息发送的方法* @param message* @param userId*/public static void sendMessage(String message,String userId){Session s = sessionPool.get(userId);if(s!=null){try {s.getBasicRemote().sendText(message);} catch (IOException e) {e.printStackTrace();}}}}

提供给前端发送信息的api

    @RequestMapping(value = "/sendpost")public String sendPost(@RequestBody Params params) {if (params.getJson() == null || params.getUserid() == null) {return "error";}logger.info(params.getJson()+"-----------"+params.getUserid());SocketServer.sendMessage(params.getJson(),params.getUserid());return "success";}

第二步

这边是微信回调代码

 /*** 微信扫码回调* @return*/@RequestMapping(value = "/callback")public void callBack(Device device) {String code = request.getParameter("code");String state = request.getParameter("state");RespInfo respInfo = new RespInfo();respInfo.setStatus(InfoCode.ERROR);if (code != null) {StringBuffer url = new StringBuffer();/*********获取token************/url.append(request_url).append("appid=").append(appid).append("&secret=").append(secret).append("&code=").append(code).append("&grant_type=").append(grant_type);logger.info(url.toString());//调用微信查询用户基本信息的api方法JSONObject jsonObject =JSON.parseObject(HttpUtil.getResult(url.toString()));//拿到openid和请求微信api使用的tokenString openid =jsonObject.get("openid").toString();String token = jsonObject.get("access_token").toString();/*********获取userinfo************/url = new StringBuffer();url.append(userinfo_url).append("access_token=").append(token).append("&openid=").append(openid);logger.info(url.toString());//通过上面拿到的token和openid获取用户的基本信息String result = HttpUtil.getResult(url.toString());WeixinInfo weixinInfo = JSON.parseObject(result,WeixinInfo.class);if (weixinInfo != null) {//这个方法是为了去除微信昵称的特殊符号，为了避免保存数据库操作报异常我把所有的昵称表情都替换成了*weixinInfo.setNickname(filterEmoji(weixinInfo.getNickname()));//插入数据库操作weiXinService.insertOrUpdateSelective(weixinInfo);}//通过openid去找用户是否绑定User user = userService.getByOpenId(openid);if (user == null) {//说明该微信未绑定任何账号respInfo.setStatus(InfoCode.INVALID_TOKEN);respInfo.setMessage("请先注册再进行微信绑登录操作");Map<String,Object> map = new HashMap<String,Object>();map.put("openid",openid);map.put("headimgurl",weixinInfo.getHeadimgurl());map.put("nickname",weixinInfo.getNickname());respInfo.setContent(map);} else {//这里是表示该微信已经绑定了用户账号，直接返回用户登录信息就好respInfo.setStatus(InfoCode.SUCCESS);respInfo.setContent(user);}}String json = JSON.toJSONString(respInfo);/************websocket将数据响应给前端**************/Map map = new HashMap();map.put("userid",state);map.put("json",json);String params = JSON.toJSONString(map);try {//这里是将结果通过websocket返回给前端 System.out.println(HttpUtil.doPost(“http://www.niezhiliang.com:8086/websocket/sendpost”,params));} catch (Exception e) {e.printStackTrace();}}

微信第三方登录前后端分离实现思路相关推荐

微信授权登录-前后端分离
简介在前后端分离情况下实现微信服务号和订阅号授权登录,项目使用springboot+Vue前后端分离的开发模式. 备注:目前只提供后端代码实现以及业务逻辑流程图服务号开发逻辑进入活动页面根据 ...
facebook第三方登录前后端分离
facebook第三方登录三种实现方式:第三种我认为方便简单 1.js sdk 直接在官网看文档直接调用他的sdk 官网:https://developers.facebook.com/docs/f ...
H5 微信公众号授权登录前后端分离篇(资料准备+前端01)
实现微信公众号授权登录,很简单,但是注意的地方要细心,小伙伴们跟着我的思路一起实现吧! 文章目录一.帐号申请 1. 正式账号 2. 测试帐号二.微信文档 2.1. 文档主页 2.2. 授权流程 2 ...
微信公众号前后端分离授权登录
前后端分离模式下微信授权登录 https://blog.csdn.net/qq_39524670/article/details/81118721?utm_medium=distribute.pc_r ...
php前后端分离登录,前后端分离下如何登录
1 Web登录涉及到知识点 1.1 HTTP无状态性HTTP是无状态的,一次请求结束,连接断开,下次服务器再收到请求,它就不知道这个请求是哪个用户发过来的.当然它知道是哪个客户端地址发过来的,但是对于 ...
springboot+mybatis-plus+vue完成微信支付（前后端分离）
微信支付的学习链接:https://pay.weixin.qq.com/wiki/doc/api/native.php?chapter=9_1 一.数据库准备 t_order表主要完成订单查询 /* ...
SSO单点登录前后端分离完整版·（开源）
前言:3月建的仓,完成确是在7月中旬,实际完成时间加起来不到10天,中间停滞了很久,主要工作太忙,白天没时间搞,况且工作摸鱼也不是我的作风,晚上下班回家要帮家人一起带娃,唯一的时间也会用来看看书和视频 ...
微信公众号前后端分离项目网页授权登录问题
问题描述微信公众号网页授权登录,因为是前后端项目,所以跳转是在前端做的,所以回调地址配置的是前端页面地址,例如:xxx/callback?redirect_url=需要登录才能访问的页面地址,问题发 ...
Nginx的简单使用，配置多前端，多端口【微信小程序+前后端分离跨域解决】
微信小程序微信小程序需要服务器要有域名,不能有端口,但是我还有一个WebSocket的wss协议路径需要填,都是后台的示例配置文件,配置https转发http,配置https转发wss user ...

微信第三方登录前后端分离实现思路

微信第三方登录前后端分离实现思路

前端实现

第一步

参数解释（这里直解释需要修改的参数）

第二步

后端Java实现(websocket就不解释啦，如果不懂可以去看我的另一个项目)

第一步

第二步

微信第三方登录前后端分离实现思路相关推荐

最新文章

热门文章