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

说到受权登录,微信小程序也有受权登录,两者受权登录过程大同小异,都是先拿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元认证费