web项目web接入微信登录

最近写了一个简单的微信第三方登录功能，存粹分享下心得和体会

首先需要APPID和SCRECT还有回调域（第三方地址，一般是公司的域名）（域名解析），

获取步骤是：

a.在微信开放平台https://open.weixin.qq.com/经过注册成为开发者。

b.在“管理中心”中创建一个移动应用来提交审核

之后是微信登录流程：

简单用例子来说就是：首先要分辨是第一次登录还是不是第一次登录，是前端传过来的授权临时票据code和appid和secrect来进行操作，
再在wxuser表中根据openid能否查询到对象，并且对象的userid是否存在，有的话不是第一次登录，没有就是第一次登录，
如果不是第一次登录，那么就是免密登录，重置token的有效时间，然后再设置盐值和密码的logininfo为空，就可以返回并且加上
集合就ok，如果是第一次登录，就需要写入三张表并且绑定，具体是首先非空校验，之后判断验证码是否过期，之后再验证验证码
是否正确，之后再验证是否根据手机号能查询到用户，能查到的话就可以只添加wxuser，否则要添加logininfo，user，最后是wxuser，
最后放入redis中，并把密码和盐值设置为空，最后在前端跳转首页。

经过整理流程就是：

前端：

1.在前端的登录页准备微信登录的按钮
2.当用户点击微信扫码登录，前端接缪按向微信发起获取授权的请求
3.微信直接展示扫描二维码给用户（询问用户要不要给我们web项目授权）
4.用户扫码，确认授权我们的项目可以获取微信用户信息
5.微信收到确认，生成code（授权码），通过回调域）拼接code返回
6.我们的web项目在前台页面上就可以获取授权码了

微信登录流程
1.在前端页面中，我们定义钩子函数。
   从请求栏中获取code，并且触发调用后端的微信登录接口，将code传送到后端
2.后端接口收到请求，交给service处理
3.service业务流
4.code不能为空
5.根据code从微信获取token 使用httpClient
6.拿到token+openId
7.判断openId是已经存在（查询t_wxUser），
   7.1.如果已经有了并且userid不为空，直接免密登录
   7.2 如果为空，需要让用户绑定个人用户信息
      返回token+openId 前端帮我们跳转到绑定页面

二：微信绑定流程
1.在前端页面的钩子函数中
2.接收微信登录流程的返回值，
3.跳转到绑定页面
4.绑定页面解析地址栏参数并且接收用户输入的参数
5.发起微信绑定流程
6.后端接收参数交给service处理
7.service业务流
一：校验
   1.空校验
   2.判断验证码
二：判断phone是否被注册 user
   1.如果注册了，那么我们可以直接绑定微信用户了
   2.如果没有注册过，要生成t_user + t_loginInfo
三：通过 token+openId 查询微信信息 wxuser
     生成t_wxuser
四：绑定user和wxuser
五：免密登录

