使用码上登录实现微信扫一扫登录 |
您所在的位置：网站首页 › 为什么wps登录用微信扫码登陆不上 › 使用码上登录实现微信扫一扫登录 |
使用码上登录实现微信扫一扫登录
|
微信扫一扫登录测试
码上登录开发和使用登录的时序图准备工作后台开发前端显示
码上登录
码上登录是一个小程序，对个体开发者提供了免费的微信扫一扫登录入口，因为微信开发者需要企业认证，没办法在个人网站上做测试。码上登录相当于一个桥接入口，为我们去申请获取扫一扫之后的用户登录信息。 开发和使用 登录的时序图
在码上登录创建应用，指定回调URL，获取secretKey 后台开发我这里使用的springboot 2.2.1.RELEASE，使用openfeign跨服务访问 数据请求接口 @Resource UserService userService; @Resource UserServiceRemote userServiceRemote; @GetMapping(value = "/getQrInfo") @CrossOrigin(maxAge = 3600) public BaseResponseInfo getQrInfo(){ JSONObject qRcode = userServiceRemote.getQRcode(); BaseResponseInfo res = new BaseResponseInfo(); res.code = 200; res.data = qRcode; return res; } @PostMapping(value = "/userScanedInfo") public JSONObject backUserScanedInfo( @RequestParam(value = "userId",required = false) String userId, @RequestParam(value = "tempUserId",required = false) String tempUserId, @RequestParam(value = "nickname",required = false) String nickname, @RequestParam(value = "avatar",required = false) String avatar, @RequestParam(value = "ipAddr",required = false) String ipAddr){ log.info("用户信息： "+ "userId: "+userId+ "tempUserId: "+tempUserId+ "nickname: "+nickname+ "avatar: "+avatar+ "ipAddr: "+ipAddr); JSONObject jsonObject = new JSONObject(); if (userId != null){ jsonObject.put("errcode",0); jsonObject.put("message","登录成功"); }else { jsonObject.put("errcode",1); jsonObject.put("message","登录失败"); } return jsonObject; }自己的服务器向码上登录服务器请求二维码数据(url) @FeignClient(name = "wx", url = "https://server01.vicy.cn") public interface UserServiceRemote { /** * 向码上登录服务器请求二维码 */ @GetMapping(value = "/8lXdSX7F************Sdc6zfouSAEz/wxLogin/tempUserId?secretKey=beb789************3ddbab187df24f9") JSONObject getQRcode(); } 前端显示 DOCTYPE html> login 码上登录测试 微信登录 let qrcode = new QRCode("qrcode", { text: "", //URL地址 width: 260, height: 260, colorDark: '#000', //二维码颜色 colorLight: "#ffffff" //背景颜色 }); function newQrcode(url) { qrcode.makeCode(url) } $("#wxLogin").click(function () { $.ajax({ url: "http://host:port/user/getQrInfo", dataType: "json", // 写为application/json会跳转error执行函数 type: "get", success: function (result) { console.log(result.data.data.qrCodeReturnUrl) newQrcode(result.data.data.qrCodeReturnUrl) }, }); });点击微信登录后显示二维码，扫码确认的登录即可 |
首先我们向码上登录的服务器获取二维码信息，然后用户扫码，用户跳转到登录的小程序，用户点击登录，授权，码上登录服务器向自己的服务器回调入口返回数据，然后我们返回登录状态信息。
【本文地址】
今日新闻 |
推荐新闻 |