Flutter一次性密码生成与验证插件flutter_otp的使用

Flutter一次性密码生成与验证插件flutter_otp的使用

插件介绍

flutter_otp 是一个用于在 Flutter 应用中发送和验证一次性密码（OTP）的插件。它支持 Android 和 iOS 平台，并且可以发送自定义消息。

安装

1. 添加依赖

在项目的 pubspec.yaml 文件中添加以下依赖：

dependencies:
  flutter_otp: ^0.3.2

2. 安装依赖

通过命令行安装依赖：

$ flutter pub get

3. 导入包

在 Dart 文件中导入 flutter_otp 包：

import 'package:flutter_otp/flutter_otp.dart';

函数说明

sendOtp()

该函数用于向指定的电话号码发送 OTP。默认情况下，OTP 是四位数字，但可以通过参数进行自定义。

函数签名：

void sendOtp(String phoneNumber, [String messageText])

参数说明：

• phoneNumber: 要接收 OTP 的电话号码（字符串类型）。
• messageText: 自定义的短信内容（可选，默认值为 “Your OTP is : XXXX”）。

示例代码：

// 发送默认格式的 OTP
sendOtp('958347XXXX');

// 发送自定义消息的 OTP
sendOtp('958347XXXX', 'OTP is : ');

resultChecker()

该函数用于验证用户输入的 OTP 是否正确。

函数签名：

bool resultChecker(int enteredOtp)

参数说明：

• enteredOtp: 用户输入的 OTP（整数类型）。

返回值：

• 如果 OTP 正确，返回 true；否则返回 false。

示例代码：

// 验证 OTP
int userEnteredOtp = 1234; // 假设用户输入的 OTP 是 1234
bool isCorrect = resultChecker(userEnteredOtp);
if (isCorrect) {
  print('Success');
} else {
  print('Failure');
}

使用示例

以下是一个完整的示例代码，展示了如何使用 flutter_otp 插件发送和验证 OTP。

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

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

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

class OtpExample extends StatefulWidget {
  @override
  _OtpExampleState createState() => _OtpExampleState();
}

class _OtpExampleState extends State<OtpExample> {
  String _phoneNumber = '958347XXXX'; // 接收 OTP 的电话号码
  int _enteredOtp = 0; // 用户输入的 OTP
  bool _isCorrect = false; // 验证结果

  void _sendOtp() {
    // 发送默认格式的 OTP
    sendOtp(_phoneNumber);

    // 或者发送自定义消息的 OTP
    // sendOtp(_phoneNumber, 'OTP is : ');
  }

  void _verifyOtp() {
    // 验证用户输入的 OTP
    setState(() {
      _isCorrect = resultChecker(_enteredOtp);
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter OTP Example'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ElevatedButton(
              onPressed: _sendOtp,
              child: Text('Send OTP'),
            ),
            SizedBox(height: 20),
            TextField(
              keyboardType: TextInputType.number,
              onChanged: (value) {
                _enteredOtp = int.tryParse(value) ?? 0;
              },
              decoration: InputDecoration(hintText: 'Enter OTP'),
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: _verifyOtp,
              child: Text('Verify OTP'),
            ),
            SizedBox(height: 20),
            Text(
              _isCorrect ? 'Success' : 'Failure',
              style: TextStyle(fontSize: 18, color: _isCorrect ? Colors.green : Colors.red),
            ),
          ],
        ),
      ),
    );
  }
}

说明

1. 发送 OTP：

   • 点击 “Send OTP” 按钮时，调用 sendOtp() 函数发送 OTP。
   • 默认情况下，OTP 是四位数字。

2. 验证 OTP：

   • 用户输入 OTP 后，点击 “Verify OTP” 按钮。
   • 调用 resultChecker() 函数验证 OTP 是否正确。
   • 根据验证结果，显示 “Success” 或 “Failure”。

3. 自定义消息：

   • 可以通过传递第二个参数来自定义 OTP 的短信内容。例如：

     sendOtp('958347XXXX', 'OTP is : ');