【微信小程序-原生开发】实用教程11 - 用户登录鉴权(含云函数的创建、删除、使用,通过云函数获取用户的openid)

简介: 【微信小程序-原生开发】实用教程11 - 用户登录鉴权(含云函数的创建、删除、使用,通过云函数获取用户的openid)

此篇可在实用教程10(见下方链接)的基础上继续开发,也可以在任何微信小程序中直接使用。

https://blog.csdn.net/weixin_41192489/article/details/128835069

用户登录鉴权逻辑

核心技术:通过云函数获取用户的openid

要想使用云函数,需先开通并初始化云环境,可参考下方链接进行配置

https://blog.csdn.net/weixin_41192489/article/details/128797403

创建云函数 get_openid

在 cloudfunctions 文件夹上点击鼠标右键的快捷菜单中选择新建 Node.js 云函数

命名为 get_openid,便会自动生成默认的云函数。

cloudfunctions\get_openid\config.json

{
  "permissions": {
    "openapi": [
    ]
  }
}

cloudfunctions\get_openid\index.js

// 云函数入口文件
const cloud = require('wx-server-sdk')
cloud.init({
  env: cloud.DYNAMIC_CURRENT_ENV
}) // 使用当前云环境
// 云函数入口函数
exports.main = async (event, context) => {
  const wxContext = cloud.getWXContext()
  return {
    event,
    openid: wxContext.OPENID,
    appid: wxContext.APPID,
    unionid: wxContext.UNIONID,
  }
}

cloudfunctions\get_openid\package.json

{
  "name": "get_openid",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "wx-server-sdk": "~2.6.3"
  }
}

上传部署云函数

在目标云函数上右键快捷菜单选择上传并部署

云函数前的文件夹变成绿色,即表示部署成功。

删除云函数

仅在本地无法删除云函数,需先去微信云函数控制台删除该云函数才行!

云端删除后,回到本地同步云函数列表

此时该云函数的文件夹从绿色变成灰色,右键快捷菜单删除即可。

使用云函数

  getOpenID() {
    return new Promise((resolve) => {
      wx.cloud.callFunction({
        name: 'get_openid' // 云函数的名称
      }).then(res => {
        // 从云函数返回的结果中提取出目标数据
        resolve(res.result.openid);
      })
    })
  },

小程序启动时,开始用户登录鉴权

app.js 的 onLaunch 中

  // 生命周期--小程序启动时执行
  async onLaunch() {
        const openid = await this.getOpenID();
        this.login(openid)
  }

用户登录鉴权的实现

app.js

  login(openid) {
    let that = this
    wx.cloud.database().collection('user').where({
      _openid: openid
    }).get().then(res => {
      // 查询openid是否已注册(是否在 user 表中)
      let data = res.data
      if (data.length > 0) {
        let userInfo = data[0]

        // 判断openid是否审核通过(有No)
        if (userInfo.No) {
          // 审核通过,保持进入页,将用户信息写入缓存
          wx.setStorageSync('userInfo', userInfo)
        } else {
          // 已注册但待审核,跳转到注册页查看审核状态
          that.gotoRegister("已注册")
        }
      } else {
        // 未注册,跳转到注册页注册
        that.gotoRegister("注册")
      }
    })
  },
  gotoRegister(type) {
    wx.reLaunch({
      url: '/pages/register/index?type=' + type
    })
  },

目录
相关文章
|
10月前
|
移动开发 小程序 前端开发
小程序开发平台有哪些?哪个好
小程序的开发方式丰富多元,开发团队可根据自身的技术背景、项目具体需求以及资源状况,灵活挑选最为适宜的开发路径。以下将详细介绍几种主流的小程序开发方式。
779 1
|
10月前
|
人工智能 小程序 前端开发
一个小程序轻量AR体感游戏,开发实现解决方案
针对青少年运动兴趣不足问题,AR体感游戏凭借沉浸式互动体验脱颖而出。结合小程序“AI运动识别”插件与WebGL渲染技术,可实现无需外设的轻量化AR健身游戏,如跳糕、切水果等,兼具趣味性与锻炼效果,适用于儿童健身及职工团建,即开即玩,低门槛高参与。
|
10月前
|
运维 小程序 数据可视化
小程序开发平台有哪些?SaaS小程序制作平台哪个好
小程序开发模式详解:自主开发、SaaS小程序制作平台与外包全对比 选择合适的小程序开发模式,是项目成功的基石。这三种模式在成本、周期、控制力和灵活性上各有千秋,适用于不同阶段和不同类型的企业。下面我们将逐一深入剖析。
865 8
|
移动开发 小程序
thinkphp+uniapp开发的多端商城系统源码/H5/小程序/APP支持DIY模板直播分销
thinkphp+uniapp开发的多端商城系统源码/H5/小程序/APP支持DIY模板直播分销
921 0
|
小程序 前端开发 JavaScript
在线课堂+工具组件小程序uniapp移动端源码
在线课堂+工具组件小程序uniapp移动端源码
482 0
在线课堂+工具组件小程序uniapp移动端源码
|
移动开发 小程序 数据可视化
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略(微信小程序、H5、APP全覆盖)
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略(微信小程序、H5、APP全覆盖)
5252 3
|
小程序 API
微信小程序更新提醒uniapp
在小程序开发中,版本更新至关重要。本方案利用 `uni-app` 的 `uni.getUpdateManager()` API 在启动时检测版本更新,提示用户并提供立即更新选项,自动下载更新内容,并在更新完成后重启小程序以应用新版本。适用于微信小程序,确保用户始终使用最新版本。以下是实现步骤: ### 实现步骤 1. **创建更新方法**:在 `App.vue` 中创建 `updateApp` 方法用于检查小程序是否有新版本。 2. **测试**:添加编译模式并选择成功状态进行模拟测试。
969 0
微信小程序更新提醒uniapp
|
小程序 前端开发 Java
SpringBoot+uniapp+uview打造H5+小程序+APP入门学习的聊天小项目
JavaDog Chat v1.0.0 是一款基于 SpringBoot、MybatisPlus 和 uniapp 的简易聊天软件,兼容 H5、小程序和 APP,提供丰富的注释和简洁代码,适合初学者。主要功能包括登录注册、消息发送、好友管理及群组交流。
529 1
SpringBoot+uniapp+uview打造H5+小程序+APP入门学习的聊天小项目

热门文章

最新文章