H5微信公众号授权登录

目录

一、封装获取code的函数、存储token函数、获取token函数

二、点击请求微信公众号授权并跳转

三、重定向跳转会当前链接获取code登录

四、整体流程的描述：

---

一、封装获取code的函数、存储token函数、获取token函数

// getRequest() 函数用于获取url中查询参数
  getRequest() {
    // 获取当前url
    let url = window.location.search;
    // 创建theRequest对象
    let theRequest = new Object();
    // 如果当前url中包含‘?’
    if (url.indexOf("?") != -1) {
      // 获取url中‘?’之后的字符串
      let str = url.substr(1);
      // 将字符串按照‘&’分割
      let strs = str.split("&");
      // 遍历分割后的字符串数组
      for (let i = 0; i < strs.length; i++) {
        // 将每个字符串按照‘=’分割，以此获取参数名和参数值
        theRequest[strs[i].split("=")[0]] = unescape(strs[i].split("=")[1]);
      }
    }
    // 返回theRequest对象
    return theRequest;
  }

二、点击请求微信公众号授权并跳转

//请求微信公众号登录
  clickVote(data) {
    let that = this;
    //判断是否存在token 存在token做业务处理 如登录成功可投票等
    if (this.getToken() {
      that.clickPostVoat(data);
      return;
    } else {
      let code = this.getRequest().code; //是否存在code
      let oUrl = '重定向跳转的网址';
      if (!code) {
        let rUrl = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${constant.WEIXIN_PHONE_APPID}&redirect_uri=${oUrl}&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect`;
         window.location.href = rUrl
      }
    }
  }

三、重定向跳转会当前链接获取code登录

//react生命周期 componentDidMount  
mount() {
    this.chatCode =this.getRequest().code;
    //判断是否有code 请求登录并传code给后端处理
    if (this.chatCode && !this.getToken() {
      this.getLoginCode(this.chatCode);
    }
  }



  // 获取code 登录
  async getLoginCode(code) {
    const res = await request({
      method: "POST",
      url: api.publicAccountCheckCode,
      data: {
        wxCode: code,
      },
    });
    if (res.data) {
      const { access_token } = res.data;
     //存储token到浏览器
      this.saveToken(access_token);
      stores.Frame.success("登录成功");
    }
  }

四、整体流程的描述：

1. 用户点击网站上的微信授权登录按钮。
2. 前端代码生成一个随机字符串作为state参数，并将其存储在本地缓存中以供后续使用。
3. 前端代码构建完整的微信授权URL地址（包括appid、redirect_uri和scope等参数）并携带前面生成的state参数。同时，用户被重定向至该URL地址。
4. 微信服务器验证请求是否合法，并展示给用户一个授权页面。如果用户同意，则微信服务器会回调我们之前设置好的redirect_uri，并传递code和state两个参数值回来。（这里需要注意：如果不匹配则说明有人恶意篡改了你发起授权登陆过程）
5. 在前端代码中解析返回结果并提取出唯一的Code值。然后通过Ajax或fetch API发送HTTP POST 请求, 将 Code 参数添加到 body 中提交给服务端.
6. 服务端接收到Code值后, 向微信服务器发送HTTP GET 请求获取Access_Token 和 OpenId 等信息.
7. 服务端将从微信服务器获取到 Access_Token 和 OpenId 等信息保存在数据库或者缓存中.
8. 返回成功状态码及必要数据给客户端
9. 客户端根据响应结果进行相应操作，例如跳转页面、刷新界面等。