微信登陆功能

微信扫描登录成功必须绑定手机号码，即：第一次扫描成功后绑定手机号，以后登录扫描直接登录成功

一、OAuth2

令牌是接近OAuth2方式，需要考虑如何管理令牌、颁发令牌、吊销令牌，需要统一的协议，因此就有了OAuth2协议

现代微服务中系统微服务化以及应用的形态和设备类型增多，不能用传统的登录方式
核心的技术不是用户名和密码，而是token，由AuthServer颁发token，用户使用token进行登录

二、前期准备

这部分准备直接使用尚硅谷课程的实例

1、注册微信开放平台：https://open.weixin.qq.com
2、邮箱激活
3、完善开发者资料
4、开发者资质认证准备营业执照，1-2个工作日审批、300元
5、创建网站应用提交审核，7个工作日审批
6、内网穿透 ngrok的使用

三、返回微信登录参数

1、在application-dev.yml添加配置

wx.open.app_id=wxed9954c01bb89b47
wx.open.app_secret=a7482517235173ddb4083788de60b90e
wx.open.redirect_url=http://guli.shop/api/ucenter/wx/callback
yygh.baseUrl=http://localhost:3000

2、添加配置类：跟手机号登陆基本一致

@Component
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;

    @Value("${yygh.baseUrl}")
    private String yyghBaseUrl;

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

    public static String YYGH_BASE_URL;

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

3、添加接口

@Controller
@RequestMapping("/api/ucenter/wx")
public class WeixinApiController {

    @Autowired
    private UserInfoService userInfoService;
    @Autowired
    private RedisTemplate redisTemplate;

