【愚公系列】《微信小程序与云开发从入门到实践》045-用户登录与功能授权

举报
愚公搬代码 发表于 2024/12/29 11:50:35 2024/12/29
【摘要】 标题详情作者简介愚公搬代码头衔华为云特约编辑,华为云云享专家,华为开发者专家,华为产品云测专家,CSDN博客专家,CSDN商业化专家,阿里云专家博主,阿里云签约作者,腾讯云优秀博主,腾讯云内容共创官,掘金优秀博主,亚马逊技领云博主,51CTO博客专家等。近期荣誉2022年度博客之星TOP2,2023年度博客之星TOP2,2022年华为云十佳博主,2023年华为云十佳博主等。博客内容.NET、...
标题 详情
作者简介 愚公搬代码
头衔 华为云特约编辑,华为云云享专家,华为开发者专家,华为产品云测专家,CSDN博客专家,CSDN商业化专家,阿里云专家博主,阿里云签约作者,腾讯云优秀博主,腾讯云内容共创官,掘金优秀博主,亚马逊技领云博主,51CTO博客专家等。
近期荣誉 2022年度博客之星TOP2,2023年度博客之星TOP2,2022年华为云十佳博主,2023年华为云十佳博主等。
博客内容 .NET、Java、Python、Go、Node、前端、IOS、Android、鸿蒙、Linux、物联网、网络安全、大数据、人工智能、U3D游戏、小程序等相关领域知识。
欢迎 👍点赞、✍评论、⭐收藏

🚀前言

在当今数字化时代,用户体验已成为产品成功的关键因素之一。尤其是在微信小程序的生态环境中,如何有效地解决用户登录与功能授权的问题,不仅关系到用户的使用便捷性,也直接影响到小程序的安全性和功能实现。

用户登录与功能授权是小程序与用户建立互动关系的桥梁,通过合理的设计和实现,开发者能够更好地掌握用户数据、提供个性化服务,并提升用户的忠诚度。本文将深入探讨微信小程序中的用户登录机制与功能授权相关接口,帮助开发者理解如何有效地管理用户身份验证和权限控制。

我们将涵盖用户登录的不同方式、授权流程的实现,以及如何在保证用户隐私和数据安全的前提下,提升用户体验。在实际应用案例中,您将看到如何通过优化登录与授权流程,激发用户的参与热情,增强小程序的互动性与吸引力。

🚀一、用户登录与功能授权

几乎所有互联网产品都会有用户的概念,用户的多少也是衡量一款产品价值的核心要素。微信小程序产品的一大优势即在于可以依托于微信的庞大用户体系,几乎不需实现自己的用户体系逻辑,只使用开发框架提供的登录和授权接口即可。

🔎1.微信用户登录

🦋1.1 登录的核心作用

登录的核心作用是将小程序用户与唯一标识(如微信用户ID)进行关联,以便后续可以将用户数据存储在后端服务中。小程序通过获取登录凭证来实现这个过程。

🦋1.2 获取登录凭证

通过 wx.login() 方法,小程序可以获取登录凭证(code),并将该凭证发送到服务端,服务端使用该凭证来换取用户的登录信息。

代码示例:

wx.login({
  timeout: 3000,  // 设置登录超时,单位为毫秒
  success: (res) => {
    console.log("login:", res.code);  // 成功后,输出登录凭证
  },
  fail: (error) => {
    console.log("登录失败:", error);
  },
  complete: () => {
    console.log("登录请求完成");
  }
});
  • timeout:设置接口调用的超时时间。
  • res.code:成功获取到的登录凭证(有效期为5分钟)。

此凭证需上传到服务器,服务器通过微信的接口来获取用户的登录信息。需要注意的是,登录凭证有有效期(5分钟),服务器需要在此期间换取用户信息。

🦋1.3 检查登录态

登录态是指小程序在登录后记录的用户会话状态。长时间不使用小程序可能导致登录态失效,可以通过 wx.checkSession() 方法来检查用户的登录状态是否有效。

代码示例:

wx.checkSession({
  success: () => {
    console.log("登录态有效");
  },
  fail: () => {
    console.log("登录态无效");
  },
  complete: () => {
    console.log("检查登录态完成");
  }
});
  • success:如果登录态有效,执行此回调。
  • fail:如果登录态无效(即用户未登录或登录过期),执行此回调。

🦋1.4 获取小程序账号信息

除了登录凭证和用户信息,小程序也可以直接通过微信的API获取当前小程序的账号信息,而不依赖于服务端。

代码示例:

