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

🚀前言

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

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

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

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

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

🔎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：获取到的小程序账号信息对象，包含以下属性：

🦋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 对象包括以下内容：

☀️1.5.3 UserInfo 对象中的属性

UserInfo 对象包含的属性如下：

🦋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 权限类型及其对应的功能接口：

🦋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() 查询权限状态，决定是否需要再次请求授权。