Flutter 三方库 flutter_secure_storage 的鸿蒙化适配指南

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

宝子们!敏感数据裸奔的日子结束啦🥳

宝子们有没有过这样的经历:写Flutter跨平台项目的时候,把用户的登录Token、支付密码或者加密密钥直接存在SharedPreferences里,甚至明文写在本地文件里?每次写完都心惊胆战,生怕哪天被黑客薅走数据,或者过不了应用市场的安全审核?尤其是咱们做鸿蒙跨平台开发的时候,要是敏感数据存储不合规,不仅用户隐私没保障,还可能导致应用上架失败哦😱

今天就跟宝子们分享一款超好用的Flutter三方库——flutter_secure_storage,它能帮咱们把敏感数据妥妥地藏在鸿蒙设备的安全区里,再也不用怕数据裸奔啦!而且我已经把它适配到OpenHarmony平台了,亲测在鸿蒙设备上运行完美🥰

为什么选择 flutter_secure_storage?

跨平台安全存储天花板

flutter_secure_storage是一款专门为Flutter打造的安全存储库,它会根据不同平台自动选择最安全的存储方式:

  • 📱iOS:使用KeyChain进行加密存储
  • 🤖Android:使用Keystore系统级加密
  • 🪟OpenHarmony:适配OH安全区(Secure Area)的KeyStore接口

对比咱们常用的hive + encryption方案,flutter_secure_storage有这些优势:

  1. 系统级加密:直接调用系统底层的安全存储接口,比第三方加密库更可靠
  2. 自动密钥管理:不需要手动管理加密密钥,系统会自动生成和存储
  3. 权限隔离:只有当前应用能访问自己存储的敏感数据
  4. 性能更优:原生实现比Dart层加密更快,尤其是存储大量数据的时候

当然啦,hive + encryption也有它的优势,比如支持更复杂的数据结构存储,适合存储加密后的用户配置或者离线数据。但如果只是存储Token、登录凭证这类小体积的敏感数据,flutter_secure_storage绝对是你的最佳选择🥇

鸿蒙化适配要点敲黑板📝

在适配OpenHarmony平台的时候,我主要做了以下几点工作:

  1. 验证OH安全区兼容性:确认flutter_secure_storage的接口能正常调用鸿蒙安全区的KeyStore服务
  2. 修复平台适配代码:针对鸿蒙平台的API差异,调整了原生层的存储实现
  3. 测试核心功能:在鸿蒙模拟器和真实设备上测试Token的存储、读取和删除功能
  4. 优化性能:减少跨平台通信的开销,提升数据读写速度

宝子们跟着做!手把手教你集成

第一步:添加依赖

首先,咱们需要在pubspec.yaml中添加flutter_secure_storage的依赖。注意哦,一定要用AtomGit上的仓库地址,不能用GitCode哦😎

dependencies:
  flutter:
    sdk: flutter
  flutter_secure_storage:
    git:
      url: https://atomgit.com/openharmony-crossplatform/flutter_secure_storage.git
      ref: ohos

添加完依赖后,执行flutter pub get命令安装库。

第二步:配置鸿蒙权限

在鸿蒙项目的config.json文件中,添加安全存储相关的权限:

{
  "module": {
    "reqPermissions": [
      {
        "name": "ohos.permission.ACCESS_SECURE_STORAGE"
      }
    ]
  }
}

这个权限是访问鸿蒙安全区的必要权限,一定要记得添加哦!

第三步:实现安全存储服务

接下来,咱们来写一个封装好的安全存储服务类,这样在项目中使用起来更方便。

import 'package:flutter_secure_storage/flutter_secure_storage.dart';

class SecureStorageService {
  static final SecureStorageService _instance = SecureStorageService._internal();
  factory SecureStorageService() => _instance;
  
  final FlutterSecureStorage _storage = const FlutterSecureStorage();
  
  SecureStorageService._internal();
  
  /// 存储敏感数据
  Future<void> saveData(String key, String value) async {
    await _storage.write(key: key, value: value);
  }
  
  /// 读取敏感数据
  Future<String?> readData(String key) async {
    return await _storage.read(key: key);
  }
  
  /// 删除敏感数据
  Future<void> deleteData(String key) async {
    await _storage.delete(key: key);
  }
  
  /// 清空所有敏感数据
  Future<void> deleteAllData() async {
    await _storage.deleteAll();
  }
}

第四步:在项目中使用

现在咱们可以在登录页面中使用这个安全存储服务来保存用户的登录Token啦!

