码上登录

码上登录是一个小程序，对个体开发者提供了免费的微信扫一扫登录入口，因为微信开发者需要企业认证，没办法在个人网站上做测试。码上登录相当于一个桥接入口，为我们去申请获取扫一扫之后的用户登录信息。

开发和使用

登录的时序图

在这里插入图片描述
首先我们向码上登录的服务器获取二维码信息，然后用户扫码，用户跳转到登录的小程序，用户点击登录，授权，码上登录服务器向自己的服务器回调入口返回数据，然后我们返回登录状态信息。

准备工作

在码上登录创建应用，指定回调URL，获取secretKey

后台开发

我这里使用的springboot 2.2.1.RELEASE，使用openfeign跨服务访问
数据请求接口

    @ResourceUserService userService;@ResourceUserServiceRemote 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>
<html lang="en">
<head><meta charset="UTF-8"><title>login</title><script src="https://cdn.bootcdn.net/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script><script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
</head>
<body>
<div style="display: block;text-align: center;background-color: aquamarine"><h2>码上登录测试</h2><button id="wxLogin">微信登录</button>
</div>
<div style="background-color: antiquewhite"><div id="qrcode" style="position: absolute;margin-top: 20px;left: 50%;transform: translate(-50%,0)"></div>
</div>
<script type="text/javascript">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)},});});
</script>
</body>
</html>