乐趣区

关于微信小程序:快速注册认证小程序公众号开发版授权登录流程代码说明

jiezi

对于公众号开发，这曾经是很老的话题的，之前倒是也做过些许，不过写的都是后端的接口，对于前端操作的一些流程还不是很分明，比方很重要的一个入口性能，受权的流程。

说到受权登录，微信小程序也有受权登录，两者受权登录过程大同小异，都是先拿 code 换取 openid（用户对以后公众号或小程序的惟一标识）和 access_token。 留神，此处 access_token 与根底反对中的 access_token 不同，此处的 access_token 是依据每个用户的不同生成的，每个用户都不一样，而根底 access_token 是对接口调用的标识。 而后小程序的话前端能够间接拿到用户信息（微信头像、昵称、地区和性别信息），而公众号号就须要通过 openid 和 access_token 调用接口来获取用户根本信息。

公众号用户受权基于受权作用域（scope 参数）的不同，分为静默受权（scope 为 snsapi_base）和非静默受权（scope 为 snsapi_userinfo）。静默受权就是用户无感知的就受权了，但只能不弹出受权页面，间接跳转，只能获取用户 openid，非静默受权会弹出受权页面，可通过 openid 拿到头像、昵称、性别、所在地。并且，即便在未关注的状况下，只有用户受权，也能获取其信息。

公众号受权登录的成果大略都像上面这样，就是一进入首页就弹出让用户受权的弹窗（非静默受权）。

前端次要网页受权步骤如下 

// 受权获取 code
  toRedirect() {let redirect_uri = encodeURIComponent(this.$redirect_uri);
    let url = this.$auth_url.replace('REDIRECT_URI',redirect_uri);
    if (this.wechatCode == null || this.wechatCode === '') {window.location.href = url;} else {this.saveOpenID();
    }
  },
  
  // 截取 url 中的 code 办法
  getUrlCode() {
    var url = location.search
    var theRequest = new Object()
    if (url.indexOf("?") != -1) {var str = url.substr(1)
      var strs = str.split("&")
      for (var i = 0; i < strs.length; i++) {theRequest[strs[i].split("=")[0]] = (strs[i].split("=")[1])
      }
    }
    return theRequest
  },
  
  // 拿 code 换取 accessToken 和 openid 最初获取用户信息
  saveOpenID() {if(this.wechatCode) {this.getOpenId();
    }
  },
  getOpenId() {
    let url = this.$api_url + this.$access_token_uri + '/' + this.wechatCode;
    uni.request({
      async: false,
      url: url,
      method: 'GET',
      success: (res) => {console.log('getOpenId:',res);
        this.userOpenid = res.data.data.openid;
        this.accessToken = res.data.data.access_token;
        uni.setStorage({
          key: 'user_openid',
          data: this.userOpenid
        });
        this.login();}
    })
  },
  // 获取登录用户信息
  login() {
    let url = this.$api_url + this.$user_info_uri + '/' + this.accessToken + '/' + this.userOpenid;
    uni.request({
      async: false,
      url: url,
      method: 'GET',
      success: (res) => {console.log('login:',res);
        uni.setStorage({
          key: 'user_info',
          data: res.data.data
        })
      }
    })
  },
  
  onLoad() {if (!this.userOpenid) {
      this.wechatCode = '';
      this.wechatCode = this.getUrlCode().code;
      this.toRedirect();};
  },

上一篇：疾速注册认证小程序，免 300 元认证费

退出移动版