谷粒学院8—登录注册和微信扫描登陆


阅读数: 次   

EverydayOneCat

series No.2(p2) of 🎄

88c005161bb8779ed24725327c98513a4d7e8e5d

首页登录和注册

1.单点登录

登录是老生常谈的业务了，在前面的项目中都有所介绍，这里我们使用分布式系统常见的单点登录实现。

所谓单点登录，简单来说就是在一个系统（微服务）中登录了，访问同一企业的其他模块则不需要登录来了。

单点登录常见的三种实现方式：

  1. session广播机制

    这种在小系统中实现简单，但是若是集群服务多了，则效率极差

  2. 使用cookie+redis实现

    1. 用户登录时，在redis生成唯一key，value中存储用户数据
    2. 同时把redis中那个唯一key存到cookie中发送给客户端
    3. 客户端访问其他模块时会带着cookie，根据cookie和redis做判断，若一样则可得到用户数据（即已登陆）

  3. 使用token实现

    1. 进行登陆后将用户信息按照规则生成token字符串通过cookie或者地址返回给客户端
    2. 客户端访问其他模块时会带着上面返回的token字符串，可以根据字符串获取用户信息
    3. 注：基于微服务开发，选择token的形式相对较多，因此我使用token作为用户认证的标准

之前品优购我们采用的是第二种方式实现登录，此次我们采用第三种。

02-单点登录三种方式介绍

2.用户登录接口

2.1整合JWT

上面我们说token字符串是采用一定的规则生成的，同时里面包含用户信息。这里介绍的JWT就是一种生成token的规则。

image-20210131135205527

image-20210131135227589

在common_utils模块中添加jwt工具依赖

1
2
3
4
5
6
7
<dependencies>
    <!-- JWT-->
    <dependency>
        <groupId>io.jsonwebtoken</groupId>
        <artifactId>jjwt</artifactId>
    </dependency>
</dependencies>

创建JWT工具类JwtUtils

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
import io.jsonwebtoken.Claims;
import io.jsonwebtoken.Jws;
import io.jsonwebtoken.Jwts;
import io.jsonwebtoken.SignatureAlgorithm;
import org.springframework.util.StringUtils;

import javax.servlet.http.HttpServletRequest;
import java.util.Date;

/**
 * @author
 */
public class JwtUtils {

    public static final long EXPIRE = 1000 * 60 * 60 * 24;
    public static final String APP_SECRET = "ukc8BDbRigUDaY6pZFfWus2jZWLPHO";

    public static String getJwtToken(String id, String nickname){

        String JwtToken = Jwts.builder()
                .setHeaderParam("typ", "JWT")
                .setHeaderParam("alg", "HS256")
                .setSubject("guli-user")
                .setIssuedAt(new Date())
                .setExpiration(new Date(System.currentTimeMillis() + EXPIRE))
                .claim("id", id)
                .claim("nickname", nickname)
                .signWith(SignatureAlgorithm.HS256, APP_SECRET)
                .compact();

        return JwtToken;
    }

    /**
     * 判断token是否存在与有效
     * @param jwtToken
     * @return
     */
    public static boolean checkToken(String jwtToken) {
        if(StringUtils.isEmpty(jwtToken)) return false;
        try {
            Jwts.parser().setSigningKey(APP_SECRET).parseClaimsJws(jwtToken);
        } catch (Exception e) {
            e.printStackTrace();
            return false;
        }
        return true;
    }

    /**
     * 判断token是否存在与有效
     * @param request
     * @return
     */
    public static boolean checkToken(HttpServletRequest request) {
        try {
            String jwtToken = request.getHeader("token");
            if(StringUtils.isEmpty(jwtToken)) return false;
            Jwts.parser().setSigningKey(APP_SECRET).parseClaimsJws(jwtToken);
        } catch (Exception e) {
            e.printStackTrace();
            return false;
        }
        return true;
    }

    /**
     * 根据token获取会员id
     * @param request
     * @return
     */
    public static String getMemberIdByJwtToken(HttpServletRequest request) {
        String jwtToken = request.getHeader("token");
        if(StringUtils.isEmpty(jwtToken)) return "";
        Jws<Claims> claimsJws = Jwts.parser().setSigningKey(APP_SECRET).parseClaimsJws(jwtToken);
        Claims claims = claimsJws.getBody();
        return (String)claims.get("id");
    }
}

