Vue+SpringBoot的微信登录

微信开放平台 appid

wx.open.app_id=你的appid

微信开放平台 appsecret

wx.open.app_secret=你的appsecret

微信开放平台 重定向url

wx.open.redirect_url=http://你的服务器名称/api/ucenter/wx/callback

package com.guli.ucenter.util;

@Component
//@PropertySource("classpath:application.properties")
public class ConstantPropertiesUtil implements InitializingBean {

@Value("${wx.open.app_id}")
private String appId;

@Value("${wx.open.app_secret}")
private String appSecret;

@Value("${wx.open.redirect_url}")
private String redirectUrl;

public static String WX_OPEN_APP_ID;
public static String WX_OPEN_APP_SECRET;
public static String WX_OPEN_REDIRECT_URL;

@Override
public void afterPropertiesSet() throws Exception {
    WX_OPEN_APP_ID = appId;
    WX_OPEN_APP_SECRET = appSecret;
    WX_OPEN_REDIRECT_URL = redirectUrl;
}

}

3、创建controller

guli-microservice-ucenter微服务中创建api包api包中创建WxApiController 

package com.guli.ucenter.controller.api;

@CrossOrigin

@Controller//注意这里没有配置 @RestController

@RequestMapping("/api/ucenter/wx")

public class WxApiController {

    @GetMapping("login")

    public String genQrConnect(HttpSession session) {

        // 微信开放平台授权baseUrl

        String baseUrl = "https://open.weixin.qq.com/connect/qrconnect" +

                "?appid=%s" +

                "&redirect_uri=%s" +

                "&response_type=code" +

                "&scope=snsapi_login" +

                "&state=%s" +

                "#wechat_redirect";

        // 回调地址

        String redirectUrl = ConstantPropertiesUtil.WX_OPEN_REDIRECT_URL; //获取业务服务器重定向地址

        try {

            redirectUrl = URLEncoder.encode(redirectUrl, "UTF-8"); //url编码

        } catch (UnsupportedEncodingException e) {

            throw new GuliException(20001, e.getMessage());

        }

        // 防止csrf攻击（跨站请求伪造攻击）

        //String state = UUID.randomUUID().toString().replaceAll("-", "");//一般情况下会使用一个随机数

        String state = "imhelen";//为了让大家能够使用我搭建的外网的微信回调跳转服务器，这里填写你在ngrok的前置域名

        System.out.println("state = " + state);

        // 采用redis等进行缓存state 使用sessionId为key 30分钟后过期，可配置

        //键："wechar-open-state-" + httpServletRequest.getSession().getId()

        //值：satte

        //过期时间：30分钟

        //生成qrcodeUrl

        String qrcodeUrl = String.format(

                baseUrl,

                ConstantPropertiesUtil.WX_OPEN_APP_ID,

                redirectUrl,

                state);

        return "redirect:" + qrcodeUrl;

    }

}

授权url参数说明

参数	是否必须	说明
appid	是	应用唯一标识
redirect_uri	是	请使用urlEncode对链接进行处理
response_type	是	填code
scope	是	应用授权作用域，拥有多个作用域用逗号（,）分隔，网页应用目前仅填写snsapi_login即
state	否	用于保持请求和回调的状态，授权请求后原样带回给第三方。该参数可用于防止csrf攻击（跨站请求伪造攻击），建议第三方带上该参数，可设置为简单的随机数加session进行校验

微信开放平台 重定向url

wx.open.redirect_url=http://回调地址/api/ucenter/wx/callback

测试回调是否可用

在WxApiController中添加方法 

@GetMapping("callback")

public String callback(String code, String state, HttpSession session) {

    //得到授权临时票据code

    System.out.println("code = " + code);

    System.out.println("state = " + state);

}

二、后台开发

1、添加依赖

 <!--httpclient-->

<dependency>

    <groupId>org.apache.httpcomponents</groupId>

    <artifactId>httpclient</artifactId>

</dependency>

<!--commons-io-->

<dependency>

    <groupId>commons-io</groupId>

    <artifactId>commons-io</artifactId>

</dependency>

<!--gson-->

<dependency>

    <groupId>com.google.code.gson</groupId>

    <artifactId>gson</artifactId>

</dependency>

2、创建httpclient工具类

放入util包 

HttpClientUtils.java

3、创建回调controller方法

在WxApiController.java中添加如下方法 

/**

* @param code

* @param state

* @return

*/

@GetMapping("callback")

