原生微信小程序 获取手机号并存储

简介: 原生微信小程序 获取手机号并存储

在原生微信小程序中获取用户的手机号并存储需要通过微信提供的wx.loginwx.getUserProfile接口来完成。这些接口允许小程序获取用户信息并在用户授权后获取其手机号。以下是一个详细的实现示例和相应的代码注释。

1. 配置小程序的权限

在实现获取手机号功能之前,需要确保小程序有获取用户信息和手机号的权限。在app.json文件中添加如下代码:

{
  "pages": [
    "pages/index/index"
  ],
  "permission": {
    "scope.userInfo": {
      "desc": "获取用户信息以便更好地提供服务"
    },
    "scope.userPhoneNumber": {
      "desc": "获取用户手机号以便更好地提供服务"
    }
  }
}

2. 登录并获取临时登录凭证(code)

首先,需要调用wx.login接口获取用户的临时登录凭证code,然后使用这个code去换取用户的session_key,这是后续解密用户手机号的关键。以下是在index.js中的实现:

Page({
  data: {
    userInfo: null,
    hasUserInfo: false,
    canIUseGetUserProfile: false,
    phoneNumber: ''
  },
 
  onLoad() {
    // 判断是否可以使用getUserProfile
    if (wx.getUserProfile) {
      this.setData({
        canIUseGetUserProfile: true
      })
    }
  },
 
  getUserProfile(e) {
    wx.getUserProfile({
      desc: '用于完善用户资料',
      success: (res) => {
        this.setData({
          userInfo: res.userInfo,
          hasUserInfo: true
        })
        this.getPhoneNumber();
      }
    })
  },
 
  getPhoneNumber() {
    wx.login({
      success: res => {
        const code = res.code;
        // 发送code到后台换取 openId, sessionKey, unionId
        if (code) {
          wx.request({
            url: 'https://yourserver.com/onLogin',
            method: 'POST',
            data: {
              code: code
            },
            success: function (res) {
              if (res.statusCode === 200) {
                // 成功获取 session_key 等信息
                wx.setStorageSync('sessionKey', res.data.sessionKey);
              } else {
                console.error('登录失败!', res.errMsg);
              }
            },
            fail: function (err) {
              console.error('请求失败!', err);
            }
          });
        } else {
          console.error('登录失败!', res.errMsg);
        }
      }
    });
  }
})

3. 获取手机号并存储

接下来,当用户点击按钮授权获取手机号时,需要调用wx.getUserProfile接口获取用户的基本信息,然后通过微信提供的按钮组件<button open-type="getPhoneNumber">来获取用户的手机号。以下是在index.wxml和index.js中的实现:


index.wxml

<view class="container">
  <button wx:if="{{canIUseGetUserProfile}}" bindtap="getUserProfile">获取用户信息</button>
  <button wx:if="{{hasUserInfo}}" open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber">获取手机号</button>
</view>

index.js

Page({
  data: {
    userInfo: null,
    hasUserInfo: false,
    canIUseGetUserProfile: false,
    phoneNumber: ''
  },
 
  onLoad() {
    if (wx.getUserProfile) {
      this.setData({
        canIUseGetUserProfile: true
      })
    }
  },
 
  getUserProfile(e) {
    wx.getUserProfile({
      desc: '用于完善用户资料',
      success: (res) => {
        this.setData({
          userInfo: res.userInfo,
          hasUserInfo: true
        })
      }
    })
  },
 
  getPhoneNumber(e) {
    if (e.detail.errMsg === 'getPhoneNumber:ok') {
      const encryptedData = e.detail.encryptedData;
      const iv = e.detail.iv;
      const sessionKey = wx.getStorageSync('sessionKey');
      // 发送数据到后台解密
      wx.request({
        url: 'https://yourserver.com/decryptData',
        method: 'POST',
        data: {
          encryptedData: encryptedData,
          iv: iv,
          sessionKey: sessionKey
        },
        success: res => {
          if (res.statusCode === 200) {
            // 成功获取手机号
            this.setData({
              phoneNumber: res.data.phoneNumber
            });
          } else {
            console.error('解密失败!', res.errMsg);
          }
        },
        fail: err => {
          console.error('请求失败!', err);
        }
      });
    } else {
      console.error('用户拒绝授权获取手机号');
    }
  }
})