2.2登录接口实现

创建LoginVo用于登录数据封装

1
2
3
4
5
6
7
8
9
10
@Data
@ApiModel(value="登录对象", description="登录对象")
public class LoginVo {

    @ApiModelProperty(value = "手机号")
    private String mobile;

    @ApiModelProperty(value = "密码")
    private String password;
}

创建controller编写登录方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
@RestController
@RequestMapping("/api/ucenter/member")
@CrossOrigin
public class UcenterMemberController {

    @Autowired
    private UcenterMemberService memberService;


    //用户登录
    @PostMapping("login")
    public R login(@RequestBody LoginVo loginVo){
        //返回token值
        String token = memberService.login(loginVo);
        return R.ok().data("token",token);
    }
}

创建service接口和实现类

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
@Autowired
private RedisTemplate<String,String> redisTemplate;

@Override
public String login(LoginVo loginVo) {
    String mobile = loginVo.getMobile();
    String password = loginVo.getPassword();

    //校验参数
    if(StringUtils.isEmpty(mobile)||StringUtils.isEmpty(password)){
        throw new GuliException(20001,"登陆失败");
    }

    //获取数据库对象
    QueryWrapper<UcenterMember> wrapper = new QueryWrapper<>();
    wrapper.eq("mobile",mobile);
    UcenterMember member = baseMapper.selectOne(wrapper);
    if (member == null) {
        throw new GuliException(20001,"登陆失败");
    }

    //校验密码
    //采用MD5加密
    if(!MD5.encrypt(password).equals(member.getPassword())){
        throw new GuliException(20001,"登陆失败");
    }

    //校验是否被禁用
    if(member.getIsDisabled()){
        throw new GuliException(20001,"登陆失败");
    }

    //使用JWT生成token字符串
    String token = JwtUtils.getJwtToken(member.getId(), member.getNickname());

    return token;
}

3.用户注册接口

3.1整合阿里云短信服务

在用户注册时我们需要用到短信验证码避免无效注册占用资源

（1）在service模块下创建子模块service-msm，配置application.properties（和之前差不多）

（2）阿里云短信帮助文档：https://help.aliyun.com/product/44282.html?spm=5176.10629532.0.0.38311cbeYzBm73

（3）在service-msm的pom中引入依赖

1
2
3
4
5
6
7
8
9
10
<dependencies>
    <dependency>
        <groupId>com.alibaba</groupId>
        <artifactId>fastjson</artifactId>
    </dependency>
    <dependency>
        <groupId>com.aliyun</groupId>
        <artifactId>aliyun-java-sdk-core</artifactId>
    </dependency>
</dependencies>

（4）编写controller，根据手机号发送短信

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
@RestController
@RequestMapping("/msm")
@CrossOrigin
public class MsmController {
    @Autowired
    private MsmService msmService;

    //添加缓存逻辑
    @Autowired
    private RedisTemplate<String,String> redisTemplate;

    @GetMapping("send/{phone}")
    public R send(@PathVariable String phone){
        //先判断redis中是否有验证码
        String code = redisTemplate.opsForValue().get(phone);
        if(!StringUtils.isEmpty(code)){
            return R.ok();
        }
        //生成随机验证码
        code = RandomUtil.getFourBitRandom();
        System.out.println("验证码为:"+code);
        //由于后面阿里云上传参数要传json格式，这里给他封装成Map
//        Map<String,Object> param = new HashMap<>();
//        param.put("code",code);
//        boolean isSend = msmService.send(phone,param);
        boolean isSend = true;
        if(isSend){
            redisTemplate.opsForValue().set(phone,code,5, TimeUnit.MINUTES);//验证码在redis存留5分钟
            return R.ok();
        }
        return R.error().message("发送短信失败");
    }
}

