涉及的请求
准备一个微信网站应用,需要appId appSecret
1.获取授权码code
通过在PC端打开以下链接:
https://open.weixin.qq.com/connect/qrconnect?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&state=STATE#wechat_redirect
生成授权码code后携带到回调域REDIRECT_URI xxx/callback.html
如果要访问本地IP时访问的是回调域域名,需做回调域与本地IP映射 127.0.0.1 REDIRECT_URI
页面发送链接到微信后,页面展示二维码,扫码后,微信返回授权码code到回调域页面的location
2.通过code加appId和appSecret,调用API获取令牌access_token
https://api.weixin.qq.com/sns/oauth2/refresh_token?appid=APPID&grant_type=refresh_token&refresh_token=REFRESH_TOKEN
返回
{
“access_token”:“ACCESS_TOKEN”,
“expires_in”:7200,
“refresh_token”:“REFRESH_TOKEN”,
“openid”:“OPENID”,
“scope”:“SCOPE”,
“unionid”: “o6_bmasdasdsad6_2sgVt7hMZOPfL”
}
3. 用access_token发送请求,获取用户个人信息
http请求方式: GET
https://api.weixin.qq.com/sns/oauth2/access_token?appid=APPID&secret=SECRET&code=CODE&grant_type=authorization_code
返回
{
“access_token”:“ACCESS_TOKEN”,
“expires_in”:7200,
“refresh_token”:“REFRESH_TOKEN”,“openid”:“OPENID”,
“scope”:“SCOPE”
}
获取到数据后,添加到t_wxuser存放微信信息的表
流程概述
1.超链接发起微信登录请求
微信登录
2.回调页面
定义钩子函数,获取地址栏的code,向微信发起请求获取token,用openId到数据库查询t_wxuser,把用户信息存redis,存到页面的localStorage
有数据 免密登录
无 绑定页面
mounted(){
//解析参数上
*// http://*/callback.html?code=061OcqGa1F6zAB0hezFa1lipe54OcqGu&state=1
let url = location.href; // 获取url
let paramObj = parseUrlParams2Obj(url);
this.$http.post("/login/wechat",{"code":paramObj.code})
.then(result =>{
if(result.data.success) {//已经绑定,免密登录成功
//1.将token和登录信息存入localStorage
let {token, logininfo} = result.data.resultObj;
localStorage.setItem("token", token);
localStorage.setItem("logininfo", JSON.stringify(logininfo));
//2.跳转到首页,并显示登录信息
location.href = "index.html";
}else{ // 第一次登录
let param = result.data.resultObj; // token openid
console.debug(param)
// 跳转到绑定界面
location.href="http://*/binder.html"+param;
}
}).catch(result =>{
alert(result.data.msg);
})*
service层
public AjaxResult wechat(Map<String, String> map) {
String code = map.get("code");
if (StringUtils.isEmpty(code)) {//为空
throw new MyException("系统异常");
}
//通过code appId secret 获取token获取令牌
// ="https://open.weixin.qq.com/connect/qrconnect?appid=wxd853562a0548a7d0&redirect_uri=http://***/callback.html &response_type=code&scope=snsapi_login&state=1#wechat_redirect";
String url = WxConstants.GET_TOKEN_URL
.replace("APPID", WxConstants.APPID)
.replace("SECRET", WxConstants.SECRET)
.replace("CODE", code);
//根据url向微信发送请求 获取token令牌 字符串形式的
String obj = HttpClientUtils.httpGet(url);
//把json字符串转成json对象
JSONObject jsonObject = JSONObject.parseObject(obj);
//获取token 和openId
String token = jsonObject.getString("access_token");
String openid = jsonObject.getString("openid");
System.out.println(openid + "=============");
//通过openid和userid查询 不为空 说明登录过 免密登录
WxUser wxUser = wxUserMapper.loadByOpenId(openid);
//拼接
String param = "?token=" + token + "&openid=" + openid;
System.out.println(param);
if (wxUser != null && wxUser.getUser_id() != null) {//通过openId查得到数据 之前扫描过 直接放行
//在logininfo表里 根据user_id查询对应longininfo信息
Logininfo logininfo = logininfoMapper.loadByUserId(wxUser.getUser_id());
//1 获取token
String token1 = UUID.randomUUID().toString();
redisTemplate.opsForValue().set(token1, logininfo, 30, TimeUnit.MINUTES);
Map<String, Object> map1 = new HashMap<>();
map1.put("token", token1);
//把用户名 密码设置为空
/*logininfo.setPassword("");
logininfo.setSalt("");*/
map1.put("logininfo", logininfo);
//map1.put("param",param);
return AjaxResult.me().setResultObj(map1);
}
System.out.println(param);
return AjaxResult.me().setSuccess(false).setResultObj(param);
}
3.绑定界面
用手机号注册,有短信验证的按钮,
点击绑定,发起绑定请求,存登录信息
binder(){
this.$http.post("/login/binder/wechat",this.phoneUserForm)
.then(result=>{
result = result.data;
if(result.success){
// alert("登录成功");
//1.将token和登录信息存入localStorage
let {token,logininfo} = result.resultObj;
localStorage.setItem("token",token);
localStorage.setItem("logininfo",JSON.stringify(logininfo));
//2.跳转到首页,并显示登录信息
location.href="index.html";
}else{
alert(result.message)
}
})
.catch(result=>{
alert("系统错误!");
})
}