/*微信登录*/
@Override
public AjaxResult wechat(Map<String, String> map) {String code = map.get("code");if (StringUtils.isEmpty(code)){//为空throw new MyException("系统异常。。。");}//通过code，appid，secret获取token令牌String url = WxConstants.GET_TOKEN_URL.replace("APPID",WxConstants.APPID).replace("SECRET",WxConstants.SECRET).replace("CODE",code);//发送请求，获取tokenString obj = HttpClientUtils.httpGet(url);//把json字符串转成json对象JSONObject jsonObject = JSONObject.parseObject(obj);//获取token和openidString token = jsonObject.getString("access_token");String openid = jsonObject.getString("openid");//通过openid和userid查询，如果不为空，说明登录过，免密登录WxUser wxUser = wxUserMapper.loadByOpenId(openid);String param = "?token=" + token + "&openId=" + openid;if (wxUser != null && wxUser.getUser_id() != null){//之前扫描过，直接放行//查询对应的logininfo信息，LoginInfo loginInfo = loginInfoMapper.loadByUserId(wxUser.getUser_id());//4.1获取tokenString token1 = UUID.randomUUID().toString();redisTemplate.opsForValue().set(token1,loginInfo,30, TimeUnit.MINUTES);Map<String, Object> map1 = new HashMap<>();map1.put("token",token1);//把盐值名和密码设置为空loginInfo.setPassword("");loginInfo.setSalt("");map1.put("loginInfo",loginInfo);//对象 存对象要序列化return AjaxResult.me().setResultObj(map1);}else {//第一次登录return AjaxResult.me().setSuccess(false).setResultObj(param);}
}/*
* 微信绑定
*     phone:"13330964748",verifyCode:"",token:"",openId:""
* */
@Override
public Map<String, Object> binder(Map<String, String> map) {String phone = map.get("phone");System.out.println(phone);String verifyCode = map.get("verifyCode");System.out.println(verifyCode);String token = map.get("token");System.out.println(token);String openId = map.get("openId");System.out.println(openId);//1.空校验if (StringUtils.isEmpty(phone)|| StringUtils.isEmpty(verifyCode)|| StringUtils.isEmpty(token)|| StringUtils.isEmpty(openId)){throw new MyException("参数不能为空");}//2.验证码校验//验证码对否过期Object o = redisTemplate.opsForValue().get("binder:" + phone);//端输入的验证码和发送的是否一致 不区分//获取验证码String code = o.toString().split(":")[0];if (!verifyCode.equalsIgnoreCase(code)){throw new MyException("验证码错误，请重新输入！！");}//3.判断手机号是否被注册User user = userMapper.loadByPhone(phone);LoginInfo loginInfo = null;User userTemplate = null;if (user != null){//之前注册过了System.out.println(111);userTemplate  = user;loginInfo = loginInfoMapper.loadByUserId(userTemplate.getId());}else {//没有注册，重新保存三张表System.out.println(222);User user1 = initUser(phone);userTemplate = user1;//设置logininfo_idloginInfo = initLoginInfo(userTemplate);//设置类型为1用户loginInfo.setType(1);//添加登录信息loginInfoMapper.add(loginInfo);System.out.println(loginInfo.getId());userTemplate.setLogininfo_id(loginInfo.getId());//添加logininfo_iduser1.setLogininfo_id(loginInfo.getId());//添加用户userMapper.add(user1);}//获取用户信息，保存在wxuserString obj = HttpClientUtils.httpGet(WxConstants.GET_USER_URL).replace("ACCESS_TOKEN", token).replace("OPENID", openId);WxUser wxUser = initWxuser(obj);//绑定wxUser.setUser_id(userTemplate.getId());//保存wxuser中的信息wxUser.setOpenid(openId);wxUserMapper.add(wxUser);//4.把用户信息放入redis中//4.1获取tokenredisTemplate.opsForValue().set(token,loginInfo,30, TimeUnit.MINUTES);Map<String, Object> map1 = new HashMap<>();map1.put("token",token);//把用户名和密码设置为空loginInfo.setPassword("");loginInfo.setSalt("");map1.put("loginInfo",loginInfo);//对象 存对象要序列化return map1;
}//通过obj生成wxUser对象
private WxUser initWxuser(String obj) {JSONObject jsonObject = JSONObject.parseObject(obj);WxUser wxUser = new WxUser();wxUser.setOpenid(jsonObject.getString("openid"));wxUser.setNickname(jsonObject.getString("nickname"));wxUser.setSex(jsonObject.getInteger("sex"));wxUser.setAddress(null);wxUser.setHeadimgurl(jsonObject.getString("headimgurl"));wxUser.setUnionid(jsonObject.getString("unionid"));return wxUser;
}//通过user生成logininfo对象
private LoginInfo initLoginInfo(User userTemplate) {LoginInfo info = new LoginInfo();BeanUtils.copyProperties(userTemplate,info); //按照同名原则拷贝属性return info;
}//通过手机号生成user对象
private User initUser(String phone) {User user = new User();user.setUsername(phone);user.setPhone(phone);user.setEmail(null);//给一个随机密码String salt = UUID.randomUUID().toString();String password = MD5Utils.encrypByMd5("1"+salt);user.setPassword(password);user.setSalt(salt);user.setState(1);user.setCreatetime(new Date());return user;
}

web项目web接入微信登录相关推荐

uni-app - 最详细 H5 网页接入微信登录功能，提供公众号配置与详细注释示例代码（移动端网页实现点击登录按钮后调用微信公众号授权登录功能详细讲解接入流程与详细示例代码）官方最新超级详细教程
前言关于 uni-app 项目中接入微信授权登录的文章鱼龙混杂,各种乱代码.过时.没注释.不讲流程原理,非常难用. 本文实现了 uni-app H5 移动端网页项目,实现微信授权登录功能,详细讲解接 ...
接入微信登录---（由于微信的官方文档写的有点散，特此记录一下）
最近app上Goole市场,三方登录这块原先用的是mob的,但是Goole那边检测到mob会自动收集手机用户的手机号码信息并上传到mob的后台,所以App被下架了,没办法就让直接对接微信登录.下面就是 ...
详解如何进行第三方App接入微信登录
微信登录接入微信登录遵循协议Aouth2.0中的授权码模式我们来看一下Aouth2.0中的授权码模式是怎么定义的: 授权码模式(authorization code)是功能最完整.流程最严密的授权 ...
CocosCreator微信小游戏接入微信登录获取微信名、头像、经纬度等信息
前言微信小游戏接入微信登录还是很简单的,不像原生平台开发,还需要提供appid,appsecret等信息,并有一系列的和微信平台的交互,才能最终授权成功. 下面TS代码演示了,老的接入流程. exp ...
第三方App接入微信登录解读
最近在做一个微信登录功能,发现腾讯的API文档写的实在是让人摸不着头脑,也没有搜到很详细的能让人参考的文章,借此把自己的一点儿使用心得与大家分享,欢迎指正其中的不足之处,谢谢! 准备工作 1.在微信开 ...
WeChat----网站接入微信登录(前端)
网站接入微信登录标识符长度 openid 长度:28, 普通用户的标识,对当前开发者帐号唯一.一个openid对应一个公众号 unionid 长度:29, 用户统一标识.针对一个微信开放平台帐号下的 ...
Android Studio App 接入微信登录
安卓接入微信登录微信开发平台获取AppId和AppSecret 开始接入添加依赖注册wxApi 登录调用监听登录回调注意事项微信开发平台获取AppId和AppSecret 创建应用填写对 ...
我的个人网站不让接入微信登录，于是我做了这个
原文链接:https://www.jylt.cc/#/detail?id=311995d9731f6ff96f9a14cfe138d3c5 身为一名Java程序猿,怎么能没有自己的网站呢?经过几个日夜 ...
微信开发 - 第三方网站接入微信登录、微信支付时，本地 redirect_uri 参数错误导致无法调试的解决方案（微信开放平台）完美解决每次都需要部署到线上测试，在本地使用本地 ip 就能轻松调试
问题描述网上的教程都非常乱且无效,本文将站在新手的角度,超级详细的讲解. 本文提供在微信开放平台,接入微信登录和微信支付时,本文无法调试 redirect_uri 回调错误的解决方案, 仅需几个 ...

web项目web接入微信登录

web项目web接入微信登录相关推荐

最新文章

热门文章