let info = wx.getAccountInfoSync();
console.log(info);
  • info:获取到的小程序账号信息对象,包含以下属性:
属性名 类型 意义
appId 字符串 小程序的应用ID
envVersion 字符串 小程序环境版本(developtrialrelease
version 字符串 小程序的版本号

🦋1.5 获取微信用户信息(需要授权)

获取用户的微信信息(如昵称、头像等)是需要用户授权的。使用 wx.getUserProfile() 方法来获取用户敏感信息,用户必须主动触发该方法(例如点击按钮),并会弹出权限申请弹窗。

代码示例:

wx.getUserProfile({
  desc: '需要授权来获取用户信息',
  success: (res) => {
    console.log(res);  // 输出用户信息
  },
  fail: (error) => {
    console.log(error);  // 错误信息
  },
  complete: () => {
    console.log("获取用户信息完成");
  }
});
  • desc:说明获取用户信息的用途,微信要求必须描述清楚。
  • 该方法只能在用户主动触发的事件(如点击按钮)中调用。

☀️1.5.1 回调中的用户信息

如果用户授权成功,success 回调会包含用户的敏感数据。回调中的 res 对象包括以下内容:

属性名 类型 意义
rawData 字符串 不包含敏感信息的原始数据
signature 字符串 用于校验用户信息的签名数据
encryptedData 字符串 包含敏感信息的加密数据
iv 字符串 加密算法的初始向量
cloudID 字符串 敏感数据对应的云 ID(仅在使用云开发时可用)

☀️1.5.3 UserInfo 对象中的属性

UserInfo 对象包含的属性如下:

属性名 类型 意义
nickName 字符串 用户的昵称
avatarUrl 字符串 用户头像的URL地址
gender 数值 用户性别:0 为未知,1 为男性,2 为女性

🦋1.6 总结

  • 登录凭证(code:通过 wx.login() 获取,上传到服务端换取用户的登录信息。
  • 登录态检查:通过 wx.checkSession() 检查登录态是否有效。
  • 小程序账号信息:通过 wx.getAccountInfoSync() 获取小程序的基本信息。
  • 用户信息:通过 wx.getUserProfile() 获取用户的敏感信息(如昵称、头像等),此操作需要用户授权。

这些操作都涉及到用户信息的保护和隐私问题,因此在获取用户信息时,务必遵守微信的隐私政策和用户授权流程。

🔎2.功能授权相关接口

🦋2.1 授权功能的概述

在微信小程序中,除了获取用户信息外,还有许多其他功能需要用户授权才能使用。例如:

  • 地理位置信息
  • 微存储的通信地址信息
  • 发票抬头信息
  • 设备麦克风、摄像头的使用权限等

这些功能都需要用户明确同意授权后,才能正常调用。

🦋2.2 wx.authorize() 方法

wx.authorize() 方法可以提前向用户申请某项功能的授权。调用该方法后,会弹出一个授权弹窗,但不会直接获取用户的数据。如果用户同意授权,后续就可以调用相应的功能接口。如果用户已经授权过了,则不会再弹出授权弹窗,直接使用接口即可。

代码示例:

wx.authorize({
  scope: 'scope.werun',  // 指定授权类型,这里以微信运动为例
  success: () => {
    wx.getWeRunData({
      success: (result) => {
        console.log(result);  // 获取微信运动数据
      }
    });
  },
  fail: (error) => {
    console.log(error);  // 如果授权失败,输出错误信息
  },
  complete: () => {
    console.log("授权请求完成");
  }
});

在此示例中,scope.werun 代表微信运动数据的授权。wx.authorize() 只是申请权限,而 wx.getWeRunData() 才是实际获取微信运动数据的接口。

🦋2.3 scope 参数及其功能

wx.authorize() 方法的 scope 参数用来指定请求授权的功能。以下是常见的 scope 权限类型及其对应的功能接口:

scope 权限 对应的功能接口
scope.userLocation 获取地理位置信息(wx.getLocation
scope.userLocationBackground 后台定位(wx.startLocationUpdate
scope.record 使用麦克风(wx.startRecord
scope.camera 使用摄像头(wx.createVKSession
scope.bluetooth 使用蓝牙(wx.openBluetoothAdapter
scope.writePhotosAlbum 写入相册(wx.saveImageToPhotosAlbum
scope.addPhoneContact 写入联系人(wx.addPhoneContact
scope.addPhoneCalendar 写入日历(wx.addPhoneCalendar
scope.werun 获取微信运动数据(wx.getWeRunData

🦋2.4 授权状态管理

  • 用户授权成功后,授权状态会被记录,直到用户主动删除小程序。如果用户明确同意或拒绝了某项权限请求,后续不需要再次申请授权。
  • 如果小程序需要访问某个功能,且该功能没有被授权,可以使用 wx.authorize() 提前申请权限。通常建议仅在需要使用某些功能时才进行权限申请,避免频繁弹出授权请求。

🦋2.5 授权的最佳实践

  • 按需授权:仅在实际需要使用某些功能时,向用户申请相应权限。例如,当用户尝试使用需要地理位置的功能时,再申请地理位置的授权,而不是一开始就请求所有权限。
  • 处理用户拒绝:对于拒绝授权的情况,应该提供合适的提示信息,向用户说明授权的重要性或提供相应的替代方案。
  • 授权状态管理:调用 wx.authorize() 后,如果用户同意授权,可以直接调用相关接口。如果用户已授权过,后续调用不会再弹出授权弹窗。

🦋2.6 总结

  • wx.authorize():用来提前申请某项功能的授权。调用后会弹出授权弹窗,用户同意后可以继续使用该功能。
  • scope 权限:指定请求授权的功能类型,包括地理位置、麦克风、摄像头、蓝牙、相册等。
  • 授权状态:用户同意或拒绝授权后,该状态会被记录,后续不再弹出授权弹窗,直接使用功能接口。
  • 按需申请授权:建议仅在实际需要某项功能时才向用户申请授权,避免过多的授权请求影响用户体验。

🔎3.用户授权设置

🦋3.1 打开小程序设置页面

在小程序中,用户可以通过点击右上角的功能按钮进入到设置页面,在该页面中,用户可以查看并管理已经处理过授权的权限。

主动打开设置页面:

通过 wx.openSetting() 方法,可以在小程序中主动打开设置页面,让用户管理授权的权限。

代码示例:

wx.openSetting({
  withSubscriptions: true,  // 是否同时获取订阅消息的订阅状态
  success: () => {
    console.log("设置页打开成功");
  },
  fail: () => {
    console.log("打开设置页失败");
  },
  complete: () => {
    console.log("打开设置页请求完成");
  }
});
  • withSubscriptions:一个布尔值,表示是否需要同时获取订阅消息的订阅状态。设置为 true 时,会获取订阅消息的授权状态。
  • success:设置页面成功打开后的回调。
  • fail:设置页面打开失败后的回调。
  • complete:设置页面打开完成后的回调。

🦋3.2 获取用户当前的权限设置情况

如果你希望在小程序中查询用户当前的授权状态,可以使用 wx.getSetting() 方法来获取。

代码示例:

wx.getSetting({
  success: (res) => {
    console.log("当前的权限设置情况:", res.authSetting);
  },
  fail: (error) => {
    console.log("获取权限设置失败:", error);
  },
  complete: () => {
    console.log("获取权限设置完成");
  }
});
  • authSetting:这是 success 回调中的返回对象,包含了用户授权的情况。它是一个对象,键名为权限类型(如 scope.userLocationscope.camera),键值为 truefalse,表示该权限是否被授权。

例如:

{
  "scope.userLocation": true,  // 表示用户已授权地理位置权限
  "scope.camera": false        // 表示用户未授权摄像头权限
}
  • success:获取权限设置成功后的回调,并返回 authSetting 对象,包含用户当前的权限设置。
  • fail:获取权限设置失败后的回调。
  • complete:获取权限设置完成后的回调。

🦋3.3 授权状态的管理

  • 使用 wx.getSetting() 可以动态获取用户当前的权限设置情况,开发者可以根据这个信息来判断是否需要重新请求某些权限。
  • 使用 wx.openSetting() 可以让用户主动修改其权限设置,尤其是在某些功能因权限不足而无法使用时,可以引导用户进入设置页面。

🦋3.4 总结

  • wx.openSetting():主动打开小程序设置页面,允许用户查看和修改权限设置。可以通过 withSubscriptions 参数控制是否获取订阅消息的订阅状态。
  • wx.getSetting():获取用户当前的权限设置,返回一个 authSetting 对象,其中包含各项权限的授权状态。
    • authSetting 中的键表示权限类型,值为 true 表示已授权,false 表示未授权。
  • 使用场景:当某项功能因权限不足无法使用时,可以通过 wx.openSetting() 引导用户修改权限;或者使用 wx.getSetting() 查询权限状态,决定是否需要再次请求授权。
【声明】本内容来自华为云开发者社区博主,不代表华为云及华为云开发者社区的观点和立场。转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息,否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。