微信小程序开发教学系列（7）- 用户授权与登录

在微信小程序中，用户授权和登录是实现个性化功能和数据交互的重要环节。本章将介绍如何处理用户授权和登录流程，并展示一些实用的技巧。

7.1 用户授权流程

在小程序中，用户需要授权才能获取其个人信息。在过去，我们使用getUserInfo接口来获取用户信息。然而，微信已经调整了授权流程，不再支持直接获取用户信息。现在，我们需要引导用户主动填写头像和昵称。

那么，如何引导用户进行授权呢？我们可以在小程序的某个页面或功能中，添加一个"授权按钮"，当用户点击该按钮时，跳转到一个"授权页面"，在该页面中展示头像和昵称的填写表单。用户在填写完毕后，点击"确认"按钮，跳转回原页面，并将填写的头像和昵称数据传递给原页面进行处理。

下面是一个简单的用户授权流程示例：

7.1.1 创建授权按钮

在需要引导用户授权的页面中，添加一个按钮。

<button bindtap="navigateToAuthPage">点击授权</button>

7.1.2 跳转到授权页面

在小程序的路由文件中，定义跳转到授权页面的路径。

{
  "pages": [
    "pages/index/index", // 首页
    "pages/auth/auth" // 授权页面
  ]
}

在点击授权按钮的事件处理函数中，调用小程序的导航API跳转到授权页面。

Page({
  navigateToAuthPage() {
    wx.navigateTo({
      url: '/pages/auth/auth',
    })
  },
})

7.1.3 授权页面展示和数据提交

在授权页面的wxml模板中，展示头像和昵称的选择和输入框。

<view class="container">
  <image class="avatar-preview" src="{{avatar}}" mode="aspectFill"></image>
    <button class="avatar-btn" bindtap="handleChooseAvatar">选择微信头像</button>
    <button class="avatar-btn" bindtap="handleUploadAvatar">上传自定义头像</button>
    <button class="nickname-btn" bindtap="handleChooseNickname">选择微信昵称</button>
    <input class="nickname-input" placeholder="请输入昵称" bindinput="handleNicknameInput" value="{{nickname}}"></input>
  <button class="confirm-btn" bindtap="handleSubmit">确认</button>
</view>

在授权页面的js文件中，定义数据处理函数和数据提交函数。

Page({
  data: {
    avatar: '', // 存储选择的头像路径
    nickname: '', // 存储填写的昵称
  },

  handleChooseAvatar() {
    // 调用微信的头像选择接口，让用户选择微信头像
    wx.getUserProfile({
      desc: '用于展示头像',
      success: (res) => {
        this.setData({
          avatar: res.userInfo.avatarUrl
        })
      }
    })
  },

  handleUploadAvatar() {
    // 调用微信的上传图片接口，让用户上传自定义头像
    wx.chooseMedia({
      count: 1,
      mediaType: ['image'],
      sourceType: ['album', 'camera'],
      camera: 'back',
      success: (res) => {
        this.setData({
          avatar: res.tempFiles[0].tempFilePath
        })
      }
    })
  },

  handleChooseNickname() {
    wx.getUserProfile({
      desc: '用于展示昵称',
      success: (res) => {
        this.setData({
          nickname: res.userInfo.nickName
        })
      }
    })
  },
  handleNicknameInput(event) {
    const nickname = event.detail.value;
    console.log(nickname);
    this.setData({
      nickname: nickname
    })
  },
  handleSubmit() {
    // 获取填写的昵称
    const nickname = this.data.nickname;
    // 判断是否选择了头像
    if (!this.data.avatar) {
      wx.showToast({
        title: '请选择头像',
        icon: 'none'
      });
      return;
    }
    // 判断昵称是否为空
    if (!nickname) {
      wx.showToast({
        title: '请输入昵称',
        icon: 'none'
      });
      return;
    }
    // 在这里可以进行数据提交或其他逻辑处理
    // ...
    // 提示提交成功
    wx.showToast({
      title: '提交成功',
      icon: 'success',
      duration: 2000,
      complete: () => {
        // 返回上一页
        console.log("提交成功！")
        wx.navigateBack();
      }
    });
  }
})```

`wxss`代码如下：

```css
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

