微信公众号开发(4)-实现PC扫码登录
一、PC微信扫码登录原理简介
PC端调用微信服务端的ticket接口，微信服务端获取ticket，PC端拿到ticket之后,生成带参数登录二维码，用户扫码之后会发送扫码事件消息到微信服务端，这个消息中会带上用户微信的openId，根据openId调用获取用户接口拿到用户信息，包含unionId、昵称、头像、性别等字段，这里可以将用户信息存入redis,在PC获取登录二维码之后我们要加一个轮询获取用户扫码状态，原理就是查询redis是否存入的用户信息，如果存入，那么开始做登录流程。
二、代码实现
1、微信服务端代码
首先写一个常量类，包括一些微信接口地址的常量和需要用到的一些字符串常量，因为本地项目已经开发完成，这里可能有一些在本章节不需要的多余常量。
public class WechatConstant {
private WechatConstant(){
}
/**
* 微信的TOKEN标识
*/
public static final String WEIXIN_ACCESS_TOKEN = "YY_WEIXIN_ACCESS_TOKEN";
/**
* 小程序的TOKEN标识
*/
public static final String XCX_ACCESS_TOKEN = "XCX_ACCESS_TOKEN";
/**
* 微信的 jsapi_ticket 标示
*/
public static final String YY_WEIXIN_JSAPI_TICKET = "YY_WEIXIN_JSAPI_TICKET";
/**
* 获取token的微信URL地址
*/
public static final String ACCESS_TOKEN_URL = "https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid={?}&secret={?}";
/**
* 通过code换取网页授权access_token和openid
*/
public static final String OPENID_URL = "https://api.weixin.qq.com/sns/oauth2/access_token?appid={?}&secret={?}&code={?}&grant_type=authorization_code";
/**
* 获取 jsapi_ticket 的微信URL地址
*/
public static final String JS_API_TICKET_URL = "https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token={?}&type=jsapi";
/**
* 获取用户信息地址
*/
public static final String WX_USER_INFO_URL = "https://api.weixin.qq.com/cgi-bin/user/info?access_token={?}&openid={?}&lang=zh_CN";
/**
* 发送微信消息地址
*/
public static final String SEND_MESSAGE_URL = "https://api.weixin.qq.com/cgi-bin/message/custom/send?access_token={?}";
/**
* 带参二维码地址
*/
public static final String QRCODE_URL = "https://api.weixin.qq.com/cgi-bin/qrcode/create?access_token={?}";
/**
* 小程二维码地址
*/
public static final String XCX_QRCODE_URL = "https://api.weixin.qq.com/wxa/getwxacodeunlimit?access_token={?}";
/**
* 模板消息发送
*/
public static final String SEND_TEMPLATE_URL = "https://api.weixin.qq.com/cgi-bin/message/template/send?access_token={?}";
public static final String OAUTH_URL = "https://open.weixin.qq.com/connect/oauth2/authorize?appid=";
public static final String MATERIAL_URL = "https://api.weixin.qq.com/cgi-bin/material/batchget_material?access_token={?}";
/**
* 请求微信接口返回值字段
*/
public static final String TICKET = "ticket";
/**
* 请求微信接口返回值字段
*/
public static final String EXPIRES_IN = "expires_in";
public static final String TIME_FORMAT = "yyyy-MM-dd HH:mm:ss";
public static final String OPENID = "openid";
public static final String UNIONID = "unionid";
public static final String ERRCODE = "errcode";
public static final String ERRMSG = "errmsg";
public static final String MINIPROGRAM = "miniprogram";
public static final String ACCESS_TOKEN = "access_token";
public static final String TOUSER = "touser";
public static final String MSGTYPE = "msgtype";
public static final String TEXT = "text";
public static final String CONTENT = "content";
public static final String TEMPLATE_ID = "template_id";
public static final String XIN_TASK_ = "xin_task_";
public static final String XIN_LOGIN_ = "xin_login_";
public static final String NICKNAME = "nickname";
public static final String HEADIMGURL = "headimgurl";
public static final String HD_CODE = "HD_CODE";
public static final String URL = "url";
public static final String SUCCESS = "success";
public static final String DATA = "data";
public static final String VALUE = "value";
public static final String AUTH_URL = "auth_url";
public static final String PAGEPATH = "pagepath";
public static final String APPID = "appId";
public static final String TIMESTAMP = "timestamp";
public static final String NONCESTR = "nonceStr";
public static final String SIGNATURE = "signature";
public static final String SCENE = "scene";
public static final String PAGE = "page";
public static final String WIDTH = "width";
/**
* 绑定微信前缀
*/
public static final String WEIXIN_BIND_PREFIX = "bind_key_";
public static final String WECHAT_BIND_ALLOW_NO_USER = "200";
public static final String WECHAT_BIND_ALLOW_HAS_USER = "201";
public static final String WECHAT_BIND_NOT_ALLOW_CODE = "202";
/**
* 论文搜索点击事件
*/
public static final String WECHAT_SEARCH_EVENT = "SEARCH_EVENT";
public static final String WECHAT_COOPERATION_EVENT = "COOPERATION_EVENT";
}
我们需要一个微信公共的service，这个service主要提供调用微信接口的实现，例如获取access_token、获取ticket、获取用户信息等实现方法。
整个微信服务端，需要使用同一的access_token，access_token的有效期为7200秒，我们获取access_token之后可存入redis,缓存有效期必需小于7200秒。具体代码如下：
/**
* 获取微信的Token
*/
public synchronized String getToken() throws Exception {
String accessToken = wechatRedisService.get(WechatConstant.WEIXIN_ACCESS_TOKEN);
if (StringUtils.isBlank(accessToken)) {
String rest = restTemplate.getForObject(WechatConstant.ACCESS_TOKEN_URL, String.class, mp.getPub().getAppid(), mp.getPub().getAppSecret());
logger.info("wx get token return:{}", rest);
JSONObject jo = JSONObject.parseObject(rest);
if (jo.containsKey(WechatConstant.ACCESS_TOKEN)) {
accessToken = jo.getString(WechatConstant.ACCESS_TOKEN);
int expires = jo.getInteger(WechatConstant.EXPIRES_IN) - 5 * 60;
wechatRedisService.put(WechatConstant.WEIXIN_ACCESS_TOKEN, accessToken, expires);
} else {
logger.error("wx get token error:{}", rest);
throw new WechatException("获取token失败，请稍后再试");
}
}
return accessToken;
}
获取带参数二维码的ticket:
/**
* 获取带参二维码
*
* @param data
* @return
*/
public String getQrTicket(String data) throws Exception {
if (StringUtils.isBlank(data)) {
throw new WechatException("data is null");
}
logger.info("wx get QrTicket data:{}", data);
String rest = restTemplate.postForObject(WechatConstant.QRCODE_URL, data, String.class, getToken());
logger.info("wx get QrTicket rerutn:{}", rest);
JSONObject jo = JSONObject.parseObject(rest);
if (jo.containsKey(WechatConstant.TICKET)) {
return jo.getString(WechatConstant.TICKET);
}
logger.error("wx get qrticket error:{}", rest);
throw new WechatException(jo.getString(WechatConstant.ERRMSG));
}
获取用户信息：
/**
* 通过openid获取用户信息
*
* @param openId
* @return
* @throws Exception
*/
public JSONObject getWxUserInfo(String openId) throws Exception {
if (StringUtils.isBlank(openId)) {
throw new WechatException("openid参数为空");
}
String rest = restTemplate.getForObject(WechatConstant.WX_USER_INFO_URL, String.class, getToken(), openId);
logger.info("wx get userInfo return:{}", rest);
JSONObject jo = JSONObject.parseObject(rest);
if (jo.containsKey(WechatConstant.ERRCODE)) {
logger.error("wx get userinfo error:{}", rest);
throw new WechatException(jo.getString(WechatConstant.ERRMSG));
}
return jo;
}
以上，需要用到的微信公共服务的实现已经完成，现在开始做扫码事件消息的处理。
在上一个章节中的handleReceiveMessage方法，添加事件消息类型的处理：
@Transactional
public String handleReceiveMessage(String xml) {
String response = null;
try {
String result = null;
WechatMessage msg = parseMessage(xml);
try {
if (msg != null) {
String msgType = msg.getMsgType();
if (WeChatMsgType.REQ_MESSAGE_TYPE_TEXT.equals(msgType)) {
// 文本消息
msg = handleTextMessage(msg);
result = msg.getContent();
} else if (msgType.equals(WeChatMsgType.REQ_MESSAGE_TYPE_EVENT)) {
// 事件推送
result = handleEvent(msg);
msg.setMsgType(WechatConstant.TEXT);
}
}
} catch (Exception e) {
logger.error("--handleReceiveMessage 处理微信消息异常: ", e);
return WechatConstant.SUCCESS;
}
if (msg != null && StringUtils.isNotBlank(result)) {
msg.setContent(result);
response = msg.toXml();
logger.info("wx response xml:{}", response);
}
} catch (Exception ex) {
logger.error("--handleReceiveMessage 解析微信消息异常: ", ex);
return WechatConstant.SUCCESS;
}
return response;
}
事件消息处理handleEvent方法，这里要注意的点是，如果用户没有关注公众号，扫码之后的eventKey会加上"qrscene_"前缀，我们需要将它截取掉：
@Transactional
public String handleEvent(WechatMessage msg) throws Exception {
String result = null;
// 事件类型
String eventType = msg.getEvent();
if (WeChatMsgType.EVENT_TYPE_SUBSCRIBE.equals(eventType)) {
// 关注
String eventKey = msg.getEventKey();
if (StringUtils.isNotBlank(eventKey) && eventKey.startsWith("qrscene_")) {
// 扫描带参数二维码关注
String scene = eventKey.substring(8);
if (scene.startsWith(WechatConstant.XIN_LOGIN_)) {
try {
result = processXinLogin(scene, msg);
} catch (Exception e) {
logger.error("扫描二维码登录异常, 异常消息：", e);
return "";
}
}
} else {
// 搜索公众号关注 TODO
result = wechatMsgService.findByCode(WechatMsgTypes.SEARCH_ATTENTION);
}
} else if (eventType.equals(WeChatMsgType.EVENT_TYPE_SCAN)) {
// 扫描带参数二维码(已关注)
String eventKey = msg.getEventKey();
if (eventKey.startsWith(WechatConstant.XIN_LOGIN_)) {
// 扫码登陆
try {
result = processXinLogin(eventKey, msg);
} catch (Exception e) {
logger.error("扫描二维码登录异常, 异常消息：", e);
return "";
}
} else {
//用户注册【关注时】
try {
result = processXinLogin(eventKey, msg);
} catch (Exception e) {
logger.error("扫描二维码登录异常, 异常消息：", e);
return "";
}
}
}
return result;
}
processXinLogin这个方法里面我做了注册逻辑，因为我的微信服务端代码和PC代码在同一个项目中
@Transactional
private String processXinLogin(String scene, WechatMessage msg) {
try {
// 扫码登陆
String loginKey = scene.substring(10);
String loginStr = loginKey;
Map<String, Object> map = addOrGetUserInfo(msg);
OauthUser oauthUser = (OauthUser)map.get("oauthUser");
String unionId = (String) map.get("unionId");
wechatRedisService.put(loginStr, unionId,180);
String wechatMsg = "";
if(oauthUser.getIsVip()){
//会员登录消息 TODO
wechatMsg = wechatMsgService.findByCode(WechatMsgTypes.QRCODE_LOGIN_VIP);
}else{
//非会员登录消息 TODO
wechatMsg = wechatMsgService.findByCode(WechatMsgTypes.QRCODE_LOGIN_NORMAL);
}
return String.format(wechatMsg, new SimpleDateFormat(WechatConstant.TIME_FORMAT).format(new Date()));
}catch (Exception e){
logger.error("processXinLogin failed,Error:",e);
throw new WechatException("扫码登录失败");
}
}
@Transactional
private Map<String, Object> addOrGetUserInfo(WechatMessage msg){
try{
Map<String, Object> map = new HashedMap();
JSONObject wxUserInfo = wechatService.getWxUserInfo(msg.getFrom());
String unionid = (String) wxUserInfo.getOrDefault(WechatConstant.UNIONID, null);
OauthUser oauthUser = oauthService.wechat_login(unionid,wxUserInfo);
map.put("unionId",unionid);
map.put("oauthUser",oauthUser);
return map;
}catch(Exception e){
logger.error("addOrGetUserInfo failed,Error:",e);
throw new WechatException("addOrGetUserInfo failed");
}
}
到此，微信服务端的代码已经完成，下面开始PC端代码。
获取带参数二维码tickect和轮询扫码登录状态接口：
@RequestMapping("/login-ajax")
@ResponseBody
public ApiResult weixinAjax(@RequestParam String oper,
@RequestParam(defaultValue = "", value = "login_s") String loginStr,
HttpServletRequest request, HttpServletResponse response) {
ApiResult vo = null;
Map<String, Object> map = new HashedMap();
try {
if ("login_ticket".equals(oper)) {
map = oauthWechatService.getLoginTicket();
vo = new ApiResult(BaseApiCode.SUCCESS, "success", map);
} else if ("login_verify".equals(oper)) {
map = oauthWechatService.loginVerify(loginStr, request, response);
vo = new ApiResult(BaseApiCode.SUCCESS, "success", map);
} else {
vo = new ApiResult(BaseApiCode.FAILED, "未知操作");
}
} catch (WechatException e) {
vo = new ApiResult(BaseApiCode.FAILED, e.getMessage());
} catch (Exception ex) {
logger.error("服务器错误", ex);
vo = new ApiResult(BaseApiCode.FAILED, "服务器出错");
}
return vo;
}
/**
* 获取登录ticket
* @return
* @throws Exception
*/
@Override
public Map<String, Object> getLoginTicket() throws Exception {
Map<String, Object> map = new HashedMap();
String loginStr = getLoginRandomString();
String sid = String.format("xin_login_%s", loginStr);
wechatRedisService.delete(sid);
String postData = String.format("{\"expire_seconds\": 300,\"action_name\": \"QR_STR_SCENE\", \"action_info\": {\"scene\": {\"scene_str\": \"%s\"}}}", sid);
String rst = wechatService.getQrTicket(postData);
if(StringUtils.isNotBlank(rst)){
map.put("ticket",rst);
map.put("loginStr",loginStr);
return map;
}else{
throw new Exception("ticket有误");
}
}
/**
* 登录验证
* @param loginStr
* @param request
* @param response
* @return
* @throws Exception
*/
@Override
public Map<String, Object> loginVerify(String loginStr, HttpServletRequest request, HttpServletResponse response) throws Exception {
Map<String, Object> map = new HashedMap();
if (StringUtils.isBlank(loginStr)) {
throw new Exception("无效登录");
}
String unionid = wechatRedisService.get(loginStr);
if(StringUtils.isNotBlank(unionid)){
OauthWechat bean = oauthWechatService.findByUnionid(unionid);
if(bean == null){
throw new Exception("unoinid无效");
}
OauthUser oauthUser = bean.getUser();
String token = oauthService.getToken(oauthUser);
map.put("token", token);
map.put("expire", TokenRedisService.expire);
map.put("user", userRedisService.getUserJson(oauthUser));
Context.setCookieUser(response, oauthUser, token);
userRedisService.put(oauthUser);
}else{
throw new WechatException("等待用户扫码");
}
return map;
}
前端JS代码：
$(document).ready(function () {
$("#login_mpweixin_img").click(function () {
login_qrcode_get();
});
//login_qrcode_get();
});
var _c_t_i = null; //记录过期
var _v_t_i = null; //验证
var _l_g_s = ""; // 登录字符串
var _l_t_count = 0;
var _l_t_max = 20;
var _l_ticket = "";
function login_qrcode_get() {
$("#login_mpweixin_img").attr('src','/static/_files/img/qrcode_loading.gif');
login_ticket();
}
/**
* 获取微信ticket, 生成微信登录二维码
* @returns {boolean}
*/
function login_ticket() {
if (_v_t_i) {
clearTimeout(_v_t_i);
}
if (_c_t_i) {
clearTimeout(_c_t_i);
}
var _t = new Date().getTime();
if(_l_t_count>=_l_t_max){
if(_l_ticket!=undefined&&_l_ticket!=""){
$("#login_mpweixin_img").attr('src', 'https://mp.weixin.qq.com/cgi-bin/showqrcode?ticket=' + _l_ticket+'&t=' + _t);
}
alert("停留时间过长，请刷新后扫码登录!");
window.location.reload();
return false;
}else{
$.ajax({
type: 'get',
url: '/cgi-oauth/wechat/login-ajax?oper=login_ticket&t=' + _t,
dataType: 'json',
async: false,
success: function (result) {
if (result.code == 0) {
var data = result.data;
_l_g_s = data.loginStr;
_l_t_count++;
_l_ticket = data.ticket;
var img_url = 'https://mp.weixin.qq.com/cgi-bin/showqrcode?ticket=' + _l_ticket +'&t=' + _t;
$("#login_mpweixin_img").attr('src', img_url);
_c_t_i = setTimeout("login_core_expire();", 180000);
_v_t_i = setTimeout("login_verify();", 2000);
} else {
$("#login_mpweixin_img").attr('src', '/static/_files/img/qrcode_invalid.jpg');
}
},
error: function () {
$("#login_mpweixin_img").attr('src', '/static/_files/img/qrcode_invalid.jpg');
}
});
}
}
function login_core_expire() {
if (_v_t_i) {
clearTimeout(_v_t_i);
}
login_qrcode_get();
}
function login_core_success() {
if (_v_t_i) {
clearTimeout(_v_t_i);
}
if (_c_t_i) {
clearTimeout(_c_t_i);
}
location.reload();
}
function login_verify() {
if ($("#login_mpweixin_img").is(':hidden')) {
_v_t_i = setTimeout("login_verify();", 2000);
return;
}
var _t = new Date().getTime();
$.ajax({
type: 'get',
url: '/cgi-oauth/wechat/login-ajax?oper=login_verify&t=' + _t + '&login_s=' + _l_g_s,
dataType: 'json',
async: false,
success: function (data) {
if (data.code == 0) {
login_core_success();
} else {
_v_t_i = setTimeout("login_verify();", 2000);
}
},
error: function () {
_v_t_i = setTimeout("login_verify();", 2000);
}
});
}