返回

小程序获取手机号——小程序入门与实战(15)

前端

小程序一键登录系列(15):小程序获取手机号

在上一章中,我们学习了小程序登录的部分流程。今天,我们将继续完善登录流程。小程序客户端将获取到的微信用户绑定的手机号传给后端,后端返回给小程序客户端自定义登录状态令牌(token)。

1. 小程序获取手机号

微信小程序提供了 wx.login 接口来获取微信用户的临时登录凭证(code)。通过该 code ,可以调用 wx.getUserInfo 接口来获取微信用户的基本信息,包括昵称、头像和性别。但是,微信小程序没有提供直接获取手机号的接口。

为了获取微信用户绑定的手机号,需要通过 wx.request 接口向后端发送请求,并带上 codeiv 参数。iv 参数是加密算法的初始向量,用于对手机号进行加密。

以下是获取手机号的示例代码:

wx.login({
  success: function (res) {
    if (res.code) {
      wx.request({
        url: 'https://example.com/api/get_phone_number',
        data: {
          code: res.code,
          iv: 'AES加密的iv向量',
          encryptedData: 'AES加密的手机号信息'
        },
        success: function (res) {
          if (res.data.status === 0) {
            // 成功获取手机号
            const phoneNumber = res.data.data.phoneNumber;
            console.log('手机号:', phoneNumber);
          } else {
            // 获取手机号失败
            console.log('获取手机号失败:', res.data.message);
          }
        },
        fail: function () {
          // 请求失败
          console.log('请求失败');
        }
      });
    } else {
      console.log('获取用户登录态失败!' + res.errMsg);
    }
  }
});

2. 后端处理

后端收到小程序客户端的请求后,需要对 code 进行解密,以获取微信用户的 openidsession_key。然后,后端需要根据 openidsession_key 来获取微信用户绑定的手机号。

以下是后端处理的示例代码:

<?php

// 导入微信小程序SDK
require_once 'wechat-mini-program-sdk/autoload.php';

// 创建微信小程序对象
$app = new EasyWeChat\MiniProgram\Application([
  'app_id' => '你的小程序appid',
  'secret' => '你的小程序secret',
]);

// 解密小程序登录凭证
$code = $_POST['code'];
$result = $app->auth->session($code);

// 获取微信用户的openid和session_key
$openid = $result['openid'];
$sessionKey = $result['session_key'];

// 通过openid和session_key获取微信用户绑定的手机号
$phoneNumber = $app->user->phoneNumber([
  'openid' => $openid,
  'sessionKey' => $sessionKey,
  'iv' => $_POST['iv'],
  'encryptedData' => $_POST['encryptedData'],
]);

// 返回手机号给小程序客户端
echo $phoneNumber['phoneNumber'];

?>

3. 小程序客户端处理

小程序客户端收到后端返回的手机号后,就可以将手机号存储到本地或数据库中,并根据手机号来生成自定义登录状态令牌(token)。

以下是小程序客户端处理的示例代码:

wx.request({
  url: 'https://example.com/api/generate_token',
  data: {
    phoneNumber: phoneNumber
  },
  success: function (res) {
    if (res.data.status === 0) {
      // 成功生成token
      const token = res.data.data.token;
      console.log('token:', token);
    } else {
      // 生成token失败
      console.log('生成token失败:', res.data.message);
    }
  },
  fail: function () {
    // 请求失败
    console.log('请求失败');
  }
});

至此,小程序获取手机号并生成自定义登录状态令牌(token)的流程就完成了。

总结

本节,我们学习了如何使用小程序 wx.request 接口向后端发送请求来获取微信用户绑定的手机号。后端需要对小程序登录凭证进行解密,以获取微信用户的 openidsession_key。然后,后端需要根据 openidsession_key 来获取微信用户绑定的手机号。最后,小程序客户端可以将手机号存储到本地或数据库中,并根据手机号来生成自定义登录状态令牌(token)。

我希望本节的内容对您有所帮助。如果您有任何问题,请随时留言。