（5）编写service

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
@Override
public boolean send(String phone, Map<String, Object> param) {
    if(StringUtils.isEmpty(phone)) {
        return false;
    }

    DefaultProfile profile =
        DefaultProfile.getProfile("default", "keyId", "secret");
    IAcsClient client = new DefaultAcsClient(profile);

    CommonRequest request = new CommonRequest();
    //request.setProtocol(ProtocolType.HTTPS);
    request.setMethod(MethodType.POST);
    request.setDomain("dysmsapi.aliyuncs.com");
    request.setVersion("2017-05-25");
    request.setAction("SendSms");

    request.putQueryParameter("PhoneNumbers", phone);
    request.putQueryParameter("SignName", "我的谷粒在线教育网站");
    request.putQueryParameter("TemplateCode", "");
    request.putQueryParameter("TemplateParam", JSONObject.toJSONString(param));

    try {
        CommonResponse response = client.getCommonResponse(request);
        System.out.println(response.getData());
        return response.getHttpResponse().isSuccess();
    } catch (Exception e) {
        e.printStackTrace();
    }
    return false;
}

image-20210131141230852

3.2注册接口实现

创建RegisterVo用于注册数据封装

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
@Data
@ApiModel(value="注册对象", description="注册对象")
public class RegisterVo {

    @ApiModelProperty(value = "昵称")
    private String nickname;

    @ApiModelProperty(value = "手机号")
    private String mobile;

    @ApiModelProperty(value = "密码")
    private String password;

    @ApiModelProperty(value = "验证码")
    private String code;
}

controller编写注册方法

1
2
3
4
5
6
//用户注册
@PostMapping("register")
public R register(@RequestBody RegisterVo registerVo){
    memberService.register(registerVo);
    return R.ok();
}

service实现逻辑

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
@Override
public void register(RegisterVo registerVo) {
    String code = registerVo.getCode();
    String mobile = registerVo.getMobile();
    String nickname = registerVo.getNickname();
    String password = registerVo.getPassword();

    //校验参数
    if(StringUtils.isEmpty(mobile)||StringUtils.isEmpty(password)
       ||StringUtils.isEmpty(code)||StringUtils.isEmpty(nickname)){
        throw new GuliException(20001,"注册失败");
    }

    //校验校验验证码
    //从redis获取发送的验证码
    String redisCode = redisTemplate.opsForValue().get(mobile);
    if(!code.equals(redisCode)){
        throw new GuliException(20001,"注册失败");
    }

    //查询数据库中是否存在相同的手机号码
    QueryWrapper<UcenterMember> wrapper = new QueryWrapper<>();
    wrapper.eq("mobile",mobile);
    Integer count = baseMapper.selectCount(wrapper);
    if(count.intValue()>0){
        throw new GuliException(20001,"注册失败");
    }

    //添加注册信息到数据库
    UcenterMember member = new UcenterMember();
    member.setMobile(mobile);
    member.setPassword(MD5.encrypt(password));
    member.setNickname(nickname);
    member.setAvatar("https://online-teach-file.oss-cn-beijing.aliyuncs.com/teacher/2019/10/30/b8aa36a2-db50-4eca-a6e3-cc6e608355e0.png");
    member.setIsDisabled(false);
    baseMapper.insert(member);
}

根据token获取用户信息接口

1
2
3
4
5
6
7
8
//根据token获取用户信息
@GetMapping("getLoginInfo")
public R getLoginInfo(HttpServletRequest request){
    //调用jwt工具类，根据request对象头信息获取用户信息
    String memberId = JwtUtils.getMemberIdByJwtToken(request);
    UcenterMember member = memberService.getById(memberId);
    return R.ok().data("item",member);
}

4.注册前端实现

4.1安装插件

（1）执行命令安装

1
2
3
npm install element-ui

npm install vue-qriously

（2）修改配置文件 nuxt-swiper-plugin.js，使用插件

1
2
3
4
5
6
7
8
import Vue from 'vue'
import VueAwesomeSwiper from 'vue-awesome-swiper/dist/ssr'
import VueQriously from 'vue-qriously'
import ElementUI from 'element-ui' //element-ui的全部组件
import 'element-ui/lib/theme-chalk/index.css'//element-ui的css
Vue.use(ElementUI) //使用elementUI
Vue.use(VueQriously)
Vue.use(VueAwesomeSwiper)

4.2定义接口

在api文件夹中创建注册的js文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
import request from '@/utils/request'

export default {
  //根据手机号码发送短信
  getMobile(mobile) {
    return request({
      url: `/msm/send/${mobile}`,
      method: 'get'
    })
  },
  //用户注册
  submitRegister(formItem) {
    return request({
      url: `/api/ucenter/member/register`,
      method: 'post',
      data: formItem
    })
  }
}

4.3注册页面