import 'package:flutter/material.dart';
import 'secure_storage_service.dart';

class LoginPage extends StatefulWidget {
  const LoginPage({super.key});
  
  
  State<LoginPage> createState() => _LoginPageState();
}

class _LoginPageState extends State<LoginPage> {
  final _usernameController = TextEditingController();
  final _passwordController = TextEditingController();
  final _storageService = SecureStorageService();
  
  Future<void> _login() async {
    // 模拟登录请求
    final token = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...';
    
    // 保存Token到安全存储
    await _storageService.saveData('user_token', token);
    
    // 跳转到首页
    if (mounted) {
      ScaffoldMessenger.of(context).showSnackBar(
        const SnackBar(content: Text('登录成功!Token已安全存储')),
      );
    }
  }
  
  
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('可爱版登录页面')),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          children: [
            TextField(
              controller: _usernameController,
              decoration: const InputDecoration(labelText: '用户名'),
            ),
            TextField(
              controller: _passwordController,
              decoration: const InputDecoration(labelText: '密码'),
              obscureText: true,
            ),
            const SizedBox(height: 20),
            ElevatedButton(
              onPressed: _login,
              child: const Text('登录'),
            ),
          ],
        ),
      ),
    );
  }
}

第五步:测试鸿蒙设备运行

把项目编译成鸿蒙应用,安装到模拟器或者真实设备上,点击登录按钮,就能看到SnackBar提示登录成功啦!

你可以通过以下方式验证Token是否成功存储:

  1. 使用DevEco Studio的Device File Explorer查看应用的安全存储目录
  2. 在首页添加一个读取Token的按钮,点击后显示存储的Token
  3. 重启应用后,检查Token是否还能正常读取

运行成功截图展示📸

在这里插入图片描述

对比hive + encryption方案

为了让宝子们更清楚地了解两种方案的差异,我做了一个对比表格:

特性 flutter_secure_storage hive + encryption
加密方式 系统级加密 Dart层加密
密钥管理 自动管理 手动管理
数据结构支持 仅支持字符串 支持复杂结构
性能 更高 较低
平台兼容性 跨平台原生支持 跨平台Dart实现
适用场景 存储Token、凭证 存储加密配置、离线数据

真实场景应用案例

场景1:存储API Token

在网络请求中,我们通常需要在请求头中携带API Token来验证身份。使用flutter_secure_storage存储Token,可以避免Token被窃取的风险。

import 'package:dio/dio.dart';
import 'secure_storage_service.dart';

class ApiService {
  final Dio _dio = Dio();
  final _storageService = SecureStorageService();
  
  Future<void> init() async {
    final token = await _storageService.readData('user_token');
    if (token != null) {
      _dio.options.headers['Authorization'] = 'Bearer $token';
    }
  }
  
  Future<Response> getUserInfo() async {
    return await _dio.get('https://api.example.com/user/info');
  }
}

场景2:存储用户登录凭证

除了Token,我们还可以用flutter_secure_storage存储用户的登录凭证,比如用户名和密码的加密哈希值,实现自动登录功能。

Future<void> autoLogin() async {
  final username = await _storageService.readData('saved_username');
  final passwordHash = await _storageService.readData('saved_password_hash');
  
  if (username != null && passwordHash != null) {
    // 调用登录接口
    await login(username, passwordHash);
  }
}

常见问题排查

问题1:无法访问OH安全区

如果遇到"Permission denied"错误,检查一下config.json中是否添加了ohos.permission.ACCESS_SECURE_STORAGE权限,并且在应用启动时请求了该权限。

问题2:存储的数据丢失

这种情况通常是因为应用被卸载或者数据被清除。flutter_secure_storage存储的数据会随着应用卸载而删除,这是正常的安全机制。

问题3:性能不佳

如果存储大量数据时性能不佳,建议使用hive + encryption方案,因为flutter_secure_storage更适合存储小体积的敏感数据。

总结与展望

通过本次适配,flutter_secure_storage已经完美支持OpenHarmony平台,为咱们Flutter跨平台开发者提供了一种安全可靠的敏感数据存储方案。未来我还会继续优化这个库,添加更多鸿蒙平台特有的功能,比如支持生物识别验证访问敏感数据。

如果你在使用过程中遇到问题,欢迎加入开源鸿蒙跨平台社区和我交流哦!让我们一起打造更安全的Flutter for OpenHarmony应用🥰

Logo

作为“人工智能6S店”的官方数字引擎,为AI开发者与企业提供一个覆盖软硬件全栈、一站式门户。

更多推荐