[猫头虎分享21天微信小程序基础入门教程] 第17天：小程序的用户授权与安全

请添加图片描述

第17天：小程序的用户授权与安全 🔒

自我介绍

大家好，我是猫头虎，一名全栈软件工程师。今天我们继续微信小程序的学习，重点了解如何实现用户授权和确保小程序的安全性。这些内容对于保护用户隐私和数据安全至关重要。🚀

用户授权

微信小程序提供了一些 API 来获取用户的授权信息，例如获取用户的基本信息、位置信息等。

一、获取用户基本信息

1. 在页面中添加授权按钮

wxml 文件：

<view class="container">
  <button open-type="getUserInfo" bindgetuserinfo="handleGetUserInfo">获取用户信息</button>
</view>

2. 处理授权回调

js 文件：

Page({
  data: {
    userInfo: null
  },
  handleGetUserInfo(e) {
    if (e.detail.userInfo) {
      this.setData({
        userInfo: e.detail.userInfo
      });
      wx.showToast({
        title: '授权成功',
        icon: 'success'
      });
    } else {
      wx.showToast({
        title: '授权失败',
        icon: 'none'
      });
    }
  }
});

二、获取用户位置信息

1. 在页面中添加授权按钮

wxml 文件：

<view class="container">
  <button open-type="getLocation" bindtap="handleGetLocation">获取位置信息</button>
  <text>{{location}}</text>
</view>

2. 处理授权回调

js 文件：

Page({
  data: {
    location: ''
  },
  handleGetLocation() {
    wx.getLocation({
      type: 'wgs84',
      success: (res) => {
        const latitude = res.latitude;
        const longitude = res.longitude;
        this.setData({
          location: `纬度: ${latitude}, 经度: ${longitude}`
        });
        wx.showToast({
          title: '获取成功',
          icon: 'success'
        });
      },
      fail: (err) => {
        wx.showToast({
          title: '获取失败',
          icon: 'none'
        });
        console.error('获取位置失败:', err);
      }
    });
  }
});

用户登录

微信小程序提供了 wx.login 接口，用于获取用户的登录凭证。

三、实现用户登录

1. 调用 `wx.login` 获取登录凭证

js 文件：

Page({
  data: {
    loggedIn: false
  },
  onLoad() {
    this.login();
  },
  login() {
    wx.login({
      success: (res) => {
        if (res.code) {
          // 将 res.code 发送到后台换取 openId, sessionKey, unionId
          wx.request({
            url: 'https://example.com/api/login',
            method: 'POST',
            data: {
              code: res.code
            },
            success: (response) => {
              console.log('登录成功:', response.data);
              this.setData({
                loggedIn: true
              });
              wx.showToast({
                title: '登录成功',
                icon: 'success'
              });
            },
            fail: (err) => {
              wx.showToast({
                title: '登录失败',
                icon: 'none'
              });
              console.error('登录失败:', err);
            }
          });
        } else {
          wx.showToast({
            title: '登录失败',
            icon: 'none'
          });
          console.error('登录失败:', res.errMsg);
        }
      }
    });
  }
});

数据安全

为了保护用户的数据安全，我们需要采取一些措施来防止数据泄露和篡改。

四、加密数据传输

在进行网络请求时，可以使用 HTTPS 协议来加密数据传输，确保数据在传输过程中的安全性。

1. 确保所有请求使用 HTTPS

所有的 wx.request 请求都应使用 HTTPS 协议：

wx.request({
  url: 'https://example.com/api/data',
  method: 'GET',
  success: (res) => {
    console.log('数据获取成功:', res.data);
  },
  fail: (err) => {
    console.error('请求失败:', err);
  }
});

五、数据加密与解密

在需要传输敏感数据时，可以使用加密算法对数据进行加密。

1. 使用 AES 加密

安装 crypto-js 库：

npm install crypto-js

2. 加密与解密示例

js 文件：

const CryptoJS = require('crypto-js');

function encryptData(data, key) {
  return CryptoJS.AES.encrypt(data, key).toString();
}

function decryptData(ciphertext, key) {
  let bytes = CryptoJS.AES.decrypt(ciphertext, key);
  return bytes.toString(CryptoJS.enc.Utf8);
}

const key = 'my-secret-key';
const data = 'sensitive data';

const encryptedData = encryptData(data, key);
console.log('加密数据:', encryptedData);

const decryptedData = decryptData(encryptedData, key);
console.log('解密数据:', decryptedData);

小测试 🧪

实现用户授权功能，包括获取用户基本信息和位置信息。
实现用户登录功能，并在服务器端验证用户登录凭证。
使用 AES 加密算法对敏感数据进行加密和解密。

今日学习总结 📚

概念	详细内容
用户授权	获取用户基本信息、位置信息
用户登录	使用 `wx.login` 获取登录凭证，验证用户身份
数据安全	使用 HTTPS 加密数据传输，使用 AES 加密敏感数据