register.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
<template>
  <div class="main">
    <div class="title">
      <a href="/login">登录</a>
      <span>·</span>
      <a class="active" href="/register">注册</a>
    </div>

    <div class="sign-up-container">
      <el-form ref="userForm" :model="params">

        <el-form-item class="input-prepend restyle" prop="nickname" :rules="[{ required: true, message: '请输入你的昵称', trigger: 'blur' }]">
          <div>
            <el-input type="text" placeholder="你的昵称" v-model="params.nickname"/>
            <i class="iconfont icon-user"/>
          </div>
        </el-form-item>

        <el-form-item class="input-prepend restyle no-radius" prop="mobile" :rules="[{ required: true, message: '请输入手机号码', trigger: 'blur' },{validator: checkPhone, trigger: 'blur'}]">
          <div>
            <el-input type="text" placeholder="手机号" v-model="params.mobile"/>
            <i class="iconfont icon-phone"/>
          </div>
        </el-form-item>

        <el-form-item class="input-prepend restyle no-radius" prop="code" :rules="[{ required: true, message: '请输入验证码', trigger: 'blur' }]">
          <div style="width: 100%;display: block;float: left;position: relative">
            <el-input type="text" placeholder="验证码" v-model="params.code"/>
            <i class="iconfont icon-phone"/>
          </div>
          <div class="btn" style="position:absolute;right: 0;top: 6px;width: 40%;">
            <a href="javascript:" type="button" @click="getCodeFun()" :value="codeTest" style="border: none;background-color: none">{{codeTest}}</a>
          </div>
        </el-form-item>

        <el-form-item class="input-prepend" prop="password" :rules="[{ required: true, message: '请输入密码', trigger: 'blur' }]">
          <div>
            <el-input type="password" placeholder="设置密码" v-model="params.password"/>
            <i class="iconfont icon-password"/>
          </div>
        </el-form-item>

        <div class="btn">
          <input type="button" class="sign-up-button" value="注册" @click="submitRegister()">
        </div>
        <p class="sign-up-msg">
          点击 “注册” 即表示您同意并愿意遵守简书
          <br>
          <a target="_blank" href="http://www.jianshu.com/p/c44d171298ce">用户协议</a>
          和
          <a target="_blank" href="http://www.jianshu.com/p/2ov8x3">隐私政策</a> 。
        </p>
      </el-form>
      <!-- 更多注册方式 -->
      <div class="more-sign">
        <h6>社交帐号直接注册</h6>
        <ul>
          <li><a id="weixin" class="weixin" target="_blank" href="http://huaan.free.idcfengye.com/api/ucenter/wx/login"><i
            class="iconfont icon-weixin"/></a></li>
          <li><a id="qq" class="qq" target="_blank" href="#"><i class="iconfont icon-qq"/></a></li>
        </ul>
      </div>
    </div>
  </div>
</template>

实现点击获取验证码倒计时效果和校验验证码

image-20210131141315194

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
data() {
      return {
        params: {
          mobile: '',
          code: '',
          nickname: '',
          password: ''
        },
        sending: true,      //是否发送验证码
        second: 60,        //倒计时间
        codeTest: '获取验证码'
      }
    },
    methods: {
        //获取验证码方法
      getCodeFun() {
        //sending = false
        //his.sending原为true,请求成功，!this.sending == true，主要是防止有人把disabled属性去掉，多次点击；
        if (!this.sending)
          return;

        // prop 换成你想监听的prop字段
        this.$refs.userForm.validateField('mobile', (errMsg) => {
          if (errMsg == '') {
            registerApi.getMobile(this.params.mobile).then(res => {
              this.sending = false;
              this.timeDown();
            });
          }
        })
      },

    //实现时间逐次减少
      timeDown() {
        let result = setInterval(() => {
          --this.second;
          this.codeTest = this.second
          if (this.second < 1) {
            clearInterval(result);
            this.sending = true;
            //this.disabled = false;
            this.second = 60;
            this.codeTest = "获取验证码"
          }
        }, 1000);

      },
      submitRegister() {
        this.$refs['userForm'].validate((valid) => {
          if (valid) {
            registerApi.submitRegister(this.params).then(response => {
              //提示注册成功
              this.$message({
                type: 'success',
                message: "注册成功"
              })
              this.$router.push({path: '/login'})
            })
          }
        })
      },

      checkPhone (rule, value, callback) {
        //debugger
        if (!(/^1[34578]\d{9}$/.test(value))) {
          return callback(new Error('手机号码格式不正确'))
        }
        return callback()
      }
    }
  }