    /**
     * 获取微信登录参数
     */
    @GetMapping("getLoginParam")
    @ResponseBody
    public Result genQrConnect(HttpSession session) throws UnsupportedEncodingException {
        String redirectUri = URLEncoder.encode(ConstantPropertiesUtil.WX_OPEN_REDIRECT_URL, "UTF-8");
        Map<String, Object> map = new HashMap<>();
        map.put("appid", ConstantPropertiesUtil.WX_OPEN_APP_ID);
        map.put("redirectUri", redirectUri);
        map.put("scope", "snsapi_login");
        map.put("state", System.currentTimeMillis()+"");//System.currentTimeMillis()+""
        return Result.ok(map);
    }

四、登录二维码

1、封装api请求

import request from '@/utils/request'

const api_name = `/api/ucenter/wx`

export default {
  getLoginParam() {
    return request({
      url: `${api_name}/getLoginParam`,
      method: `get`
    })
  }
}

2 、修改layouts/myheader.vue文件，添加微信二维码登录逻辑

//引入api
import weixinApi from '@/api/weixin'
//2、引入微信js
mounted() {
    // 注册全局登录事件对象
    window.loginEvent = new Vue();
    // 监听登录事件
    loginEvent.$on('loginDialogEvent', function () {
      document.getElementById("loginDialog").click();
    })
    // 触发事件，显示登录层：loginEvent.$emit('loginDialogEvent')
    //初始化微信js
    const script = document.createElement('script')
    script.type = 'text/javascript'
    script.src = 'https://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js'
    document.body.appendChild(script)

    // 微信登录回调处理
    let self = this;
    window["loginCallback"] = (name,token, openid) => {
      self.loginCallback(name, token, openid);
    }
  },
  //添加微信登录方法
  loginCallback(name, token, openid) {
    // 打开手机登录层，绑定手机号，改逻辑与手机登录一致
    if(openid != '') {
       this.userInfo.openid = openid
       this.showLogin()
    } else {
       this.setCookies(name, token)
    }
},

weixinLogin() {
  this.dialogAtrr.showLoginType = 'weixin'

  weixinApi.getLoginParam().then(response => {
    var obj = new WxLogin({
      self_redirect:true,
      id: 'weixinLogin', // 需要显示的容器id
      appid: response.data.appid, // 公众号appid wx*******
      scope: response.data.scope, // 网页默认即可
      redirect_uri: response.data.redirectUri, // 授权成功后回调的url
      state: response.data.state, // 可设置为简单的随机数加session用来校验
      style: 'black', // 提供"black"、"white"可选。二维码的样式
      href: '' // 外部css文件url，需要https
    })
  })
}

3 、处理微信回调
①添加httpclient工具类：该工具类是为了后台实现http请求

HttpClient 是 Apache Jakarta Common 下的子项目，用来提供高效的、最新的、功能丰富的支持 HTTP协议的客户端编程工具包，并且它支持 HTTP 协议最新的版本和建议。HTTP和浏览器有点像，但却不是浏览器。很多人觉得既然HttpClient是一个HTTP客户端编程工具，很多人把他当做浏览器来理解，但是其实HttpClient不是浏览器，它是一个HTTP通信库，因此它只提供一个通用浏览器应用程序所期望的功能子集，最根本的区别是HttpClient中没有用户界面，浏览器需要一个渲染引擎来显示页面，并解释用户输入，例如鼠标点击显示页面上的某处，有一个布局引擎，计算如何显示HTML页面，包括级联样式表和图像。javascript解释器运行嵌入HTML页面或从HTML页面引用的javascript代码。来自用户界面的事件被传递到javascript解释器进行处理。除此之外，还有用于插件的接口，可以处理Applet，嵌入式媒体对象（如pdf文件，Quicktime电影和Flash动画）或ActiveX控件（可以执行任何操作）。HttpClient只能以编程的方式通过其API用于传输和接受HTTP消息。

引用自：httpclient详细使用示例

②在WeixinApiController 类添加回调接口获取access_token

/**
 * 微信登录回调
 *
 * @param code
 * @param state
 * @return
 */
@RequestMapping("callback")
public String callback(String code, String state) {
    //获取授权临时票据
    System.out.println("微信授权服务器回调。。。。。。");
    System.out.println("state = " + state);
    System.out.println("code = " + code);

    if (StringUtils.isEmpty(state) || StringUtils.isEmpty(code)) {
        log.error("非法回调请求");
        throw new YyghException(ResultCodeEnum.ILLEGAL_CALLBACK_REQUEST_ERROR);
    }

    //使用code和appid以及appscrect换取access_token
    StringBuffer baseAccessTokenUrl = new StringBuffer()
            .append("https://api.weixin.qq.com/sns/oauth2/access_token")
            .append("?appid=%s")
            .append("&secret=%s")
            .append("&code=%s")
            .append("&grant_type=authorization_code");

    String accessTokenUrl = String.format(baseAccessTokenUrl.toString(),
            ConstantPropertiesUtil.WX_OPEN_APP_ID,
            ConstantPropertiesUtil.WX_OPEN_APP_SECRET,
            code);

    String result = null;
    try {
        result = HttpClientUtils.get(accessTokenUrl);
    } catch (Exception e) {
        throw new YyghException(ResultCodeEnum.FETCH_ACCESSTOKEN_FAILD);
    }

    System.out.println("使用code换取的access_token结果 = " + result);

    JSONObject resultJson = JSONObject.parseObject(result);
    if(resultJson.getString("errcode") != null){
        log.error("获取access_token失败：" + resultJson.getString("errcode") + resultJson.getString("errmsg"));
        throw new YyghException(ResultCodeEnum.FETCH_ACCESSTOKEN_FAILD);
    }

    String accessToken = resultJson.getString("access_token");
    String openId = resultJson.getString("openid");
    log.info(accessToken);
    log.info(openId);

    //根据access_token获取微信用户的基本信息
    //先根据openid进行数据库查询
   // UserInfo userInfo = userInfoService.getByOpenid(openId);
    // 如果没有查到用户信息,那么调用微信个人信息获取的接口
   // if(null == userInfo){
        //如果查询到个人信息，那么直接进行登录
        //使用access_token换取受保护的资源：微信的个人信息
        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 YyghException(ResultCodeEnum.FETCH_USERINFO_ERROR);
        }
        System.out.println("使用access_token获取用户信息的结果 = " + resultUserInfo);

        JSONObject resultUserInfoJson = JSONObject.parseObject(resultUserInfo);
        if(resultUserInfoJson.getString("errcode") != null){
            log.error("获取用户信息失败：" + resultUserInfoJson.getString("errcode") + resultUserInfoJson.getString("errmsg"));
            throw new YyghException(ResultCodeEnum.FETCH_USERINFO_ERROR);
        }

        //解析用户信息
        String nickname = resultUserInfoJson.getString("nickname");
        String headimgurl = resultUserInfoJson.getString("headimgurl");

        UserInfo userInfo = new UserInfo();
        userInfo.setOpenid(openId);
        userInfo.setNickName(nickname);
        userInfo.setStatus(1);
        userInfoService.save(userInfo);
   // }

    Map<String, Object> map = new HashMap<>();
    String name = userInfo.getName();
    if(StringUtils.isEmpty(name)) {
        name = userInfo.getNickName();
    }
    if(StringUtils.isEmpty(name)) {
        name = userInfo.getPhone();
    }
    map.put("name", name);
    if(StringUtils.isEmpty(userInfo.getPhone())) {
        map.put("openid", userInfo.getOpenid());
    } else {
        map.put("openid", "");
    }
    String token = JwtHelper.createToken(userInfo.getId(), name);
    map.put("token", token);
    return "redirect:" + ConstantPropertiesUtil.YYGH_BASE_URL + "/weixin/callback?token="+map.get("token")+"&openid="+map.get("openid")+"&name="+URLEncoder.encode((String)map.get("name"));
}

