【愚公系列】《微信小程序与云开发从入门到实践》045-用户登录与功能授权
标题 | 详情 |
---|---|
作者简介 | 愚公搬代码 |
头衔 | 华为云特约编辑,华为云云享专家,华为开发者专家,华为产品云测专家,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 |
字符串 | 小程序环境版本(develop 、trial 、release ) |
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.userLocation
、scope.camera
),键值为true
或false
,表示该权限是否被授权。
例如:
{
"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()
查询权限状态,决定是否需要再次请求授权。
- 点赞
- 收藏
- 关注作者
评论(0)