5.登录前端实现

（1）在api文件夹中创建登录的js文件，定义接口（略）

（2）安装js-cookie插件：npm install js-cookie

（3）实现登陆方法：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
//登录
submitLogin(){
    //第一步 调用登录接口，返回token值
    loginApi.submitLogin(this.user).then(res=>{
        if(res.data.success){
            //第二步 将token放入cookie中以便拦截器将cookie中的token放入request的请求头中
            //参数1：key    参数2：value    参数3：作用域
            cookie.set("guli_token",res.data.data.token,{ domain: 'localhost' })
            //登录成功根据token获取用户信息
            loginApi.getLoginInfo().then(res=>{
                this.loginInfo = res.data.data.item
                //第四步 将用户信息得到并且存到cookie中以便首页能显示
                cookie.set('guli_ucenter', this.loginInfo, { domain: 'localhost' })
                //跳转到首页
                window.location.href = "/";
            })
        }
    })
},

（4）在request.js添加拦截器，用于传递token信息

1
2
3
4
5
6
7
8
9
10
11
//第三步 http request 拦截器
service.interceptors.request.use(
    config => {
        //debugger
        if (cookie.get('guli_token')) {
            config.headers['token'] = cookie.get('guli_token');//将cookie中的token值放入请求头中
        }
        return config
    },
    err => {
        return Promise.reject(err);

（5）default.vue页面显示登录之后的用户信息

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
 <!-- / nav -->
<ul class="h-r-login">
    <li v-if="!loginInfo.id" id="no-login">
        <a href="/login" title="登录">
            <em class="icon18 login-icon">&nbsp;</em>
            <span class="vam ml5">登录</span>
        </a>
        |
        <a href="/register" title="注册">
            <span class="vam ml5">注册</span>
        </a>
    </li>
    <li v-if="loginInfo.id" id="is-login-one" class="mr10">
        <a id="headerMsgCountId" href="#" title="消息">
            <em class="icon18 news-icon">&nbsp;</em>
        </a>
        <q class="red-point" style="display: none">&nbsp;</q>
    </li>
    <li v-if="loginInfo.id" id="is-login-two" class="h-r-user">
        <a href="/ucenter" title>
            <img
                 :src="loginInfo.avatar"
                 width="30"
                 height="30"
                 class="vam picImg"
                 alt
                 >
            <span id="userName" class="vam disIb">{{ loginInfo.nickname }}</span>
        </a>
        <a href="javascript:void(0);" title="退出" @click="logout()" class="ml5">退出</a>
    </li>
    <!-- /未登录显示第1 li；登录后显示第2，3 li -->
</ul>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
//显示登录信息
showInfo(){
    //第五步 从cookie中取到用户登录信息
    var jsonStr = cookie.get("guli_ucenter")
    //从cookie中取到的都是字符串，我们需要将字符串转换成json对象
    if(jsonStr){
        this.loginInfo = JSON.parse(jsonStr)
    }
},
    //退出方法
    logout() {
        cookie.set('guli_ucenter', "", {domain: 'localhost'})
        cookie.set('guli_token', "", {domain: 'localhost'})

        //跳转页面
        window.location.href = "/"
    }
}

02-登录前端整合

微信扫描登陆

1.OAuth2介绍

image-20210131141956432

image-20210131142011021

img

2.微信扫描二维码

（1）application.properties添加相关配置信息（尚硅谷提供的）

1
2
3
4
5
6
# 微信开放平台 appid
wx.open.app_id=wxed9954c01bb89b47
# 微信开放平台 appsecret
wx.open.app_secret=a7482517235173ddb4083788de60b90e
# 微信开放平台 重定向url
wx.open.redirect_url=http://guli.shop/api/ucenter/wx/callback

（2）创建常量类读取（略）

（3）微服务中创建api包并创建Controller

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
@Controller
@CrossOrigin
@RequestMapping("/api/ucenter/wx")
public class WxApiController {

    @Autowired
    private UcenterMemberService memberService;

    //得到微信扫描登陆二维码
    //根据官方文档，需要重定向到一个官方给的固定连接
    @GetMapping("login")
    public String wxLogin(){
        //微信开放平台授权baseUrl,其中%s和?一样代表占位符
        String baseUrl = "https://open.weixin.qq.com/connect/qrconnect" +
                "?appid=%s" +
                "&redirect_uri=%s" +
                "&response_type=code" +
                "&scope=snsapi_login" +
                "&state=%s" +
                "#wechat_redirect";

        //官方中说明请使用urlEncode对链接redirect_uri进行处理
        String redirectUrl = ConstantPropertiesUtil.WX_OPEN_REDIRECT_URL;
        try {
            redirectUrl = URLEncoder.encode(redirectUrl,"utf-8");//url编码
        } catch (Exception e) {
            e.printStackTrace();
        }
        String guli = String.format(baseUrl, ConstantPropertiesUtil.WX_OPEN_APP_ID, redirectUrl, "guli");
        return "redirect:"+guli;
    }
}

授权url参数说明

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

实现效果：

image-20210131142828649

3.获取扫描人信息

image-20210131142928399

添加依赖

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 <!--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>

Controller编写方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
//登陆成功得到用户信息
//回调url已经固定http://回调地址/api/ucenter/wx/callback
@GetMapping("callback")
public String callback(String code,String state){
    //回调地址会带着授权临时票据code和我们定义的state（如这里就是"guli"）

    //访问微信固定地址得到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);
    //使用httpclient工具访问固定地址得到数据
    String access = null;
    try {
        access = HttpClientUtils.get(accessTokenUrl);
    } catch (Exception e) {
        throw new GuliException(20001, "获取access_token失败");
    }
    //得到的数据是json字符串，用Gson工具解析
    Gson gson = new Gson();
    HashMap accessTokenInfo = gson.fromJson(access, HashMap.class);
    String accessToken = (String) accessTokenInfo.get("access_token");
    String openid = (String) accessTokenInfo.get("openid");

    //由于我们在数据库存的是微信唯一标识符openid，先判断当前用用户是否曾经使用过微信登录，如果没用过再接着访问得到信息加入数据库
    UcenterMember member = memberService.getByOpenid(openid);
    if (member == null) {//没用该用户再添加
        //拿着上面得到的access_token和openid访问微信的资源服务器，获取用户信息
        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);
        } catch (Exception e) {
            throw new GuliException(20001, "获取用户信息失败");
        }
        //解析json
        HashMap UserInfo = gson.fromJson(resultUserInfo, HashMap.class);
        String nickname = (String) UserInfo.get("nickname");
        String headimgurl = (String) UserInfo.get("headimgurl");

        //向数据库插入一条数据
        member = new UcenterMember();
        member.setNickname(nickname);
        member.setOpenid(openid);
        member.setAvatar(headimgurl);
        memberService.save(member);
    }

    // 生成jwt
    String jwtToken = JwtUtils.getJwtToken(member.getId(), member.getNickname());
    //因为端口号不同存在蛞蝓问题，cookie不能跨域，所以这里使用url重写

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

