rn_for_openharmony商城项目app实战-账号安全实现

案例开源地址：https://atomgit.com/nutpi/rn_openharmony_buy

写在前面

账号安全这个页面，用户平时不会经常打开，但一旦需要用到，就是很重要的时刻。比如想改密码了、换手机号了、或者发现账号有异常想看看登录记录。

我之前遇到过一次账号被盗的情况，那个 App 的安全设置藏得很深，找了半天才找到。好不容易找到了，发现只能改密码，不能看登录设备，也不能强制下线。当时就很崩溃。

所以做这个页面的时候，我就想着要把常用的安全功能都放进来：修改密码、绑定手机、绑定邮箱、登录设备管理、账号注销。虽然有些功能这里只是做个入口（实际逻辑需要后端配合），但至少让用户知道有这些功能。

页面要实现什么功能

账号安全页面的功能列表：

账号绑定类：

修改密码
绑定/更换手机
绑定/更换邮箱

安全管理类：

登录设备管理
账号注销

这些功能大部分需要后端接口支持，我们这里先把 UI 和交互做出来，用 Alert 模拟实际操作。

引入需要的依赖

tsx 复制代码

import React from 'react';

这个页面不需要本地状态，所有数据都从全局状态读取。

tsx 复制代码

import {View, StyleSheet, Alert} from 'react-native';

这里没有引入 Text 和 TouchableOpacity，因为我们用了封装好的 ListItem 组件来渲染列表项。这个组件在之前的文章里介绍过，可以复用到很多地方。

tsx 复制代码

import {useApp} from '../store/AppContext';
import {Header} from '../components/Header';
import {ListItem} from '../components/ListItem';

ListItem 是我们封装的列表项组件，支持图标、标题、副标题、右侧文字、点击事件等。用它来构建设置页面非常方便。

获取全局状态

tsx 复制代码

