Java配合Vue实现微信公众号自动登录

话不多说,直接进入正题.

首先,要在微信公众平台注册一个公众账号,我这边是用的测试账号.

有了账号之后进入微信公众平台获取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?appid=?&redirect_uri=?&response_type=code&scope=?&state=?#wechat_redirect获取code.

后端需提供接口供前端调用以获取完整请求地址,前端需将当前地址当作回调地址传给后端,后端接收到后将各个参数拼接到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,就可以直接自动登录了.