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

现如今使用微信的人越来越多，很多网站都实现了让用户直接扫码就能登录网站，正是这种方式给用户带来了极多的好处，最重要的是用户不用担心自己总记不住账户密码，从而登录不了网站。

为了方便用户登录，我也想接入微信扫码登录。但因为微信开发者需要企业认证，所以没办法接入个人网站实现微信扫码登录。最近我发现了一个小程序“码上登录”，对个人开发者提供了免费的微信扫一扫登录入口，其实就是一个桥接入口，为我们去获取用户扫码之后的信息，从而在发给我们，我们接收再返回信息即可。

好了，撸起袖子直接干吧！

准备工作

在码上登录注册，然后创建自己的应用并指定回调地址，会生成一个secretKey，后面获取二维码链接用得到

微信登录时序图

首先我们向码上登录的服务器发送请求获取二维码信息，然后用户扫码，用户跳转到登录的小程序，用户点击登录，授权，码上登录服务器向自己的服务器回调入口返回数据，然后我们返回登录状态信息。

后台开发

向码上登录服务器发送请求，返回二维码数据信息

secretKey（即我们创建应用时生成的secretKey）调用码上登录服务器时候需要进行验证的凭据

@FeignClient(name = "wx", url = "https://server01.vicy.cn")
public interface UserFeignClient {/*** 向码上登录服务器请求二维码*/@GetMapping(value = "/8lXdSX7FSMykbl9nFDWESdc6zfouSAEz/wxLogin/tempUserId")String getQrCode(@RequestParam(required = true, value = "secretKey") String secretKey);}

@FeignClient标签的常用属性如下：

name：指定FeignClient的名称，如果项目使用了Ribbon，name属性会作为微服务的名称，用于服务发现
url: url一般用于调试，可以手动指定@FeignClient调用的地址
decode404:当发生http 404错误时，如果该字段位true，会调用decoder进行解码，否则抛出FeignException
configuration: Feign配置类，可以自定义Feign的Encoder、Decoder、LogLevel、Contract
fallback: 定义容错的处理类，当调用远程接口失败或超时时，会调用对应接口的容错逻辑，fallback指定的类必须实现@FeignClient标记的接口
fallbackFactory: 工厂类，用于生成fallback类示例，通过这个属性我们可以实现每个接口通用的容错逻辑，减少重复的代码
path: 定义当前FeignClient的统一前缀

发送请求

获取登录二维码信息

@Value(value = "${justAuth.clientSecret.wechat}")
private String wechatClientSecret;@ApiOperation(value = "获取码上登录微信二维码链接", notes = "获取码上登录微信二维码链接")@GetMapping("/getWechatQrCodeReturnUrl")public String getWechatQrCodeReturnUrl () {// 将传递过来的转换成大写String source = SysConf.WECHAT;Boolean isOpenLoginType = webConfigService.isOpenLoginType(source.toUpperCase());if (!isOpenLoginType) {return ResultUtil.result(SysConf.ERROR, "后台未开启该登录方式!");}return ResultUtil.result(SysConf.SUCCESS,userService.getWechatQrCodeReturnUrl(wechatClientSecret));}

实现类


@Service
public class UserServiceImpl implements UserService {@Resourceprivate UserFeignClient userFeignClient;@Overridepublic String getWechatQrCodeReturnUrl(String wechatClientSecret) {String result = userFeignClient.getQrCode(wechatClientSecret);return result;}
}

返回数据

{"errcode":0,"data":{"qrCodeReturnUrl":"http://login.vicy.cn?tempUserId=18d55e78f66848e781bc7ce65a1fe5b4",
"tempUserId":"18d55e78f66848e781bc7ce65a1fe5b4"},"message":"成功"}

errcode：错误码

message：描述信息

data：存放二维码信息集合

tempUserId：登录会话临时凭证

qrCodeReturnUrl：发送给前端用于生成二维码

回调地址

@ApiOperation(value = "码上登录回调地址", notes = "码上登录回调地址")@PostMapping(value = "/callback")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,HttpServletResponse httpServletResponse) throws IOException {log.info("用户信息============\r\n"+ "【userId】"+userId+ " 【tempUserId】 "+tempUserId+ " 【nickname】 "+nickname+ " 【headimgurl】 "+avatar+ " 【ipAddr】"+ipAddr);// TODO 写自己的逻辑 保存用户或更新用户信息到数据库// 返回状态码JSONObject jsonObject = new JSONObject();if (userId != null){jsonObject.put("errcode",0);jsonObject.put("message","success");}else {jsonObject.put("errcode",1);jsonObject.put("message","error");}return jsonObject;}

前端实现

<template><div><div v-if="showPasswordLogin == false" style="text-align: center" class="block"><el-image :src="qrcode" style="width: 250px;" id="qrcode" ref="qrCodeUrl"><div slot="error" class="image-slot" @click="getWechatQrCodeReturnUrl"><i class="el-icon-refresh" style="height: 250px; line-height: 250px; cursor: pointer">点击刷新</i></div></el-image></div></div>
</template><script>
import {getWechatQrCodeReturnUrl} from '@/api/user'
import QRCode from "qrcode";
export default {name: 'share',data () {return {url: "http://www.baidu.com",  //识别二维码后跳转的地址qrcode:'' //存储二维码地址}},components: {},created () {},methods: {// 获取码上登录返回的数据生成二维码getWechatQrCodeReturnUrl: function () {let that = thisgetWechatQrCodeReturnUrl().then(response => {// eslint-disable-next-line eqeqeqif (response.code == this.$ECode.SUCCESS) {this.showPasswordLogin = falselet dataz = JSON.parse(response.data);this.url = dataz.data.qrCodeReturnUrlQRCode.toDataURL(this.url,{version: 7,errorCorrectionLevel: 'Q',width: 280,height: 280,margin: 0,}).then(url => {// console.log(url);this.qrcode = url}).catch(err => {// console.error(err)})this.tempUserId = dataz.data.tempUserIdlet count = 0let interval = setInterval(() => {count++if (count > 5) {this.qrcode = ''clearInterval(interval)}let params = new URLSearchParams()params.append('ticket', this.tempUserId)getUserLoginStatus(params).then(response => {console.log('获取用户登录状态', response)if (response.code == that.$ECode.SUCCESS) {let token = this.tempUserIdif (token != undefined) {setCookie('token', token, 7)}this.setUserInfo(response.data)this.setLoginState(true)// location.reload()// 跳转到首页location.replace(this.vueXqCodingWebUrl + '/#/?token=' + token)//window.location.reload()}})}, 3000)} else {this.$message.error(response.message)}})}}
}
</script>

效果