Flutter自动短信验证插件auto_sms_verification的使用

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

Flutter自动短信验证插件auto_sms_verification的使用

auto_sms_verification 插件可以帮助你在Android应用中实现基于SMS的用户自动验证，无需用户手动输入验证码，并且不需要任何额外的应用权限。

开始使用

导入包

首先，需要在你的Dart文件中导入 auto_sms_verification 包：

import 'package:auto_sms_verification/auto_sms_verification.dart';
获取签名代码

请将此签名代码添加到OTP短信的末尾：

var appSignature = await AutoSmsVerification.appSignature();
添加小部件

监听SMS；它会返回SMS文本，你可以用它来提取OTP：

void _startListeningOtpCode() async {  
  var sms = await AutoSmsVerification.startListeningSms(); 
  _smsCode = getCode(sms) ?? '';
}

在 initState 函数中调用该函数：

[@override](/user/override)  
void initState() {  
  super.initState(); 
  _startListeningOtpCode();
}

确保在 dispose 函数中停止监听SMS，以防止内存泄漏和不必要的后台进程：

[@override](/user/override)  
void dispose() { 
  AutoSmsVerification.stopListening(); 
  super.dispose(); 
}
从SMS解析OTP
String? getCode(String? sms) {  
  if (sms != null) { 
    final intRegex = RegExp(r'\d+', multiLine: true); 
    final code = intRegex.allMatches(sms).first.group(0); 
    return code; 
  } 
  return null;
}
示例短信
<#> MyApp: your one time code is 5664  
fr4edrDVWsr

完整示例Demo

以下是一个完整的Flutter应用程序示例，展示如何使用 auto_sms_verification 插件：

import 'dart:async';
import 'package:auto_sms_verification/auto_sms_verification.dart';
import 'package:flutter/material.dart';

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

class MyApp extends StatefulWidget {
  const MyApp({Key? key}) : super(key: key);

  [@override](/user/override)
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  String _smsCode = "";

  [@override](/user/override)
  void initState() {
    super.initState();
    initPlatformState();
  }

  [@override](/user/override)
  void dispose() {
    // 停止监听SMS，防止内存泄漏
    AutoSmsVerification.stopListening();
    super.dispose();
  }

  Future<void> initPlatformState() async {
    // 获取应用签名
    var appSignature = await AutoSmsVerification.appSignature();
    print(['appSignature is ', appSignature]);

    // 开始监听SMS并获取验证码
    var smsCode = await AutoSmsVerification.startListeningSms();
    setState(() {
      _smsCode = getCode(smsCode) ?? '';
    });
  }

  // 解析SMS中的数字码
  String? getCode(String? sms) {
    print("SMS: ${sms}");
    if (sms != null) {
      final intRegex = RegExp(r'\d+', multiLine: true);
      final code = intRegex.allMatches(sms).first.group(0);
      return code;
    }
    return null;
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Plugin example app'),
        ),
        body: Center(
          child: Text('SMS Code is: $_smsCode\n'),
        ),
      ),
    );
  }
}

更多关于Flutter自动短信验证插件auto_sms_verification的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

Harmonyos Next教程
1 回复

更多关于Flutter自动短信验证插件auto_sms_verification的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，以下是如何在Flutter项目中使用auto_sms_verification插件的一个基本示例。这个插件允许你自动读取和验证短信验证码，简化了用户输入验证码的步骤。

首先，你需要在pubspec.yaml文件中添加auto_sms_verification依赖：

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

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

接下来，在你的Flutter应用中配置和使用auto_sms_verification插件。下面是一个简单的示例代码：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Auto SMS Verification Example'),
        ),
        body: Center(
          child: AutoSmsVerificationExample(),
        ),
      ),
    );
  }
}

class AutoSmsVerificationExample extends StatefulWidget {
  @override
  _AutoSmsVerificationExampleState createState() => _AutoSmsVerificationExampleState();
}

class _AutoSmsVerificationExampleState extends State<AutoSmsVerificationExample> {
  late AutoSmsVerification _autoSmsVerification;
  String? _verificationCode;
  bool _isVerified = false;

  @override
  void initState() {
    super.initState();
    _autoSmsVerification = AutoSmsVerification();

    // 请求权限并开始监听短信
    _requestPermissionsAndStartListening();
  }

  void _requestPermissionsAndStartListening() async {
    // 请求短信读取权限（根据平台不同，可能需要用户手动授予）
    bool hasPermission = await _autoSmsVerification.requestSmsPermission();
    if (hasPermission) {
      // 开始监听短信验证码
      _autoSmsVerification.startSmsListener(
        onCodeReceived: (code) {
          // 当接收到短信验证码时调用
          setState(() {
            _verificationCode = code;
            _isVerified = true;
          });
          print("Received verification code: $code");
        },
        onError: (error) {
          // 当监听短信时发生错误时调用
          print("Error: $error");
        },
      );
    } else {
      print("SMS permission denied.");
    }
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        Text(
          "Verification Code: $_verificationCode",
          style: TextStyle(fontSize: 20),
        ),
        SizedBox(height: 20),
        Text(
          _isVerified ? "Verified!" : "Waiting for verification code...",
          style: TextStyle(fontSize: 20, color: _isVerified ? Colors.green : Colors.grey),
        ),
      ],
    );
  }

  @override
  void dispose() {
    // 停止监听短信
    _autoSmsVerification.stopSmsListener();
    super.dispose();
  }
}

注意事项：

  1. 权限请求：在Android上，你需要在AndroidManifest.xml中添加读取短信的权限。在iOS上，由于隐私保护，可能需要用户手动授予权限。

  2. 插件限制：这个插件的功能和可用性可能因设备和操作系统版本而异。确保在目标平台上进行充分的测试。

  3. 安全性：自动读取短信验证码可能会带来安全风险，确保在合适的场景下使用，并考虑用户隐私和数据安全。

  4. 错误处理：在实际应用中，添加更多的错误处理和用户提示，以提高用户体验。

这个示例代码展示了如何初始化auto_sms_verification插件，请求权限，开始监听短信，并在接收到验证码时更新UI。希望这对你有所帮助！

回到顶部