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

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

在原生微信小程序中获取用户的手机号并存储需要通过微信提供的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月前
|
机器学习/深度学习 人工智能 JSON
微信小程序原生AI运动(动作)检测识别解决方案
近年来,疫情限制了人们的出行,却推动了“AI运动”概念的兴起。AI运动已在运动锻炼、体育教学、线上主题活动等多个场景中广泛应用,受到互联网用户的欢迎。通过AI技术,用户可以在家中进行有效锻炼,学校也能远程监督学生的体育活动,同时,云上健身活动形式多样,适合单位组织。该方案成本低、易于集成和扩展,已成功应用于微信小程序。
|
2月前
|
小程序 JavaScript API
微信小程序开发之:保存图片到手机,使用uni-app 开发小程序;还有微信原生保存图片到手机
这篇文章介绍了如何在uni-app和微信小程序中实现将图片保存到用户手机相册的功能。
1003 0
微信小程序开发之:保存图片到手机,使用uni-app 开发小程序;还有微信原生保存图片到手机
|
2月前
|
小程序
如何将CCBUPT全能墙小程序添加到手机桌面
如何将CCBUPT全能墙小程序添加到手机桌面
36 0
|
4月前
|
小程序 前端开发 JavaScript
微信小程序结合PWA技术,提供离线访问、后台运行、桌面图标及原生体验,增强应用性能与用户交互。
微信小程序结合PWA技术,提供离线访问、后台运行、桌面图标及原生体验,增强应用性能与用户交互。开发者运用Service Worker等实现资源缓存与实时推送,利用Web App Manifest添加快捷方式至桌面,通过CSS3和JavaScript打造流畅动画与手势操作,需注意兼容性与性能优化,为用户创造更佳体验。
120 0
|
4月前
|
存储 前端开发 算法
|
4月前
|
存储 小程序 JavaScript
|
2月前
|
JSON 小程序 JavaScript
uni-app开发微信小程序的报错[渲染层错误]排查及解决
uni-app开发微信小程序的报错[渲染层错误]排查及解决
695 7
|
2月前
|
小程序 JavaScript 前端开发
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
750 1
|
2月前
|
小程序 前端开发 测试技术
微信小程序的开发完整流程是什么?
微信小程序的开发完整流程是什么?
146 7
ly~
|
3月前
|
存储 供应链 小程序
除了微信小程序,PHP 还可以用于开发哪些类型的小程序?
除了微信小程序,PHP 还可用于开发多种类型的小程序,包括支付宝小程序、百度智能小程序、抖音小程序、企业内部小程序及行业特定小程序。在电商、生活服务、资讯、工具、娱乐、营销等领域,PHP 能有效管理商品信息、订单处理、支付接口、内容抓取、复杂计算、游戏数据、活动规则等多种业务。同时,在企业内部,PHP 可提升工作效率,实现审批流程、文件共享、生产计划等功能;在医疗和教育等行业,PHP 能管理患者信息、在线问诊、课程资源、成绩查询等重要数据。
ly~
86 6