个人网站如何使用微信扫一扫登录---SpringBoot项目

---

前言

近期在开发一个个人web项目，后端SpringBoot+前端使用Vue开发。开发过程中，考虑到现在微信使用如此普及，扫码登录开始越来越流行，所以决定使用微信扫码登录。了解微信官方的扫码登录后发现有一个致命问题，不支持个人网站扫码登录，必须是企业才能申请。所以决定寻找一种更加便捷的“微信扫码”登录方式，有一天刷着刷着无意间找到一个可以免费用微信登录的方法就是“码上登录”，SHOW TIME

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、码上登录是什么？

“码上登录”是一个与微信扫码登录功能差不多的一个小程序。使用方便且简单，去除了使用微信官方扫码登录的各种繁琐步骤，没有繁琐的各种注册、登记、企业认证啥的，对非企业和个人来说就是一个很方便的接口啦。只需要去“码上登录”官方注册并且申请我们调用该接口时所需要的“secretkey”就可以了，免费免费免费。

二、使用步骤

1.登录前准备，获取SecretKey

secretKey是我们调用“码上登录”服务器时候需要进行验证的凭证，我们需要去“码上登录”官网创建
申请secretKey链接：http://login.vicy.cn/index.html
微信扫码登录后点击“马上创建应用”，再点击“创建应用”，输入应用名称和回调url(回调url就是用来接收扫码登录成功后的用户信息)

例如我创建的

2.前端发起登录请求

前后端使用的是“WebSocket”进行连接交互的，当我们点击此按钮时，前端便会通知后端发起登录请求，例如我这里给后端发送一个内容为“qrCodeInfo”的消息，消息内容可自定义，这些是WebSocket的知识，不过多描述。

3.后端调用“码上登录”服务器

3.1. 配置文件

建议把Secretkey放在Springboot项目配置文件(.yml)中，wxLogin的配置下

wxLogin:
	tempUserIdUrl:https://server01.vicy.cn/8lXdSX7FSMykbl9nFDWESdc6zfouSAEz/wxLogin/tempUserId
	secretKey: xxxxxxxxxxxxxxxxxxxxxxxxxxx

例如我这样

3.2. 发起请求

当收到前端发来的内容为“qrCodeInfo”的消息后，开始调用“码上登录”服务器接口

(https://server01.vicy.cn/8lXdSX7FSMykbl9nFDWESdc6zfouSAEz/wxLogin/tempUserId?secretKey=xxxxxxxxxxxxx),
 

在qrCodeInfo此方法中，取出yml中的tempUserIdUrl和Secretkey，把他们拼接起来然后开始调用“码上登录”服务器

3.3.返回的参数

restTemplate.getForObject返回的参数

当errcode==0时就是访问成功的，使用Map来接收。

tempUserId：是我们这次会话的凭证，当有多个用户登录时，通过tempUserId就可以识别出是哪一个用户登录成功，而tempUserId就是我们这次会话的凭证。

qrCodeReturnUrl：通过Websocket把qrCodeReturnUrl发送给前端生成二维码

其中Object.data里的数据

4.前端显示二维码

前端收到qrCodeReternurl后，生成二维码(具体怎么生成，问问度娘或者本站搜一下就可以了，一大堆)

5、扫一扫登录

使用微信扫一扫，扫码以后。您正在登录下的“某某某”官网就是创建应用时填写的内容

点击立即登录后，则会通过注册时的回调url将相关的登录信息返回给开发者服务器。也就是你回调url中写的使用哪个方法接收小程序获取到的登录信息

6 、登录成功后接收用户信息

用户登录成功后，“码上登录”服务器会给开发者服务器发送用户信息，该请求是一个“POST”类型，内容格式是JSON，参数如下

7、通知前端登录成功并返回状态码

后端通过tempUserId识别出是哪一个前端，然后通知前端登陆成功。当开发者服务器接收到“码上登录”服务器返回的参数无误并且登录成功后，开发者服务器需要向“码上登录”服务器返回一个是否登录成功的状态码，内容格式是JSON，参数如下

登录成功

以上就是个人站微信扫一扫登录的开发过程，大家也可以到我做的个人网站进行参观指导，懒人图(http://www.px1920.cn)

---