.avatar-btn,.nickname-btn {
  display: inline-block;
  padding: 10rpx 20rpx;
  margin-right: 20rpx;
  background-color: #007AFF;
  color: #fff;
  border-radius: 10rpx;
  margin: 20rpx;
}

.avatar-preview {
  width: 200rpx;
  height: 200rpx;
  margin-top: 20rpx;
}

.nickname-input {
  width: 400rpx;
  height: 60rpx;
  border: 1rpx solid #ccc;
  border-radius: 10rpx;
  padding: 1rpx;
}

.confirm-btn {
  display: inline-block;
  padding: 10rpx 20rpx;
  background-color: #0c9100;
  color: #fff;
  border-radius: 10rpx;
  margin-top: 20rpx;
}

通过以上授权流程，用户可以选择微信头像或上传自定义头像，以及选择微信昵称或填写自定义昵称。填写的头像和昵称数据将传递给原页面进行处理。

注意：在实际开发中，需要根据实际需求进行接口调用和数据处理的逻辑编写。以上代码仅为示例，还需要根据实际情况进行相应调整。

7.2 用户登录流程

用户登录是小程序中实现个性化功能和数据交互的必要环节。以下是用户登录的基本流程：

1. 用户进入小程序，点击登录按钮。

2. 小程序调用wx.login接口获取临时登录凭证code。

wx.login({
  success: (res) => {
    const code = res.code
    // 将code发送给后端服务器进行登录验证
  },
  fail: (err) => {
    console.error(err)
  }
})

3. 小程序将获取到的临时登录凭证code发送给后端服务器进行登录验证。

4. 后端服务器接收到临时登录凭证code后，根据微信开放平台的接口文档，通过code调用微信提供的登录接口，获取到openid和session_key。

5. 后端服务器根据openid生成用户唯一标识并返回给小程序。

6. 小程序将用户唯一标识保存在本地，作为用户登录状态的标识。

7. 用户登录成功后，可以进行个性化功能和数据交互。

7.3 注意事项和常见问题

在实现用户授权和登录过程中，有一些注意事项和常见问题需要注意：

7.3.1 用户授权提示

在引导用户进行授权时，可以通过添加一些友好的提示信息，让用户理解为什么需要授权以及授权后的好处。

7.3.2 用户信息安全保护

在获取用户信息时，需要注意保护用户隐私，避免滥用用户信息。只获取必要的信息，并明确告知用户数据的使用目的。

7.3.3 登录态维持与过期处理

用户登录态一般有一定的过期时间，需要在过期前刷新登录状态，避免用户频繁登录操作。可以使用后端服务器生成的用户唯一标识，配合本地存储，实现登录态的维持。

7.3.4 异常处理和错误提示

在用户授权和登录过程中，可能会遇到各种异常情况和错误，如网络连接失败、授权被拒绝等。需要对这些异常情况进行处理，并给用户提供友好的错误提示。

7.3.5 测试与验证

在开发过程中，需要进行充分的测试和验证，确保用户授权和登录功能的稳定性和可靠性。

以上是用户授权和登录的基本流程、注意事项和常见问题。根据实际需求，可以结合具体的业务场景进行适当的调整和拓展。关的法律法规和权限要求，以确保用户的数据安全和合法使用。

总结：

本章介绍了用户授权和登录的流程。由于微信调整了授权流程，我们需要引导用户填写头像和昵称，而不再支持直接获取用户信息。

在用户授权流程中，我们可以在需要授权的页面添加授权按钮，点击按钮后跳转到授权页面，用户填写头像和昵称后返回原页面，并将数据传递给原页面进行处理。

用户登录流程中，我们通过调用wx.login接口获取用户的登录凭证，将凭证发送给后端服务器进行登录验证，获取用户的OpenID和SessionKey。然后将OpenID和SessionKey存储在服务器端或生成一个登录凭证（token）。后续的数据交互和个性化功能中，可以使用该凭证进行身份验证。

需要注意的是，在处理用户登录和身份验证时，要遵守相关的法律法规和权限要求，保障用户的隐私和数据安全。