image-20210131143114195

4.前端显示用户登录信息

修改default.vue页面脚本

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
export default {
  data() {
    return {
      token: '',
      loginInfo: {
        id: '',
        age: '',
        avatar: '',
        mobile: '',
        nickname: '',
        sex: ''
      }
    }
  },

  created() {
      //判断路径是否含token,有的话则是微信登录来的
    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'})
      })
    }
  }
}

最终效果

image-20210131143351625

结语

劲夫：晚上8点，结束在母司一天的辛苦，坐上母交车回去。到站是一个母园，顺便在旁边的母厕释放一下，走了2母里回到母寓，拿出一天前买的1母斤肉，走回房间，打开游戏，顺便日女辅助

赏

谢谢你请我吃糖果

支付宝
微信

扫一扫，分享到微信

微信分享二维码

tag:

    缺失模块。
    1、请确保node版本大于6.2
    2、在博客根目录（注意不是yilia根目录）执行以下命令：
    npm i hexo-generator-json-content --save

    3、在根目录_config.yml里添加配置： 

      jsonContent:
    meta: false
    pages: false
    posts:
      title: true
      date: true
      path: true
      text: false
      raw: false
      content: false
      slug: false
      updated: false
      comments: false
      link: false
      permalink: false
      excerpt: false
      categories: false
      tags: true

很惭愧<br><br>只做了一点微小的工作<br>谢谢大家