emos网站除了可以使用帐户密码登陆之外，还拥有微信扫码登陆功能。类似于网页版的微信，我们在手机微信上面扫描二维码就能登陆Web微信一样。我们要开发的就是这种相似的功能。
这节课我们先来把生成二维码图片的代码给实现了。这个二维码图片是后端emos-api项目的Web方法生成的，里面包含的信息是“login@@uuid字符串”，其中“@@”是字符串中的分隔字符。“login代表的是命令名称”，这一章我们会给小程序添加扫描二维码签到会议的功能。所以小程序扫描出来的二维码内容中理应包含命令名称，这样小程序才知道扫码之后到底应该登陆还是签到。“uuid字符串”是redis中缓存的一个字符串，为什么这样设计，一会儿会说到。
一、生成二维码图片
在UserService.java接口中定义生成二维码的抽象方法。
public interface UserService {
……
public HashMap createQrCode();
}
在UserServiceImpl.java类中实现抽象方法，生成二维码图片。
@Service
public class UserServiceImpl implements UserService {
@Autowired
private RedisTemplate redisTemplate;
……
@Override
public HashMap createQrCode() {
String uuid = IdUtil.simpleUUID();
//key是uuid，value的false代表该uuid没有被使用，防止该二维码被重复扫码
redisTemplate.opsForValue().set(uuid, false, 5, TimeUnit.MINUTES);
//设置二维码信息
QrConfig config = new QrConfig();
config.setHeight(160);
config.setWidth(160);
config.setMargin(1);
//把生成的二维码图片转换成base64字符串
String base64 = QrCodeUtil.generateAsBase64("login@@@" + uuid, config, ImgUtil.IMAGE_TYPE_JPG);
HashMap map = new HashMap() {{
put("uuid", uuid);
put("pic", base64);
}};
return map;
}
}
在UserController.java类中定义Web方法，并且用Swagger测试该Web方法。
@RestController
@RequestMapping("/user")
@Tag(name = "UserController", description = "用户Web接口")
public class UserController {
/**
* 生成登陆二维码的字符串
*/
@GetMapping("/createQrCode")
@Operation(summary = "生成二维码Base64格式的字符串")
public R createQrCode() {
HashMap map = userService.createQrCode();
return R.ok(map);
}
}
二、扫码登陆
用户在微信上面扫描了二维码之后，会调用后端Web方法，修改Redis里面缓存UUID对应的VALUE值，如果false变成了userId，说明用户已经在微信上扫码成功了。我们要接收微信小程序提交过来的Ajax请求，里面就包括了用户的临时授权code字符串，经过转换之后我们拿到openId字符串。因为每个用户的openId字符串都是唯一的，所以我们可以根据openId字符串作为查询条件，查询userId。如果存在userId，就可以判定该用户登陆，我们把userId写入Redis。然后浏览器端不停地轮询Redis，如果发现UUID对应的Value已经变成了userId，这时候就认为用户登陆成功，颁发Token令牌即可。
在TbUserDao.xml文件中定义SQL语句，根据OpenId查询用户的UserId。
<select id="searchIdByOpenId" parameterType="String" resultType="Integer">
SELECT id FROM tb_user WHERE open_id=#{openId} AND status = 1
</select>
在TbUserDao.java接口中声明抽象DAO方法。
@Mapper
public interface TbUserDao {
……
public Integer searchIdByOpenId(String openId);
}
在UserService.java接口中定义抽象方法。
public interface UserService {
……
public boolean checkQrCode(String code, String uuid);
}
在UserServiceImpl.java类中实现抽象方法。
@Service
public class UserServiceImpl implements UserService {
@Value("${wx.app-id}")
private String appId;
@Value("${wx.app-secret}")
private String appSecret;
……
@Override
public boolean checkQrCode(String code, String uuid) {
boolean bool = redisTemplate.hasKey(uuid);
if (bool) {
String openId = getOpenId(code);
Integer userId = userDao.searchIdByOpenId(openId);
redisTemplate.opsForValue().set(uuid, userId);
if (userId != null && userId > 0) {
return true;
}
}
return false;
}
//用于把Code临时授权转换成OpenID
private String getOpenId(String code) {
String url = "https://api.weixin.qq.com/sns/jscode2session";
HashMap map = new HashMap();
map.put("appid", appId);
map.put("secret", appSecret);
map.put("js_code", code);
map.put("grant_type", "authorization_code");
String response = HttpUtil.post(url, map);
JSONObject json = JSONUtil.parseObj(response);
String openId = json.getStr("openid");
if (openId == null || openId.length() == 0) {
throw new RuntimeException("临时登陆凭证错误");
}
return openId;
}
}
创建CheckQrCodeForm.java类，封装微信小程序Ajax提交的请求。
@Data
@Schema(description = "检验登陆验证码表单")
public class CheckQrCodeForm {
@NotBlank(message = "uuid不能为空")
@Schema(description = "uuid")
private String uuid;
@NotBlank(message = "临时授权不能为空")
@Schema(description = "临时授权")
private String code;
}
在UserController.java类中，定义Web方法。该方法需要小程序调用，所以不要再Swagger上测试。
@RestController
@RequestMapping("/user")
@Tag(name = "UserController", description = "用户Web接口")
public class UserController {
……
@PostMapping("/checkQrCode")
@Operation(summary = "检测登陆验证码")
public R checkQrCode(@Valid @RequestBody CheckQrCodeForm form) {
boolean bool = userService.checkQrCode(form.getCode(), form.getUuid());
return R.ok().put("result", bool);
}
}