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

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

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

说到授权登录,微信小程序也有授权登录,两者授权登录过程大同小异,都是先拿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();
        };
  },

山水有相逢,来日皆可期,谢谢阅读,我们再会

我手中的金箍棒,上能通天,下能探海

上一篇:代小程序实现业务开发,99%还原公众号后台对服务类目管理的功能

相关文章
|
16天前
|
人工智能 小程序
【一步步开发AI运动小程序】十五、AI运动识别中,如何判断人体站位的远近?
【云智AI运动识别小程序插件】提供人体、运动及姿态检测的AI能力,无需后台支持,具有快速、体验好、易集成等特点。本文介绍如何利用插件判断人体与摄像头的远近,确保人体图像在帧内的比例适中,以优化识别效果。通过`whole`检测规则,分别实现人体过近和过远的判断,并给出相应示例代码。
|
10天前
|
人工智能 小程序 API
【一步步开发AI运动小程序】十七、如何识别用户上传视频中的人体、运动、动作、姿态?
【云智AI运动识别小程序插件】提供人体、运动、姿态检测的AI能力,支持本地原生识别,无需后台服务,具有速度快、体验好、易集成等优点。本文介绍如何使用该插件实现用户上传视频的运动识别,包括视频解码抽帧和人体识别的实现方法。
|
15天前
|
人工智能 小程序 UED
【一步步开发AI运动小程序】十六、AI运动识别中,如何判断人体站位?
【云智AI运动识别小程序插件】提供人体、运动及姿态检测的AI能力,本地引擎无需后台支持,具备快速、体验好、易集成等优势。本文介绍如何利用插件的`camera-view`功能,通过检测人体站位视角(前、后、左、右),确保运动时的最佳识别率和用户体验。代码示例展示了如何实现视角检查,确保用户正或背对摄像头,为后续运动检测打下基础。
|
21天前
|
人工智能 小程序 API
【一步步开发AI运动小程序】十三、自定义一个运动分析器,实现计时计数02
本文介绍如何利用“云智AI运动识别小程序插件”开发AI运动小程序,详细解析了俯卧撑动作的检测规则构建与执行流程,涵盖卧撑和撑卧两个姿态的识别规则,以及如何通过继承`sports.SportBase`类实现运动分析器,适用于小程序开发者。
|
15天前
|
移动开发 小程序 PHP
校园圈子论坛系统采取的PHP语音和uni账号开发的小程序APP公众号H5是否只需要4800元?是的,就是只需要4800元
关于校园圈子论坛系统采用PHP语言和uni-app开发的小程序、APP、公众号和H5是否仅需4800元这个问题,实际上很难给出一个确定的答案。这个价格可能受到多种因素的影响
49 8
|
11天前
|
人工智能 小程序 数据处理
uni-app开发AI康复锻炼小程序,帮助肢体受伤患者康复!
近期,多家康复机构咨询AI运动识别插件是否适用于肢力运动受限患者的康复锻炼。本文介绍该插件在康复锻炼中的应用场景,包括康复运动指导、运动记录、恢复程度记录及过程监测。插件集成了人体检测、姿态识别等功能,支持微信小程序平台,使用便捷,安全可靠,帮助康复治疗更加高效精准。
|
17天前
|
人工智能 小程序 JavaScript
【一步步开发AI运动小程序】十四、主包超出2M大小限制,如何将插件分包发布?
本文介绍了如何从零开始开发一个AI运动小程序,重点讲解了通过分包技术解决程序包超过2M限制的问题。详细步骤包括在uni-app中创建分包、配置`manifest.json`和`pages.json`文件,并提供了分包前后代码大小对比,帮助开发者高效实现AI运动功能。
|
1月前
|
小程序 前端开发 JavaScript
在线课堂+工具组件小程序uniapp移动端源码
在线课堂+工具组件小程序uniapp移动端源码
38 0
在线课堂+工具组件小程序uniapp移动端源码
|
2月前
|
移动开发 小程序 数据可视化
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略(微信小程序、H5、APP全覆盖)
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略(微信小程序、H5、APP全覆盖)
369 3
|
2月前
|
小程序 API
微信小程序更新提醒uniapp
在小程序开发中,版本更新至关重要。本方案利用 `uni-app` 的 `uni.getUpdateManager()` API 在启动时检测版本更新,提示用户并提供立即更新选项,自动下载更新内容,并在更新完成后重启小程序以应用新版本。适用于微信小程序,确保用户始终使用最新版本。以下是实现步骤: ### 实现步骤 1. **创建更新方法**:在 `App.vue` 中创建 `updateApp` 方法用于检查小程序是否有新版本。 2. **测试**:添加编译模式并选择成功状态进行模拟测试。
60 0
微信小程序更新提醒uniapp

热门文章

最新文章