export const SecurityScreen = () => {
  const {user, setUser, navigate} = useApp();

从全局状态里取三个东西：

user：当前登录的用户信息，包含手机号、邮箱等

setUser：更新用户信息的方法，注销账号时会用到

navigate：页面跳转方法

修改密码

tsx 复制代码

const handleChangePassword = () => {
  Alert.alert(
    '修改密码',
    '确定要修改密码吗？',
    [
      {text: '取消', style: 'cancel'},
      {text: '确定', onPress: () => Alert.alert('提示', '密码修改功能开发中')},
    ]
  );
};

修改密码是个敏感操作，先弹个确认框。用户点确定后，实际项目中应该跳转到修改密码页面，让用户输入旧密码和新密码。

这里用 Alert.alert 模拟了一下，实际实现需要：

验证旧密码

输入新密码（两次确认）

密码强度校验

调用后端接口修改

修改成功后可能需要重新登录

修改密码的流程比较复杂，涉及到安全性问题，这里就不展开了。

绑定手机

tsx 复制代码

const handleBindPhone = () => {
  Alert.alert(
    '绑定手机', 
    `当前绑定手机：${user?.phone || '未绑定'}`, 
    [
      {text: '取消', style: 'cancel'},
      {text: '更换手机', onPress: () => Alert.alert('提示', '更换手机功能开发中')},
    ]
  );
};

弹窗里显示当前绑定的手机号，让用户知道现在绑的是哪个号。如果没绑定，显示"未绑定"。

更换手机号的流程一般是：

验证原手机号（发短信验证码）

输入新手机号

验证新手机号（发短信验证码）

绑定成功

这个流程需要短信服务支持，成本不低。有些 App 会要求用户联系客服来更换手机号，减少开发成本和安全风险。

绑定邮箱

tsx 复制代码

const handleBindEmail = () => {
  Alert.alert(
    '绑定邮箱', 
    `当前绑定邮箱：${user?.email || '未绑定'}`, 
    [
      {text: '取消', style: 'cancel'},
      {text: '更换邮箱', onPress: () => Alert.alert('提示', '更换邮箱功能开发中')},
    ]
  );
};

和绑定手机类似，显示当前绑定的邮箱。

邮箱验证比手机验证便宜，不需要短信费用。流程是发一封验证邮件，用户点击邮件里的链接完成验证。但邮件可能会进垃圾箱，用户体验不如短信。

账号注销

这是最敏感的操作，要特别小心处理：

tsx 复制代码

const handleDeleteAccount = () => {
  Alert.alert(
    '账号注销',
    '注销后，您的账号数据将被永久删除且无法恢复。确定要注销吗？',
    [
      {text: '取消', style: 'cancel'},
      {
        text: '确定注销',
        style: 'destructive',
        onPress: () => {
          setUser(null);
          navigate('home');
          Alert.alert('提示', '账号已注销');
        },
      },
    ]
  );
};

几个关键点：

警告文案要明确：告诉用户注销后数据会被永久删除且无法恢复，让用户三思。

按钮样式 ：确定注销按钮用 style: 'destructive'，在 iOS 上会显示成红色，提醒用户这是危险操作。

注销逻辑 ：调用 setUser(null) 清除用户信息，然后跳转到首页。

实际项目中，账号注销应该：

再次验证用户身份（输入密码或验证码）
告知用户注销后的影响（订单、余额、优惠券等）
可能有冷静期（比如 7 天内可以取消注销）
调用后端接口删除数据

根据相关法规，App 必须提供账号注销功能，而且不能设置不合理的障碍。但可以有合理的验证流程，防止误操作或恶意注销。

页面结构

tsx 复制代码

return (
  <View style={styles.container}>
    <Header title="账号与安全" />

    <View style={styles.content}>
      <View style={styles.section}>
        {/* 第一组：密码和绑定 */}
      </View>

      <View style={styles.section}>
        {/* 第二组：设备管理和注销 */}
      </View>
    </View>
  </View>
);

把功能分成两组：第一组是账号绑定相关，第二组是安全管理相关。分组能让页面更清晰。

第一组：密码和绑定

tsx 复制代码

<View style={styles.section}>
  <ListItem 
    icon="🔑" 
    title="修改密码" 
    subtitle="定期修改密码可提高账号安全性" 
    onPress={handleChangePassword} 
  />

修改密码放在第一个，因为这是最常用的安全功能。副标题提醒用户定期改密码。

tsx 复制代码

  <ListItem 
    icon="📱" 
    title="绑定手机" 
    rightText={user?.phone ? '已绑定' : '未绑定'} 
    onPress={handleBindPhone} 
  />

rightText 显示当前绑定状态。已绑定显示"已绑定"，未绑定显示"未绑定"。用户一眼就能看出来。

tsx 复制代码

  <ListItem 
    icon="📧" 
    title="绑定邮箱" 
    rightText={user?.email ? '已绑定' : '未绑定'} 
    onPress={handleBindEmail} 
  />
</View>

邮箱绑定和手机绑定一样的结构。

第二组：设备管理和注销

tsx 复制代码

<View style={styles.section}>
  <ListItem 
    icon="🔐" 
    title="登录设备管理" 
    subtitle="查看和管理已登录的设备" 
    onPress={() => Alert.alert('提示', '功能开发中')} 
  />

登录设备管理是个很有用的功能。用户可以看到自己的账号在哪些设备上登录过，如果发现可疑设备可以强制下线。

实现这个功能需要后端记录每次登录的设备信息（设备型号、登录时间、IP 地址等），然后提供接口查询和删除。

tsx 复制代码

  <ListItem 
    icon="🛡️" 
    title="账号注销" 
    subtitle="注销后数据将无法恢复" 
    onPress={handleDeleteAccount} 
  />
</View>

账号注销放在最后，因为这是最不常用也最危险的操作。副标题再次提醒用户数据无法恢复。

样式定义

typescript 复制代码

const styles = StyleSheet.create({
  container: {flex: 1, backgroundColor: '#f5f5f5'},
  content: {flex: 1},
  section: {backgroundColor: '#fff', marginTop: 12},
});

样式很简单，就是灰色背景上放白色的分组卡片。

marginTop: 12 让两个分组之间有间距，视觉上更清晰。

关于 ListItem 组件

这个页面大量使用了 ListItem 组件，简单介绍一下它的用法：

tsx 复制代码

<ListItem 
  icon="🔑"           // 左侧图标
  title="修改密码"     // 标题
  subtitle="..."      // 副标题（可选）
  rightText="已绑定"  // 右侧文字（可选）
  onPress={handler}   // 点击事件
/>

封装这样一个通用组件的好处是，所有设置页面的列表项都能保持一致的样式和交互。改一个地方，所有用到的地方都会变。

如果你的项目里有很多设置页面，强烈建议封装一个类似的组件。

安全相关的一些思考

做账号安全功能，有几点值得思考：

1. 敏感操作要二次确认

修改密码、更换手机、注销账号这些操作，一定要有确认步骤。防止用户误操作，也防止别人拿到用户手机后乱搞。

2. 验证方式要多样

有些用户可能换了手机号，原来的号收不到验证码了。这时候如果只支持短信验证，用户就没办法了。可以提供多种验证方式：短信、邮箱、密保问题、人工客服等。

3. 异常登录提醒

如果检测到用户在新设备或新地点登录，应该发通知提醒用户。如果不是本人操作，用户可以及时处理。

4. 登录日志

记录用户的登录历史，包括时间、设备、IP 地址等。用户可以查看，发现异常可以修改密码或联系客服。

5. 密码强度要求

不能让用户设置太简单的密码，比如"123456"、"password"这种。要有长度要求、复杂度要求（大小写、数字、特殊字符）。

实际项目中的注意事项

1. HTTPS 是必须的

所有涉及账号安全的接口都必须用 HTTPS，防止中间人攻击。

2. 密码不能明文存储

后端存储密码要用哈希算法（如 bcrypt），不能存明文。即使数据库泄露，攻击者也拿不到用户的真实密码。

3. 验证码要有有效期

短信验证码、邮箱验证码都要设置有效期（比如 5 分钟），过期后要重新获取。

4. 防止暴力破解

5. 敏感操作要记录日志

修改密码、更换手机、注销账号等操作要记录日志，方便出问题时排查。

小结

账号安全页面的核心是提供各种安全相关的功能入口：

修改密码：最常用的安全功能
绑定手机/邮箱：账号找回的重要凭证
登录设备管理：发现异常登录
账号注销：用户的基本权利

几个关键点：

敏感操作要二次确认
危险操作按钮用 destructive 样式
显示当前绑定状态，让用户一目了然
用 ListItem 组件保持样式统一

安全功能虽然用户不常用，但一定要做好。出了安全问题，用户对 App 的信任就没了。

下一篇写语言设置页面，敬请期待。

欢迎加入开源鸿蒙跨平台社区：https://openharmonycrossplatform.csdn.net