Flutter一次性密码(OTP)生成与验证插件dart_dash_otp的使用

发布于 1周前 作者 bupafengyu 来自 Flutter

Flutter一次性密码(OTP)生成与验证插件 dart_dash_otp 的使用

dart_dash_otp 是一个用于生成和验证一次性密码(OTP)的Dart包,适用于实现双因素认证(2FA)或多因素认证(MFA)。该包基于RFC4226(HOTP: An HMAC-Based One-Time Password Algorithm)和RFC6238(TOTP: Time-Based One-Time Password Algorithm)标准。

安装

在您的 pubspec.yaml 文件中添加 dart_dash_otp 作为依赖项:

dependencies:
  dart_dash_otp: ^1.3.2

然后运行 flutter pub get 来安装依赖。

示例代码

时间基于的 OTP (TOTP)

下面是一个简单的示例,演示如何创建并验证时间基于的一次性密码(TOTP):

import 'package:dart_dash_otp/dart_dash_otp.dart';

void main() {
  // 默认初始化,时间为30秒间隔,6位数令牌
  TOTP totp = TOTP(secret: "J22U6B3WIWRRBTAV");

  // 自定义初始化,时间为60秒间隔,8位数令牌
  // TOTP totp = TOTP(secret: "J22U6B3WIWRRBTAV", interval: 60, digits: 8);

  // 获取当前时间的一次性密码
  String currentOtp = totp.now();
  print('Current OTP: $currentOtp');

  // 验证当前时间的一次性密码
  bool isValidNow = totp.verify(otp: int.parse(currentOtp));
  print('Is valid now: $isValidNow');

  // 假设过了30秒后尝试验证同一个OTP
  // 注意:这里为了演示简化处理,并未实际等待30秒
  bool isValidAfterInterval = totp.verify(otp: int.parse(currentOtp), date: DateTime.now().add(Duration(seconds: 30)));
  print('Is valid after interval: $isValidAfterInterval');
}

计数器基于的 OTP (HOTP)

接下来是一个计数器基于的OTP(HOTP)的例子:

import 'package:dart_dash_otp/dart_dash_otp.dart';

void main() {
  // 默认初始化,6位数令牌
  HOTP hotp = HOTP(secret: "J22U6B3WIWRRBTAV");

  // 自定义初始化,设置初始计数器为50,8位数令牌
  // HOTP hotp = HOTP(secret: "J22U6B3WIWRRBTAV", counter: 50, digits: 8);

  // 根据计数器获取一次性密码
  String otpAtCounter0 = hotp.at(counter: 0).toString();
  String otpAtCounter2019 = hotp.at(counter: 2019).toString();

  print('OTP at counter 0: $otpAtCounter0');
  print('OTP at counter 2019: $otpAtCounter2019');

  // 验证特定计数器下的一次性密码
  bool isValidAt2019 = hotp.verify(otp: int.parse(otpAtCounter2019), counter: 2019);
  print('Is valid at counter 2019: $isValidAt2019');
}

通过上述示例,您可以了解到如何在Flutter应用中使用 dart_dash_otp 包来生成和验证一次性密码。无论是基于时间还是基于计数器的OTP,都可以帮助增强应用程序的安全性。


更多关于Flutter一次性密码(OTP)生成与验证插件dart_dash_otp的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter一次性密码(OTP)生成与验证插件dart_dash_otp的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然,下面是一个关于如何在Flutter中使用dart_dash_otp插件来生成和验证一次性密码(OTP)的示例代码。这个插件可以帮助你轻松实现OTP功能。

首先,确保你已经在你的pubspec.yaml文件中添加了dart_dash_otp依赖:

dependencies:
  flutter:
    sdk: flutter
  dart_dash_otp: ^最新版本号  # 请替换为实际的最新版本号

然后运行flutter pub get来安装依赖。

接下来是一个简单的示例,展示如何生成OTP和验证OTP。

1. 生成OTP

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: OTPScreen(),
    );
  }
}

class OTPScreen extends StatefulWidget {
  @override
  _OTPScreenState createState() => _OTPScreenState();
}

class _OTPScreenState extends State<OTPScreen> {
  String otp = "";

  void generateOTP() async {
    // 生成6位数字OTP
    int length = 6;
    otp = await OTPGenerator.generateOTP(length);
    setState(() {});
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("OTP Example"),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text("Generated OTP: $otp"),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: generateOTP,
              child: Text("Generate OTP"),
            ),
          ],
        ),
      ),
    );
  }
}

2. 验证OTP

为了验证OTP,你可以设置一个简单的验证逻辑。在这个示例中,我们假设用户输入的OTP将与生成的OTP进行比较。

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: OTPScreen(),
    );
  }
}

class OTPScreen extends StatefulWidget {
  @override
  _OTPScreenState createState() => _OTPScreenState();
}

class _OTPScreenState extends State<OTPScreen> {
  String otp = "";
  String userInput = "";
  bool isVerified = false;

  void generateOTP() async {
    // 生成6位数字OTP
    int length = 6;
    otp = await OTPGenerator.generateOTP(length);
    setState(() {});
  }

  void verifyOTP() {
    // 验证用户输入的OTP
    setState(() {
      isVerified = otp == userInput;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("OTP Example"),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text("Generated OTP: $otp"),
            SizedBox(height: 20),
            TextField(
              decoration: InputDecoration(labelText: "Enter OTP"),
              onChanged: (value) {
                setState(() {
                  userInput = value;
                });
              },
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: generateOTP,
              child: Text("Generate OTP"),
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: verifyOTP,
              child: Text("Verify OTP"),
            ),
            SizedBox(height: 20),
            Text(isVerified ? "OTP Verified" : "OTP Not Verified"),
          ],
        ),
      ),
    );
  }
}

在这个示例中,OTPGenerator.generateOTP(length)方法用于生成指定长度的OTP。用户输入的OTP会存储在userInput变量中,并通过verifyOTP方法与生成的OTP进行比较。根据比较结果,更新isVerified状态以显示验证结果。

请根据你的实际需求调整代码,并确保在实际应用中考虑安全性,例如使用HTTPS传输OTP,限制OTP的尝试次数等。

回到顶部