③获取用户信息，根据唯一标识openid查询用户是否已注册
④ 获取用户信息，根据access_token获取用户信息

4、回调返回页面

我们只期望返回一个空页面，然后跟登录层通信就可以了，其实就是一个过渡页面，所以我们要给这个过渡页面定义一个空模板，在页面我们就能够接收到返回来的参数

①添加空模板组件：/layouts/empty.vue

<template>
<div>
<nuxt/>
</div>
</template>

②根据返回路径/weixin/cakkback，我们创建组件/weixin/cakkback.vue回调返回页面

<template>
  <!-- header -->
  <div>
  </div>
  <!-- footer -->
</template>
<script>
export default {
  layout: "empty",
  data() {
    return {
    }
  },
  mounted() {
    let token = this.$route.query.token
    let name = this.$route.query.name
    let openid = this.$route.query.openid
    // 调用父vue方法
    window.parent['loginCallback'](name, token, openid)
  }
}
</script>

③父组件myheader.vue添加方法定义回调方法

mounted() {
    // 注册全局登录事件对象
    window.loginEvent = new Vue();
    // 监听登录事件
    loginEvent.$on('loginDialogEvent', function () {
      document.getElementById("loginDialog").click();
    })
    // 触发事件，显示登录层：loginEvent.$emit('loginDialogEvent')
    //初始化微信js
    const script = document.createElement('script')
    script.type = 'text/javascript'
    script.src = 'https://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js'
    document.body.appendChild(script)

    // 微信登录回调处理
    let self = this;
    window["loginCallback"] = (name,token, openid) => {
      self.loginCallback(name, token, openid);
    }
  },
    
loginCallback(name, token, openid) {
      // 打开手机登录层，绑定手机号，改逻辑与手机登录一致
      if(openid != '') {
        this.userInfo.openid = openid
        this.showLogin()
      } else {
        this.setCookies(name, token)
      }
    },

5、服务器绑定手机号码

页面绑定手机号码会把openid传递过来，我们根据openid找到用户信息，然后绑定手机号码，修改UserInfoServiceImpl类登录方法即可

@Override
public Map<String, Object> login(LoginVo loginVo) {
    String phone = loginVo.getPhone();
    String code = loginVo.getCode();

//校验参数
if(StringUtils.isEmpty(phone) ||
            StringUtils.isEmpty(code)) {
throw new YyghException(ResultCodeEnum.PARAM_ERROR);
    }

//校验校验验证码
String mobleCode = redisTemplate.opsForValue().get(phone);
if(!code.equals(mobleCode)) {
throw new YyghException(ResultCodeEnum.CODE_ERROR);
    }

//绑定手机号码
UserInfo userInfo = null;
if(!StringUtils.isEmpty(loginVo.getOpenid())) {
        userInfo = this.getByOpenid(loginVo.getOpenid());
if(null != userInfo) {
            userInfo.setPhone(loginVo.getPhone());
this.updateById(userInfo);
        } else {
throw new YyghException(ResultCodeEnum.DATA_ERROR);
        }
    }

//userInfo=null 说明手机直接登录
if(null == userInfo) {
        QueryWrapper<UserInfo> queryWrapper = new QueryWrapper<>();
        queryWrapper.eq("phone", phone);
        userInfo = userInfoMapper.selectOne(queryWrapper);
if(null == userInfo) {
            userInfo = new UserInfo();
            userInfo.setName("");
            userInfo.setPhone(phone);
            userInfo.setStatus(1);
this.save(userInfo);
        }
 }

//校验是否被禁用
if(userInfo.getStatus() == 0) {
throw new YyghException(ResultCodeEnum.LOGIN_DISABLED_ERROR);
    }

//记录登录
UserLoginRecord userLoginRecord = new UserLoginRecord();
    userLoginRecord.setUserId(userInfo.getId());
    userLoginRecord.setIp(loginVo.getIp());
userLoginRecordMapper.insert(userLoginRecord);

//返回页面显示名称
Map<String, Object> map = new HashMap<>();
    String name = userInfo.getName();
if(StringUtils.isEmpty(name)) {
        name = userInfo.getNickName();
    }
if(StringUtils.isEmpty(name)) {
        name = userInfo.getPhone();
    }
    map.put("name", name);
    String token = JwtHelper.createToken(userInfo.getId(), name);
    map.put("token", token);
return map;
}

原文链接：https://blog.csdn.net/dyf1996/article/details/115475585