uniapp 微信公众号 获取手机号并存储

简介: uniapp 微信公众号 获取手机号并存储

uni-app 是一个跨平台框架,可以通过编写一套代码来构建不同平台的应用,包括微信公众号。实现获取用户手机号并存储,可以按照以下步骤进行:

  1. 前端页面:展示获取手机号按钮并调用微信授权接口
  2. 后端服务器:接收并存储用户手机号

一、前端部分

首先,我们需要在前端页面上创建一个按钮,点击按钮后触发微信的获取手机号接口。

<template>
  <view class="container">
    <button @tap="getPhoneNumber" open-type="getPhoneNumber">获取手机号</button>
  </view>
</template>
 
<script>
export default {
  methods: {
    getPhoneNumber(e) {
      if (e.mp.detail.errMsg === 'getPhoneNumber:ok') {
        // 用户允许授权,获取手机号信息
        const { encryptedData, iv } = e.mp.detail;
        // 调用后端接口,发送 encryptedData 和 iv
        this.getPhoneNumberFromServer(encryptedData, iv);
      } else {
        // 用户拒绝授权
        uni.showToast({
          title: '用户拒绝授权',
          icon: 'none'
        });
      }
    },
    getPhoneNumberFromServer(encryptedData, iv) {
      uni.request({
        url: 'https://your-backend-server.com/api/getPhoneNumber', // 替换成你的后端服务器地址
        method: 'POST',
        data: {
          encryptedData,
          iv,
          session_key: uni.getStorageSync('session_key') // 确保已获取并存储用户 session_key
        },
        success: (res) => {
          if (res.data.success) {
            uni.showToast({
              title: '手机号获取成功',
              icon: 'success'
            });
            // 可以在这里处理手机号
          } else {
            uni.showToast({
              title: '手机号获取失败',
              icon: 'none'
            });
          }
        },
        fail: () => {
          uni.showToast({
            title: '请求失败',
            icon: 'none'
          });
        }
      });
    }
  }
}
</script>
 
<style>
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
button {
  padding: 10px 20px;
  background-color: #1AAD19;
  color: white;
  border: none;
  border-radius: 5px;
}
</style>

在上面的代码中,我们创建了一个按钮,当用户点击按钮并同意授权后,会触发 getPhoneNumber 方法。这个方法会获取微信返回的 encryptedDataiv,然后调用后端接口,将这些数据发送到服务器。

二、后端部分

后端部分需要接收前端发送的 encryptedDataiv,然后使用微信提供的解密算法解密出用户的手机号,并将其存储在数据库中。以下是一个基于 Node.js 和 Express 的示例代码:

const express = require('express');
const bodyParser = require('body-parser');
const crypto = require('crypto');
 
const app = express();
app.use(bodyParser.json());
 
app.post('/api/getPhoneNumber', (req, res) => {
  const { encryptedData, iv, session_key } = req.body;
  
  // 微信小程序提供的解密算法
  function decryptData(encryptedData, iv, sessionKey) {
    const decodedKey = Buffer.from(sessionKey, 'base64');
    const decodedIV = Buffer.from(iv, 'base64');
    const decodedData = Buffer.from(encryptedData, 'base64');
    
    try {
      const decipher = crypto.createDecipheriv('aes-128-cbc', decodedKey, decodedIV);
      decipher.setAutoPadding(true);
      let decrypted = decipher.update(decodedData, 'binary', 'utf8');
      decrypted += decipher.final('utf8');
      
      return JSON.parse(decrypted);
    } catch (err) {
      console.error('解密失败:', err);
      return null;
    }
  }
 
  const decryptedData = decryptData(encryptedData, iv, session_key);
  if (decryptedData) {
    // 存储手机号逻辑,这里可以是存储到数据库
    const phoneNumber = decryptedData.phoneNumber;
    // 假设我们有一个函数 savePhoneNumber 存储手机号
    savePhoneNumber(phoneNumber).then(() => {
      res.json({ success: true, phoneNumber });
    }).catch(err => {
      console.error('存储失败:', err);
      res.json({ success: false, message: '存储失败' });
    });
  } else {
    res.json({ success: false, message: '解密失败' });
  }
});
 
function savePhoneNumber(phoneNumber) {
  // 此处为示例,实际应将手机号存储到数据库中
  return new Promise((resolve, reject) => {
    // 模拟异步存储操作
    setTimeout(() => {
      console.log('手机号存储成功:', phoneNumber);
      resolve();
    }, 1000);
  });
}
 
app.listen(3000, () => {
  console.log('服务器已启动,端口 3000');
});

在后端代码中,我们首先通过 decryptData 函数解密 encryptedData,然后将解密后的数据(包含手机号)存储到数据库中。savePhoneNumber 函数是一个模拟的存储操作,你需要根据实际情况将其替换为实际的数据库存储逻辑。

三、整体流程说明

用户点击按钮:前端页面展示一个按钮,用户点击后会触发 getPhoneNumber 方法。

微信授权:如果用户同意授权,微信会返回 encryptedData 和 iv,前端将其发送到后端服务器。

后端解密:后端接收到 encryptedData 和 iv 后,使用微信提供的解密算法解密出用户的手机号。

存储手机号:解密成功后,将手机号存储到数据库中,返回成功或失败的消息给前端。

四、注意事项

session_key 的获取和存储:在用户登录时,需要获取并存储 session_key。可以通过微信的登录接口获取到 session_key


数据安全:在实际应用中,务必确保数据传输和存储的安全性,避免用户信息泄露。


错误处理:在解密和存储过程中,需要添加完整的错误处理逻辑,确保系统的健壮性。


通过以上步骤,便可以在 uni-app 中实现微信公众号获取用户手机号并存储的功能。如果你需要对接其他平台,只需根据平台的不同修改相应的代码逻辑即可。


相关文章
|
23天前
|
vr&ar 图形学 UED
电子沙盘VR模型大屏平板手机微信使用方案
数字孪生电子沙盘和VR模型被广泛应用在房地产等行业,为不同设备定制不同版本的模型是常见做法。然而,通过实时云渲染技术,可以将PC端的VR模型转化为网页版,使用户能够在平板或手机上流畅浏览详细信息,无需开发多个版本。这不仅提升了用户体验,还简化了模型提供商的工作流程,降低了成本。尤其在新楼盘发布时,可通过公众号或广告链接快速吸引潜在客户。成本主要取决于并发用户数及显卡性能要求,但该技术显著提高了跨设备访问的便利性。
29 1
|
2月前
|
移动开发 小程序 前端开发
|
2月前
|
小程序 前端开发
|
2月前
|
存储 小程序 JavaScript
|
2月前
|
存储 小程序 JavaScript
|
4月前
|
网络协议 Android开发 数据安全/隐私保护
Android手机上使用Socks5全局代理-教程+软件
Android手机上使用Socks5全局代理-教程+软件
3163 2
|
5月前
|
监控 安全 Android开发
【新手必读】Airtest测试Android手机常见的设置问题
【新手必读】Airtest测试Android手机常见的设置问题
179 0
|
5月前
|
XML Java Android开发
Android Studio开发之使用内容组件Content获取通讯信息讲解及实战(附源码 包括添加手机联系人和发短信)
Android Studio开发之使用内容组件Content获取通讯信息讲解及实战(附源码 包括添加手机联系人和发短信)
334 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
下一篇
无影云桌面