【第三方登录】微信web扫一扫登录步骤
创始人
2025-01-16 17:05:31
0

目录

  • 目的
  • 特别说明
  • 要求
  • 前端
  • 后端
  • 总结

目的

实现用微信扫一扫,登录网站
微信官网文档:微信接口文档

特别说明

截止与2023年10月26日前,微信登录需要在 “微信开发平台” 绑定第三方应用或网站,然而,注册、认证、绑定网站走完才能用这个微信扫码登录功能,注意:需要一次性交300元的认证费。一般来说只有企业才做这样的事情,如果是个人建议看看就行。
步骤如下图所示:

要求

注册一个“微信开发平台”账号、认证账号、绑定一个网站。(三个要求)
如下所示:
在这里插入图片描述

打开如下:注意这个回调域名,要和前端vue上的一致
在这里插入图片描述

前端

在vue的index.html文件中添加

                    

登录页面,记得redirect_uri要与上面微信开放平台的域名一致

// Login.vue     

页面会出现一个二维码
在这里插入图片描述

后端

    @GetMapping("/getUnionid")     public AjaxResult getUnionid(@RequestParam("code") String code) {         String ParamAppid = "appid=" + wxProperties.getAppid();         String ParamSecret = "secret=" + wxProperties.getSecret();         // 用户授权码         String ParamCode = "code=" + code;         String url = "https://api.weixin.qq.com/sns/oauth2/access_token?grant_type=authorization_code&" + ParamAppid + "&" + ParamSecret + "&" + ParamCode;         String forObject = restTemplate.getForObject(url, String.class);         JSONObject jsonObject = JSONObject.parseObject(forObject);          if (jsonObject != null) {             try {                 String access_token = jsonObject.get("access_token").toString();                 String openid = jsonObject.get("openid").toString();                 WXUserInfo wxUserInfo = getWXUserInfo(access_token,openid);                 HashMap hashMap = new HashMap<>();                 hashMap.put("wxUserInfo", wxUserInfo);                 return AjaxResult.success("操作成功", hashMap);             } catch (Exception e) {                 return AjaxResult.error();             }         }         return AjaxResult.error();     }      /**      * 获取微信用户详情信息      * @param access_token  用户凭证      * @param openid        用户id      * @return              微信用户实体类      */     private WXUserInfo getWXUserInfo(String access_token,String openid) {         WXUserInfo wxUserInfo = new WXUserInfo();          String wx_url = "https://api.weixin.qq.com/sns/userinfo?lang=zh_CN&access_token=" + access_token + "&openid=" + openid;         String ob = restTemplate.getForObject(wx_url, String.class);          JSONObject job = JSONObject.parseObject(ob);         // 封装实体类         if (job != null) {             wxUserInfo.setOpenid(job.get("openid").toString());             wxUserInfo.setNickname(job.get("nickname").toString());             wxUserInfo.setSex(job.get("sex").toString());             wxUserInfo.setLanguage(job.get("language").toString());             wxUserInfo.setCity(job.get("city").toString());             wxUserInfo.setPrivilege(job.get("province").toString());             wxUserInfo.setCountry(job.get("country").toString());             wxUserInfo.setHeadimgurl(job.get("headimgurl").toString());             wxUserInfo.setPrivilege(job.get("privilege").toString());             wxUserInfo.setUnionid(job.get("unionid").toString());         }         return wxUserInfo;     } 

总结

第一步,用户同意微信登录后,获取code
第二步,拿着code可以获取openid、unionid、access_token
第三步,拿着openid和access_token可以获取用户基本信息;

后端能拿到个人信息,其实就已经完成了,接下来就看具体的个人业务需求了。祝君工作顺利!

相关内容

热门资讯

黑科技辅助!aapoker辅助... 黑科技辅助!aapoker辅助使用教程,太离谱了竟然是真的有挂(透视)解密教程(2020已更新)(哔...
黑科技黑科技挂(aapker代... 黑科技黑科技挂(aapker代理)外挂透明挂辅助挂(透视)细节方法(2022已更新)(哔哩哔哩);1...
黑科技功能(德州ai)外挂透明... 黑科技功能(德州ai)外挂透明挂黑科技辅助工具(透视)分享教程(2026已更新)(哔哩哔哩);致您一...
黑科技科技(红龙扑克辅助器安全... 黑科技科技(红龙扑克辅助器安全吗)太夸张了从来存在有挂(透视)2025教程(2021已更新)(哔哩哔...
黑科技脚本!wpk辅助挂,太坑... 黑科技脚本!wpk辅助挂,太坑了真是有挂(透视)必备教程(2020已更新)(哔哩哔哩);1、该软件可...
黑科技挂(WPK苹果版本)外挂... 黑科技挂(WPK苹果版本)外挂透明挂辅助器(透视)教你教程(2022已更新)(哔哩哔哩);1、操作简...
黑科技最新(德州wpk)外挂透... 黑科技最新(德州wpk)外挂透明挂黑科技辅助插件(透视)AI教程(2023已更新)(哔哩哔哩)1、超...
黑科技辅助挂(wepower透... 黑科技辅助挂(wepower透视辅助效果)太坑了一直是真的有挂(透视)曝光教程(2026已更新)(哔...
黑科技代打!aa扑克德州辅助工... 黑科技代打!aa扑克德州辅助工具,太坑了真是是有挂(透视)必胜教程(2020已更新)(哔哩哔哩)1)...
黑科技黑科技(德州ai人工智能... 黑科技黑科技(德州ai人工智能)外挂透明挂辅助软件(透视)细节揭秘(2024已更新)(哔哩哔哩);1...