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

一、简单的介绍

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

2. 点击 setup key 会获取一个 code ，复制下来我们使用 Flutter 生成 2fa 动态码的时候需要。

三、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

2. 在项目中引入 otp 包路径

import 'package:otp/otp.dart';

3. 修改示例项目中的代码。(代码中修改的地方都有注释，请参考我的注释)

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),
      ), 
    );
  }
}

4. 启动程序后点击页面中的加号，此时会生成对应的code 。将生成的code 放入github的验证框内即可。