话不多说,直接进入正题.
首先,要在微信公众平台注册一个公众账号,我这边是用的测试账号.
有了账号之后进入微信公众平台获取appID和appsecret以供调用接口.
微信开发者文档地址:https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_webpage_authorization.html
首先判断cookie中是否有openid(每个用户对一个公众号会有唯一的openid,唯一标识),如果有,就直接请求后端拿数据,如果没有, 执行下面的流程:
后端需提供接口供前端调用以获取完整请求地址,前端需将当前地址当作回调地址传给后端,后端接收到后将各个参数拼接到https://open.weixin.qq.com/connect/oauth2/authorize?并返回给前端,前端接收到之后发送GET请求并在当前页面的mounted中截取当前url中的code,如果截取到了说明当前请求是微信回调回来的,如果没有截取到说明当前请求是用户正常操作的.
微信回调回来的url:redirect_uri+'?code=xxx&state=xxx'
示例代码:
mounted(){
let code=getUrlParam('code');//从当前url中截取code
let state=getUrlParam('state');//state是可以自定义的,微信会原封不动的返回回来,我这里用来记录用户上一步要执行的操作,并在code不为空的时候执行
if(code!=null) {//微信回调的页面,执行用户操作
//获取到code之后携带code请求后端接口获取openid以及用户信息(用户信息需要在scope为snsapi_userinfo时才能获取到),并把openid存在cookie中,以供下次实现自动登录
//请求后端获取openid
axios.post('/wx/getOpenIdByCode',{
code:code
}).then((res)=>{
{
"user": {
"openId": "openId,前端存在cookie中",
"name": "用户昵称",
"head": "用户头像地址",
"registTime": "用户注册时间"
}
}
this.openId=res.user.openId;
setCookie('openId',res.user.openId) //cookie存储openId
if(state=='login'){//执行登录流程
}else if(state=='...'){//...
}
}
else{//用户正常进入,不做处理
}
}
这样处理之后,下次这个用户进入页面,cookie中就会有他的openid,就可以直接自动登录了.