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

悟空码字

对于公众号开发,这已经是很老的话题的,之前倒是也做过些许,不过写的都是后端的接口,对于前端操作的一些流程还不是很清楚,比如很重要的一个入口功能,授权的流程。

戳我👉 快速注册认证小程序,公众号开发版上线了,授权登录流程代码说明

说到授权登录,微信小程序也有授权登录,两者授权登录过程大同小异,都是先拿code换取openid(用户对当前公众号或小程序的唯一标识)和access_token。注意,此处access_token与基础支持中的access_token不同,此处的access_token是根据每个用户的不同生成的,每个用户都不一样,而基础access_token是对接口调用的标识。然后小程序的话前端可以直接拿到用户信息(微信头像、昵称、地区和性别信息) ,而公众号号就需要通过openid和access_token调用接口来获取用户基本信息。

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

公众号授权登录的效果大概都像下面这样,就是一进入首页就弹出让用户授权的弹窗(非静默授权)。

image.png

前端主要网页授权步骤如下

// 授权获取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元认证费

阅读 859
4 声望
2 粉丝
0 条评论
4 声望
2 粉丝
文章目录
宣传栏