uniApp h5 公众号授权获取用户信息

1,231 阅读1分钟

最近有个需求是需要开发一个公众号网页,需要用户授权,后期可能要小程序并行,当然选择uniApp了。

逻辑是这样的,用户从公众号进入页面唤起授权,用户同意,获取到code,用code换取access_token,然后用access_token拉去用户信息,详细步骤见:developers.weixin.qq.com/doc/offiacc…

在uniApp只需要在应用初始化的时候,判断下当前用户是否授权,没有就跳转授权页,有的话继续执行下一步,我是在授权后存储了下用户的userid,方便判断,你也可以加其他更加严谨的判断方法,具体代码如下:

onLaunch: async function(e) {

  console.log('App Launch')
  const userId = Storage.get('userId');
  const code = Storage.get('WXCODE');
  const urlcode = getRequestParams()

  function getRequestParams() { // 截取url,判断存不存在code
      let url = location.href;
      let requestParams = {};
      if (url.indexOf('?') !== -1) {
        let str = url.substr(url.indexOf('?') + 1); // 截取?后面的内容作为字符串
        let strs = str.split('&'); // 将字符串内容以&分隔为一个数组
        for (let i = 0; i < strs.length; i++) {
          requestParams[strs[i].split('=')[0]] = decodeURI(strs[i].split('=')[1]);
          // 将数组元素中'='左边的内容作为对象的属性名,'='右边的内容作为对象对应属性的属性值
        }
      }
      console.log(requestParams, '处理后的对象');
      return requestParams;
    }
  if (!code && !urlcode.code &&!userId) {
    // 不存在存储的code 不存在地址参数code 不存在userId
    // 跳转授权页面,唤起授权
    // uni.$u.route('/pages/splash/splash')
       const appid = ''
       const redirect_uri = "" // 授权后重定向的回调链接地址,需要在公众号里面配置,不能带端口号,不能是ip地址
       const scope = "snsapi_userinfo"; // 非静默授权:snsapi_userinfo  静默授权:snsapi_base
  
       document.location.replace(
         `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appid}&redirect_uri=${redirect_uri}&response_type=code&scope=${scope}&state=STATE#wechat_redirect`
        );

  } else if (urlcode.code && !userId) {
    // 存在地址参数code 不存在userId
    // 使用这个code 重新拉去用户信息,即请求后端接口
    // 尤其注意:    
    // 由于公众号的 secret 和获取到的access_token安全级别都非常高,
    // 必须只保存在服务器,不允许传给客户端。后续刷新access_token、
    // 通过access_token获取用户信息等步骤,也必须从服务器发起。
  }

},