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

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

在原生微信小程序中获取用户的手机号并存储需要通过微信提供的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. 测试和调试

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

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

相关文章
|
1月前
|
JSON 小程序 JavaScript
原生微信小程序笔记完整总结
原生微信小程序笔记完整总结
46 1
|
4月前
|
机器学习/深度学习 人工智能 JSON
微信小程序原生AI运动(动作)检测识别解决方案
近年来,疫情限制了人们的出行,却推动了“AI运动”概念的兴起。AI运动已在运动锻炼、体育教学、线上主题活动等多个场景中广泛应用,受到互联网用户的欢迎。通过AI技术,用户可以在家中进行有效锻炼,学校也能远程监督学生的体育活动,同时,云上健身活动形式多样,适合单位组织。该方案成本低、易于集成和扩展,已成功应用于微信小程序。
|
4月前
|
小程序 JavaScript API
微信小程序开发之:保存图片到手机,使用uni-app 开发小程序;还有微信原生保存图片到手机
这篇文章介绍了如何在uni-app和微信小程序中实现将图片保存到用户手机相册的功能。
1791 0
微信小程序开发之:保存图片到手机,使用uni-app 开发小程序;还有微信原生保存图片到手机
|
4月前
|
小程序
如何将CCBUPT全能墙小程序添加到手机桌面
如何将CCBUPT全能墙小程序添加到手机桌面
54 0
|
6月前
|
小程序 前端开发 JavaScript
微信小程序结合PWA技术,提供离线访问、后台运行、桌面图标及原生体验,增强应用性能与用户交互。
微信小程序结合PWA技术,提供离线访问、后台运行、桌面图标及原生体验,增强应用性能与用户交互。开发者运用Service Worker等实现资源缓存与实时推送,利用Web App Manifest添加快捷方式至桌面,通过CSS3和JavaScript打造流畅动画与手势操作,需注意兼容性与性能优化,为用户创造更佳体验。
179 0
|
6月前
|
存储 前端开发 算法
|
6月前
|
存储 小程序 JavaScript
|
6天前
|
自然语言处理 搜索推荐 小程序
微信公众号接口:解锁公众号开发的无限可能
微信公众号接口是微信官方提供的API,支持开发者通过编程与公众号交互,实现自动回复、消息管理、用户管理和数据分析等功能。本文深入探讨接口的定义、类型、优势及应用场景,如智能客服、内容分发、电商闭环等,并介绍开发流程和工具,帮助运营者提升用户体验和效率。未来,随着微信生态的发展,公众号接口将带来更多机遇,如小程序融合、AI应用等。
|
18天前
|
人工智能 开发框架 机器人
AstrBot:轻松将大模型接入QQ、微信等消息平台,打造多功能AI聊天机器人的开发框架,附详细教程
AstrBot 是一个开源的多平台聊天机器人及开发框架,支持多种大语言模型和消息平台,具备多轮对话、语音转文字等功能。
2738 15
AstrBot:轻松将大模型接入QQ、微信等消息平台,打造多功能AI聊天机器人的开发框架,附详细教程
|
4月前
|
JSON 小程序 JavaScript
uni-app开发微信小程序的报错[渲染层错误]排查及解决
uni-app开发微信小程序的报错[渲染层错误]排查及解决
1019 7

热门文章

最新文章

  • 1
    让小程序拥有“视觉之眼“:DeepSeek图像识别实战指南
  • 2
    创新陪玩代练模式:小程序源码软件开发的挑战与机遇
  • 3
    让小程序开口说话:DeepSeek语音交互开发指南
  • 4
    MNN-LLM App:在手机上离线运行大模型,阿里巴巴开源基于 MNN-LLM 框架开发的手机 AI 助手应用
  • 5
    【01】整体试验思路,如何在有UID的情况下获得用户手机号信息,python开发之理论研究试验,如何通过抖音视频下方的用户的UID获得抖音用户的手机号-本系列文章仅供学习研究-禁止用于任何商业用途-仅供学习交流-优雅草卓伊凡
  • 6
    美团面试:手机扫描PC二维码登录,底层原理和完整流程是什么?
  • 7
    【03】鸿蒙实战应用开发-华为鸿蒙纯血操作系统Harmony OS NEXT-测试hello word效果-虚拟华为手机真机环境调试-为DevEco Studio编译器安装中文插件-测试写一个滑动块效果-介绍诸如ohos.ui等依赖库-全过程实战项目分享-从零开发到上线-优雅草卓伊凡
  • 8
    【02】整体试验思路,在这之前我们发现sec_uid,sec_uid是什么和uid的关系又是什么?相互如何转换?python开发之理论研究试验,如何通过抖音视频下方的用户的UID获得抖音用户的手机号-本系列文章仅供学习研究-禁止用于任何商业用途-仅供学习交流-优雅草卓伊凡
  • 9
    AstrBot:轻松将大模型接入QQ、微信等消息平台,打造多功能AI聊天机器人的开发框架,附详细教程
  • 10
    一键部署开源DeepSeek并集成到企业微信