小程序开发：如何实现用户登录功能

在小程序中实现用户登录功能，通常需要以下几个步骤：

1. 获取用户信息：

   • 使用微信提供的API wx.login() 获取用户的临时登录凭证 code。
   • 使用 wx.getUserInfo() 或 button 组件的 open-type="getUserInfo" 属性来获取用户的详细信息。

2. 发送登录请求：

   • 将获取到的 code 发送到后端服务器。
   • 后端服务器使用微信提供的 auth.code2Session 接口，将 code 转换为用户的 openid 和 session_key。

3. 生成自定义登录态：

   • 后端服务器可以使用 openid 和 session_key 生成自定义的登录态（如 JWT token），并将其返回给小程序前端。
   • 小程序前端将这个自定义登录态存储在本地（如 wx.setStorageSync('token', token)）。

4. 后续请求携带登录态：

   • 小程序前端在后续的请求中携带这个自定义登录态（如 Authorization: Bearer <token>），以便后端服务器验证用户身份。

以下是一个简单的示例代码：

小程序前端代码

// 获取用户登录凭证
Page({
  data: {
    userInfo: null,
    token: null
  },
  onLoad: function () {
    this.login();
  },
  login: function () {
    wx.login({
      success: res => {
        if (res.code) {
          // 发送 res.code 到后台换取 openId, sessionKey, unionId
          wx.request({
            url: 'https://your-backend-server.com/login',
            method: 'POST',
            data: {
              code: res.code
            },
            success: res => {
              if (res.data.token) {
                // 存储 token
                wx.setStorageSync('token', res.data.token);
                this.setData({ token: res.data.token });
              } else {
                console.error('登录失败', res.data);
              }
            },
            fail: err => {
              console.error('请求失败', err);
            }
          });
        } else {
          console.error('登录失败！' + res.errMsg);
        }
      }
    });

    // 获取用户信息
    wx.getUserInfo({
      success: res => {
        this.setData({
          userInfo: res.userInfo
        });
      }
    });
  }
});

后端服务器代码（Node.js 示例）

const express = require('express');
const axios = require('axios');
const app = express();

app.use(express.json());

app.post('/login', async (req, res) => {
  const { code } = req.body;
  const appId = 'your-app-id';
  const appSecret = 'your-app-secret';

  try {
    const response = await axios.get('https://api.weixin.qq.com/sns/jscode2session', {
      params: {
        appid: appId,
        secret: appSecret,
        js_code: code,
        grant_type: 'authorization_code'
      }
    });

    const { openid, session_key } = response.data;
    const token = generateToken(openid, session_key); // 生成自定义 token

    res.json({ token });
  } catch (error) {
    console.error('登录失败', error);
    res.status(500).json({ error: '登录失败' });
  }
});

function generateToken(openid, session_key) {
  // 这里可以使用 JWT 或其他方式生成 token
  const payload = { openid, session_key };
  const secretKey = 'your-secret-key';
  return jwt.sign(payload, secretKey, { expiresIn: '1h' });
}

app.listen(3000, () => {
  console.log('Server is running on port 3000');
});

注意事项

1. 安全性：确保后端服务器的安全性，不要在前端暴露敏感信息。
2. token 刷新：考虑实现 token 的刷新机制，以保证用户会话的持续性。
3. 错误处理：对各种可能的错误情况进行处理，并给用户友好的提示。

通过以上步骤，你可以在小程序中实现用户登录功能。