微信小程序开发：实现授权登录，获取用户手机号及用户信息

class 微信小程序,微信授权登录,小程序

微信小程序开发：实现授权登录，获取用户手机号及用户信息

微信小程序（WeChat Mini Program）为开发者提供了丰富的功能接口，其中包括用户授权登录和获取用户信息。本文将详细介绍如何在微信小程序中实现授权登录，并获取用户手机号和用户信息。

1. 准备工作

在开始开发之前，请确保已经完成以下准备工作：

  1. 注册微信小程序账号，并在微信公众平台上创建一个小程序。
  2. 获取小程序的 AppID 和 AppSecret，这些信息在微信公众平台的「开发」-「基本配置」中可以找到。
  3. 在微信开发者工具中创建一个新的小程序项目，并使用上述 AppID 进行配置。

2. 实现授权登录

微信小程序提供了 wx.login 接口，用于获取用户的临时登录凭证（code）。然后，开发者可以将这个 code 发送到自己的服务器，并使用 AppID 和 AppSecret 向微信服务器请求用户的 openid 和会话密钥（session_key）。

2.1 前端代码

在小程序的 app.js 文件中，调用 wx.login 接口：

App({
  onLaunch: function () {
    // 登录
    wx.login({
      success: res => {
        if (res.code) {
          // 发送 res.code 到后台换取 openid, session_key, unionid
          wx.request({
            url: 'https://your-server.com/api/login', // 替换为你的服务器地址
            method: 'POST',
            data: {
              code: res.code
            },
            success: (response) => {
              console.log(response.data);
              // 存储用户信息
              wx.setStorageSync('userInfo', response.data.userInfo);
            }
          });
        } else {
          console.log('登录失败！' + res.errMsg);
        }
      }
    });
  }
});
2.2 后端代码

在服务器端，使用 code 向微信服务器请求 openid 和 session_key。以下是一个使用Node.js和Express实现的示例：

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

const appId = 'your-app-id'; // 替换为你的AppID
const appSecret = 'your-app-secret'; // 替换为你的AppSecret

app.use(express.json());

app.post('/api/login', async (req, res) => {
  const code = req.body.code;
  const url = `https://api.weixin.qq.com/sns/jscode2session?appid=${appId}&secret=${appSecret}&js_code=${code}&grant_type=authorization_code`;

  try {
    const response = await axios.get(url);
    const data = response.data;
    if (data.openid) {
      // 返回用户信息
      res.json({
        openid: data.openid,
        session_key: data.session_key,
        userInfo: {
          // 模拟用户信息
          nickName: 'WeChat User',
          avatarUrl: 'https://example.com/avatar.png'
        }
      });
    } else {
      res.status(400).json({ error: 'Failed to get openid' });
    }
  } catch (error) {
    res.status(500).json({ error: 'Server error' });
  }
});

app.listen(port, () => {
  console.log(`Server is running on http://localhost:${port}`);
});

3. 获取用户手机号

获取用户手机号需要用户授权。微信小程序提供了 getPhoneNumber 接口，用户授权后可以获取加密的手机号数据，开发者需要解密该数据。

3.1 前端代码

在小程序中添加一个按钮，触发获取手机号的操作：

<view>
  <button open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber">获取手机号</button>
</view>

在 pages/index/index.js 中实现 getPhoneNumber 函数：

Page({
  data: {},
  onLoad: function () {},
  getPhoneNumber: function (e) {
    if (e.detail.errMsg === "getPhoneNumber:ok") {
      // 用户同意授权
      wx.request({
        url: 'https://your-server.com/api/getPhoneNumber', // 替换为你的服务器地址
        method: 'POST',
        data: {
          iv: e.detail.iv,
          encryptedData: e.detail.encryptedData,
          sessionKey: wx.getStorageSync('userInfo').session_key
        },
        success: (response) => {
          console.log('用户手机号：', response.data.phoneNumber);
        }
      });
    } else {
      console.log('用户拒绝授权');
    }
  }
});
3.2 后端代码

在服务器端，使用微信提供的解密算法解密手机号数据。以下是一个使用Node.js实现的示例：

const crypto = require('crypto');

app.post('/api/getPhoneNumber', (req, res) => {
  const { iv, encryptedData, sessionKey } = req.body;

  try {
    // 解密算法
    let sessionKeyBuffer = Buffer.from(sessionKey, 'base64');
    let encryptedDataBuffer = Buffer.from(encryptedData, 'base64');
    let ivBuffer = Buffer.from(iv, 'base64');

    let decipher = crypto.createDecipheriv('aes-128-cbc', sessionKeyBuffer, ivBuffer);
    decipher.setAutoPadding(true);

    let decoded = decipher.update(encryptedDataBuffer, 'binary', 'utf8');
    decoded += decipher.final('utf8');
    let phoneNumberInfo = JSON.parse(decoded);

    res.json({ phoneNumber: phoneNumberInfo.phoneNumber });
  } catch (error) {
    res.status(500).json({ error: 'Failed to decrypt phone number' });
  }
});

4. 获取用户信息

微信小程序提供了 getUserProfile 接口，获取用户信息前需要用户确认。

4.1 前端代码

在小程序中添加一个按钮，触发获取用户信息的操作：

<view>
  <button open-type="getUserProfile" bindgetuserinfo="getUserProfile">获取用户信息</button>
</view>

在 pages/index/index.js 中实现 getUserProfile 函数：

Page({
  data: {},
  onLoad: function () {},
  getUserProfile: function () {
    wx.getUserProfile({
      desc: '展示用户信息',
      success: (res) => {
        console.log('用户信息：', res.userInfo);
        // 可以将用户信息发送到后台进行存储
        wx.request({
          url: 'https://your-server.com/api/saveUserInfo', // 替换为你的服务器地址
          method: 'POST',
          data: {
            userInfo: res.userInfo
          },
          success: (response) => {
            console.log('用户信息已保存');
          }
        });
      }
    });
  }
});
4.2 后端代码

在服务器端，接收并存储用户信息。以下是一个使用Node.js实现的示例：

app.post('/api/saveUserInfo', (req, res) => {
  const userInfo = req.body.userInfo;
  // 在此处处理用户信息，例如存储到数据库
  console.log('保存用户信息：', userInfo);
  res.json({ success: true });
});

总结

本文介绍了如何在微信小程序中实现授权登录，并获取用户手机号和用户信息的详细步骤。通过前端与后端的协作，可以轻松实现这些功能，为小程序用户提供个性化的体验。如果您有任何问题或需要进一步的帮助，欢迎留言讨论。Happy coding!

评论区
评论列表
menu