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

最新推荐文章于 2024-05-16 16:55:31 发布

前缘空

最新推荐文章于 2024-05-16 16:55:31 发布

阅读量3.1k

点赞数 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>

点击微信登录后显示二维码，扫码确认的登录即可
在这里插入图片描述

前缘空

关注

2
点赞
踩
5

收藏

觉得还不错? 一键收藏
1
评论
使用码上登录实现微信扫一扫登录

@[TOC]微信扫一扫登录测试码上登录码上登录是一个小程序，对个体开发者提供了免费的微信扫一扫登录入口，因为微信开发者需要企业认证，没办法在个人网站上做测试。码上登录相当于一个桥接入口，为我们去申请获取扫一扫之后的用户登录信息。开发和使用登录的时序图首先我们向码上登录的服务器获取二维码信息，然后用户扫码，用户跳转到登录的小程序，用户点击登录，授权，码上登录服务器向自己的服务器回调入口返回数据，然后我们返回登录状态信息。准备工作在码上登录创建应用，指定回调URL，获取secretKey后台开
复制链接

扫一扫