二维码登录实现思路

二维码登录实现思路

想要实现简单的二维码登录效果，首先我们需要了解一下二维码登录的原理是什么？

网上已经有很多关于原理的描述了，这里就不过多描述了，这里主要以实战为主

实施思路

PC发送二维码请求，服务器生成一个UUID，添加自己的密钥，放入md5中（这里MD5不是必须的，可以使用公司自己的密钥算法生成唯一的密钥），然后生成key作为键值存储在redis中，value值存储代码的一些信息，并设置一个过期时间（这里为了方便我没有设置），服务器将生成的代码返回给前端。

PC端根据服务器返回的key和确认登录页面的url生成用于显示的二维码。

扫描手机上的二维码，跳转到相应页面，从PC端获取code码，发送更新二维码扫描状态请求。 当用户点击确认登录时，再次发送更新二维码状态请求，并将登录时生成的token一起发送到服务器，服务器获取到token，获取用户信息，然后将用户信息返回给PC端，至此二维码登录效果完成

实现代码

为了方便，我这里没有设置redis过期时间，相应的前端也没有判断二维码是否过期，登录时也没有使用token，扫描后可以自行输入用户信息。 确认登录后，您输入的用户信息将被撤销。 进入PC端登录页面

请看下面的代码：

前端使用vue框架，首先发送生成的二维码接口，然后轮询二维码的状态，

页面代码如下：

Boot+后台使用的框架

后台代码如下：

	/**
	 * 生成二维码
	 * 
	 * @return
	 */
	@RequestMapping(value = "/getQr", method = RequestMethod.GET)
	public Result getQr() {
		Jedis jedis = new Jedis("localhost");
		System.out.println("连接成功");
		// 查看服务是否运行
		System.out.println("服务正在运行: " + jedis.ping());
		String code = Md5.string2MD5(StringUtils.UUID() + "csii");
		JSONObject data = new JSONObject();
		data.put("status", "no");
		//设置过期时间
		jedis.set(code, data.toString());
		JSONObject json = new JSONObject();
		json.put("code", code);
		return ResultUtils.wrapSuccess(null, json);
	}
	/**
	 * 更新二维码状态
	 * 
	 * @param code  生成的code
	 * @param status 前端传过来的状态
	 * @param userName 用户信息
	 * @return
	 */
	@RequestMapping(value = "/UpdateStatus", method = RequestMethod.GET)
	public Result UpdateStatus(String code, String status, String userName) {
		Jedis jedis = new Jedis("localhost");
		System.out.println("连接成功");
		JSONObject data = new JSONObject();
		String res = jedis.get(code);
		
		//判断code是否存在
		if (jedis.exists(code)) {
			data.put("status", status);
			//如果点击了确认登陆
			if (status.equals("success")) {
				data.put("userName", userName);
			}
			jedis.set(code, data.toString());
		}else {
			//设置过期标记
			data.put("errorCode", 0);
		}
		return ResultUtils.wrapSuccess(null, null);
	}
	/**
	 * 获取二维码状态
	 * 
	 * @param code
	 * @return
	 */
	@RequestMapping(value = "/getStatus", method = RequestMethod.GET)
	public Result getStatus(String code) {
		Jedis jedis = new Jedis("localhost");
		System.out.println("连接成功");
		String data = jedis.get(code);
		JSONObject res = (JSONObject) JSON.parse(data);
		return ResultUtils.wrapSuccess(null, res);
	}

前端确认登录页面代码如下：

本文实现了一个简单的二维码登录流程。 代码中存在很多缺陷。 我希望你能忍受。 代码仅供参考。 如果有什么需要改进的地方，请给我留言。

如果你喜欢，请给我一个开始