public String callback(String code, String state){

    //得到授权临时票据code

    System.out.println(code);

    System.out.println(state);

    //从redis中将state获取出来，和当前传入的state作比较

    //如果一致则放行，如果不一致则抛出异常：非法访问

    //向认证服务器发送请求换取access_token

    String baseAccessTokenUrl = "https://api.weixin.qq.com/sns/oauth2/access_token" +

        "?appid=%s" +

        "&secret=%s" +

        "&code=%s" +

        "&grant_type=authorization_code";

    String accessTokenUrl = String.format(baseAccessTokenUrl,

                                          ConstantPropertiesUtil.WX_OPEN_APP_ID,

                                          ConstantPropertiesUtil.WX_OPEN_APP_SECRET,

                                          code);

    String result = null;

    try {

        result = HttpClientUtils.get(accessTokenUrl);

        System.out.println("accessToken=============" + result);

    } catch (Exception e) {

        throw new GuliException(20001, "获取access_token失败");

    }

    //解析json字符串

    Gson gson = new Gson();

    HashMap map = gson.fromJson(result, HashMap.class);

    String accessToken = (String)map.get("access_token");

    String openid = (String)map.get("openid");

    //查询数据库当前用用户是否曾经使用过微信登录

    Member member = memberService.getByOpenid(openid);

    if(member == null){

        System.out.println("新用户注册");

        //访问微信的资源服务器，获取用户信息

        String baseUserInfoUrl = "https://api.weixin.qq.com/sns/userinfo" +

            "?access_token=%s" +

            "&openid=%s";

        String userInfoUrl = String.format(baseUserInfoUrl, accessToken, openid);

        String resultUserInfo = null;

        try {

            resultUserInfo = HttpClientUtils.get(userInfoUrl);

            System.out.println("resultUserInfo==========" + resultUserInfo);

        } catch (Exception e) {

            throw new GuliException(20001, "获取用户信息失败");

        }

        //解析json

        HashMap<String, Object> mapUserInfo = gson.fromJson(resultUserInfo, HashMap.class);

        String nickname = (String)mapUserInfo.get("nickname");

        String headimgurl = (String)mapUserInfo.get("headimgurl");

        //向数据库中插入一条记录

        member = new Member();

        member.setNickname(nickname);

        member.setOpenid(openid);

        member.setAvatar(headimgurl);

        memberService.save(member);

    }

    //TODO 登录

    return "redirect:http://localhost:3000";

}

4、业务层

业务接口：MemberService.java

Member getByOpenid(String openid);

业务实现：MemberServiceImpl.java

@Override

public Member getByOpenid(String openid) {

    QueryWrapper<Member> queryWrapper = new QueryWrapper<>();

    queryWrapper.eq("openid", openid);

    Member member = baseMapper.selectOne(queryWrapper);

    return member;

}

一、整合JWT令牌

1、callback中生成jwt

在WxApiController.java的callback方法的最后添加如下代码 

// 生成jwt

String token = JwtUtils.geneJsonWebToken(member.getId(),member.getNickName());

//存入cookie

//CookieUtils.setCookie(request, response, "guli_jwt_token", token);

//因为端口号不同存在蛞蝓问题，cookie不能跨域，所以这里使用url重写

return "redirect:http://localhost:3000?token=" + token;

2、前端打印token

在layout/defaullt.vue中打印获取的token值 

export default {

  created() {

    console.log(this.$route.query.token)

  }

}

1、修改default.vue页面脚本

export default {

  data() {

    return {

      token: '',

      loginInfo: {

        id: '',

        age: '',

        avatar: '',

        mobile: '',

        nickname: '',

        sex: ''

      }

    }

  },

  created() {

    this.token = this.$route.query.token

    if (this.token) {

      this.wxLogin()

    }

    this.showInfo()

  },

  methods: {

    showInfo() {

      //debugger

      var jsonStr = cookie.get("guli_ucenter");

      if (jsonStr) {

        this.loginInfo = JSON.parse(jsonStr)

      }

    },

    logout() {

      //debugger

      cookie.set('guli_ucenter', "", {domain: 'localhost'})

      cookie.set('guli_token', "", {domain: 'localhost'})

      //跳转页面

      window.location.href = "/"

    },

    wxLogin() {

      if (this.token == '') return

      //把token存在cookie中、也可以放在localStorage中

      cookie.set('guli_token', this.token, {domain: 'localhost'})

      cookie.set('guli_ucenter', '', {domain: 'localhost'})

      //登录成功根据token获取用户信息

      userApi.getLoginInfo().then(response => {

        this.loginInfo = response.data.data.item

        //将用户信息记录cookie

        cookie.set('guli_ucenter', this.loginInfo, {domain: 'localhost'})

      })

    }

  }

}