526互联

Flutter简单的实现Github的2FA认证

发布时间 2024-01-06 18:58:03作者: runbrick

一、简单的介绍

OTP（One Time Password）是一种安全措施，用于在用户进行身份验证时增加一层保护。OTP通常是一串随机生成的数字，用于在用户登录过程中作为额外的验证步骤。这些数字通常是临时的，有效期限很短，通常只有几分钟或几秒钟，过了有效期后，该OTP就会失效，需要重新生成。
OTP的主要用途包括：
  1. 增强账户安全性： OTP作为密码之外的额外验证手段，可以大幅提高账户的安全性。即使密码被泄露，没有相应的OTP，攻击者也无法访问账户。
  2. 两步验证： OTP常用于两步验证（2FA）过程中。用户在输入用户名和密码之后，还需要输入一个由手机应用、短信或硬件令牌生成的OTP。
  3. 交易验证： 在进行敏感操作，如网上银行转账或支付时，OTP可以用来验证操作的真实性，确保是账户持有者本人进行的操作。
  4. 访问控制： OTP可以用于限制对特定服务的访问，例如企业网络的访问，员工需要输入OTP来证明身份。
  5. 临时访问： OTP可以用于给予临时访问权限，例如访客访问企业Wi-Fi网络时，可以通过输入OTP来获得临时的网络接入。
 

二、从 Github 中获取 "two-factor secret" 双重认证密钥

  1. 由于是简单实现，我没有做调用手机摄像头扫码获取二维码中的 code 所以需要点击 `setup key` 来手动获取 code
0
  1. 点击 setup key 会获取一个 code ，复制下来我们使用 Flutter 生成 2fa 动态码的时候需要。
0

三、Flutter 客户端实现

准备环境

  1. Flutter SDK
  2. Android Studio
  3. 一部手机或者使用虚拟机
  4. 使用 Android Studio 创建一个示例项目（本示例在基础示例项目上改造）

引入 otp 组件包

otp 组件包的地址 https://pub.dev/packages/otp
  1. 使用 flutter pub 给项目添加 otp 包
flutter pub add otp
  1. 在项目中引入 otp 包路径
import 'package:otp/otp.dart';
  1. 修改示例项目中的代码。(代码中修改的地方都有注释，请参考我的注释)
import 'package:flutter/material.dart';
import 'package:otp/otp.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  // 这段代码修改从 integer 改为了 string 为了承接验证码
  String _counter = "";
  void _incrementCounter() {
    setState(() {
      // 这段代码修改了
      _counter = OTP.generateTOTPCodeString(
          '此处使用你自己复制下来的code', DateTime.now().millisecondsSinceEpoch,
          algorithm: Algorithm.SHA1, isGoogle: true);
      // _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text(
              '你的2FA验证码为',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headlineMedium,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ), 
    );
  }
}
  1. 启动程序后点击页面中的加号，此时会生成对应的code 。将生成的code 放入github的验证框内即可。
0
0