4. 后端服务接口

前端代码中的请求需要后台服务配合进行解密操作。以下是一个简单的Node.js后端服务示例,使用了axioscrypto模块:

const express = require('express');
const axios = require('axios');
const crypto = require('crypto');
 
const app = express();
app.use(express.json());
 
const appId = 'yourAppId';
const appSecret = 'yourAppSecret';
 
app.post('/onLogin', async (req, res) => {
  const code = req.body.code;
  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'
      }
    });
    res.json(response.data);
  } catch (error) {
    res.status(500).json({ error: error.message });
  }
});
 
app.post('/decryptData', (req, res) => {
  const { encryptedData, iv, sessionKey } = req.body;
  try {
    const decodedData = decryptData(appId, sessionKey, encryptedData, iv);
    res.json(decodedData);
  } catch (error) {
    res.status(500).json({ error: error.message });
  }
});
 
function decryptData(appId, sessionKey, encryptedData, iv) {
  const sessionKeyBuffer = Buffer.from(sessionKey, 'base64');
  const encryptedDataBuffer = Buffer.from(encryptedData, 'base64');
  const ivBuffer = Buffer.from(iv, 'base64');
 
  const decipher = crypto.createDecipheriv('aes-128-cbc', sessionKeyBuffer, ivBuffer);
  decipher.setAutoPadding(true);
 
  let decoded = decipher.update(encryptedDataBuffer, 'binary', 'utf8');
  decoded += decipher.final('utf8');
 
  const decodedData = JSON.parse(decoded);
 
  if (decodedData.watermark.appid !== appId) {
    throw new Error('Invalid Buffer');
  }
 
  return decodedData;
}
 
app.listen(3000, () => {
  console.log('Server is running on port 3000');
});

5. 测试和调试

最后,确保你的前后端代码都已正确配置和部署,并在微信开发者工具中进行测试。通过点击按钮授权获取用户信息和手机号,并在控制台查看相应的日志输出。

这样,你就完成了在原生微信小程序中获取用户手机号并存储的功能。如果你有任何疑问或需要进一步的帮助,请随时向我提问。

相关文章
|
2月前
|
小程序 前端开发 JavaScript
微信小程序结合PWA技术,提供离线访问、后台运行、桌面图标及原生体验,增强应用性能与用户交互。
微信小程序结合PWA技术,提供离线访问、后台运行、桌面图标及原生体验,增强应用性能与用户交互。开发者运用Service Worker等实现资源缓存与实时推送,利用Web App Manifest添加快捷方式至桌面,通过CSS3和JavaScript打造流畅动画与手势操作,需注意兼容性与性能优化,为用户创造更佳体验。
57 0
|
2月前
|
存储 前端开发 算法
|
2月前
|
存储 小程序 JavaScript
|
2月前
|
存储 JavaScript 小程序
|
4月前
|
网络协议 Android开发 数据安全/隐私保护
Android手机上使用Socks5全局代理-教程+软件
Android手机上使用Socks5全局代理-教程+软件
3123 2
|
5月前
|
监控 安全 Android开发
【新手必读】Airtest测试Android手机常见的设置问题
【新手必读】Airtest测试Android手机常见的设置问题
178 0
|
5月前
|
XML Java Android开发
Android Studio开发之使用内容组件Content获取通讯信息讲解及实战(附源码 包括添加手机联系人和发短信)
Android Studio开发之使用内容组件Content获取通讯信息讲解及实战(附源码 包括添加手机联系人和发短信)
333 0
|
5月前
|
Web App开发 前端开发 网络安全
前端分析工具之 Charles 录制 Android/IOS 手机的 https 应用
【2月更文挑战第21天】前端分析工具之 Charles 录制 Android/IOS 手机的 https 应用
92 1
前端分析工具之 Charles 录制 Android/IOS 手机的 https 应用
|
5月前
|
存储 数据库 Android开发
Android实现手机内存存储功能
Android实现手机内存存储功能
57 2
|
5月前
|
网络协议 安全 Linux
如何使用Android手机通过JuiceSSH远程访问本地Linux服务器
如何使用Android手机通过JuiceSSH远程访问本地Linux服务器
下一篇
无影云桌面