使用码上登录实现微信扫一扫登录

最新推荐文章于 2024-01-30 23:08:24 发布

前缘空

最新推荐文章于 2024-01-30 23:08:24 发布

阅读量3.4k

点赞数 2

本文链接：https://blog.csdn.net/weixin_40997505/article/details/118858658

版权

微信扫一扫登录测试

码上登录
开发和使用

码上登录

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

开发和使用

登录的时序图

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

准备工作

在码上登录创建应用，指定回调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>
<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>