微信开放平台 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'})

})

Vue+SpringBoot的微信登录相关推荐

vue实现绑定微信登录全过程
一.需求说明通过vue绑定微信登录,首次进入获取code,通过code获取openId查用户,然后进行登录,第二次进入若绑定过微信,直接登录进入主界面,若没绑定过微信,则跳转到登录页面. 二.准备工 ...
Vue前端开发——微信登录
1.准备工作 1.1 现在微信开放平台注册一个账号 https://open.weixin.qq.com/ 1.2 查看官方文档 https://developers.weixin.qq.com/do ...
Vue 内嵌微信登录二维码及修改默认样式
1. index.html 引入微信官方提供的js文件 <script src="http://res.wx.qq.com/connect/zh_CN/htmledition/js/w ...
SpringBoot实现微信登录
1. 查看微信开发文档 2. 申请测试号,可以获取到appId和appsecret(下面application.yml参数配置用到) 3. 在测试号页面,关注自己的测试公众号. 4. 网页授权获取用 ...
SpringBoot 集成微信绑定微信登录
SpringBoot 集成微信登录重写一个认证逻辑实现AuthenticationProvider import com.hzjtcl.commons.security.service.Hzjt ...
SpringBoot整合小程序微信登录功能
一.SpringBoot整合微信登录小程序的使用已经是一个普遍的现象,对于刚学习SpringBoot的我们来说完全的写好一套微信登录的案例有一定的难度,这里结合自己的一些学习经验,把微信登录这一 ...
Springboot+vue+企业微信登录
Springboot+ vue +企业微信登录前端构造企业微信授权链接第一步,企业微信后台创建一个应用构造企业微信网页授权OAuth2链接前后端搭配使用企业微信登录其他前端构造企业微信授权 ...
Springboot 整合微信小程序实现登录与增删改查
点击上方好好学java ,选择星标公众号重磅资讯.干货,第一时间送达今日推荐:我的大学到研究生自学 Java 之路,过程艰辛,不放弃,保持热情,最终发现我是这样拿到大厂 offer 的! 作 ...
vue+spring boot项目实现PC端微信登录
一.实现微信登录在编码前需要在微信开放平台注册开发者账号和安装NatApp获取域名. 微信开放平台注册开发者账号可参考:https://blog.csdn.net/weixin_45001200/ar ...
SpringBoot整合微信扫码登录
SpringBoot整合微信扫码登录准备工作基本思路流程搭建SpringBoot 引入依赖加入配置文件代码实现工具类 controller层结果准备工作 1.登录官网了解到,学习者想本 ...

Vue+SpringBoot的微信登录

微信开放平台 appid

微信开放平台 appsecret

微信开放平台重定向url

3、创建controller

微信开放平台重定向url

测试回调是否可用

二、后台开发

1、添加依赖

2、创建httpclient工具类

3、创建回调controller方法

4、业务层

一、整合JWT令牌

1、callback中生成jwt

2、前端打印token

1、修改default.vue页面脚本

Vue+SpringBoot的微信登录相关推荐

最新文章

热门文章

Vue+SpringBoot的微信登录

微信开放平台 appid

微信开放平台 appsecret

微信开放平台 重定向url

3、创建controller

微信开放平台 重定向url

测试回调是否可用

二、后台开发

1、添加依赖

2、创建httpclient工具类

3、创建回调controller方法

4、业务层

一、整合JWT令牌

1、callback中生成jwt

2、前端打印token

1、修改default.vue页面脚本

Vue+SpringBoot的微信登录相关推荐

最新文章

热门文章

微信开放平台重定向url

微信开放平台重定向url