Flutter电话号码验证插件twilio_phone_verify的使用

twilio_phone_verify 是一个用于通过 Twilio 验证电话号码和电子邮件地址的 Flutter 插件。

使用方法

添加依赖

首先，在 pubspec.yaml 文件中添加该插件的依赖：

dependencies:
  flutter:
    sdk: flutter
  twilio_phone_verify:

初始化插件

创建并初始化一个新的 TwilioPhoneVerify 对象，替换相应的 SID 和 Token：

TwilioPhoneVerify _twilioPhoneVerify = TwilioPhoneVerify(
    accountSid: 'your_account_sid', // 替换为您的 Account SID
    authToken: 'your_auth_token',   // 替换为您的 Auth Token
    serviceSid: 'your_service_sid'  // 替换为您的 Service SID
);

电话号码验证

发送验证码到手机

发送验证码到指定的手机号码：

var twilioResponse = await _twilioPhoneVerify.sendSmsCode('phone_number');

if (twilioResponse.successful) {
    // 验证码已发送
} else {
    print(twilioResponse.errorMessage);
}

验证验证码

验证用户输入的验证码是否正确：

var twilioResponse = await _twilioPhoneVerify.verifySmsCode(
    phone: 'phone_number', 
    code: 'user_entered_code'
);

if (twilioResponse.successful) {
    if (twilioResponse.verification.status == VerificationStatus.approved) {
        print('Phone number is approved');
    } else {
        print('Invalid code');
    }
} else {
    print(twilioResponse.errorMessage);
}

完整示例 Demo

以下是一个完整的 Flutter 应用程序示例，演示如何使用 twilio_phone_verify 插件进行电话号码验证：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Twilio Phone Verify',
      theme: ThemeData(
        primaryColor: Color(0xFF233659),
      ),
      home: PhoneVerification(),
    );
  }
}

enum VerificationState { enterPhone, enterSmsCode }

class PhoneVerification extends StatefulWidget {
  @override
  _PhoneVerificationState createState() => _PhoneVerificationState();
}

class _PhoneVerificationState extends State<PhoneVerification> {
  TwilioPhoneVerify _twilioPhoneVerify;

  var verificationState = VerificationState.enterPhone;
  var phoneNumberController = TextEditingController();
  var smsCodeController = TextEditingController();
  bool loading = false;
  String errorMessage;
  String successMessage;

  @override
  void initState() {
    super.initState();
    _twilioPhoneVerify = TwilioPhoneVerify(
        accountSid: 'your_account_sid',
        serviceSid: 'your_service_sid',
        authToken: 'your_auth_token');
  }

  @override
  Widget build(BuildContext context) {
    return verificationState == VerificationState.enterPhone
        ? _buildEnterPhoneNumber()
        : _buildEnterSmsCode();
  }

  void changeErrorMessage(var message) => setState(() => errorMessage = message);

  void changeSuccessMessage(var message) => setState(() => successMessage = message);

  void changeLoading(bool status) => setState(() => loading = status);

  void switchToSmsCode() async {
    changeSuccessMessage(null);
    changeErrorMessage(null);
    changeLoading(false);
    setState(() {
      verificationState = VerificationState.enterSmsCode;
    });
  }

  void switchToPhoneNumber() {
    if (loading) return;
    changeSuccessMessage(null);
    changeErrorMessage(null);
    setState(() {
      verificationState = VerificationState.enterPhone;
    });
  }

  void sendCode() async {
    if (phoneNumberController.text.isEmpty || loading) return;
    changeLoading(true);
    TwilioResponse twilioResponse =
        await _twilioPhoneVerify.sendSmsCode(phoneNumberController.text);

    if (twilioResponse.successful) {
      changeSuccessMessage('Code sent to ${phoneNumberController.text}');
      await Future.delayed(Duration(seconds: 1));
      switchToSmsCode();
    } else {
      changeErrorMessage(twilioResponse.errorMessage);
    }
    changeLoading(false);
  }

  void verifyCode() async {
    if (phoneNumberController.text.isEmpty ||
        smsCodeController.text.isEmpty ||
        loading) return;
    changeLoading(true);
    TwilioResponse twilioResponse = await _twilioPhoneVerify.verifySmsCode(
        phone: phoneNumberController.text, code: smsCodeController.text);
    if (twilioResponse.successful) {
      if (twilioResponse.verification.status == VerificationStatus.approved) {
        changeSuccessMessage('Phone number is approved');
      } else {
        changeSuccessMessage('Invalid code');
      }
    } else {
      changeErrorMessage(twilioResponse.errorMessage);
    }
    changeLoading(false);
  }

  Widget _buildEnterPhoneNumber() {
    return Scaffold(
      body: Padding(
        padding: const EdgeInsets.all(40.0),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            TextField(
              controller: phoneNumberController,
              keyboardType: TextInputType.phone,
              decoration: InputDecoration(labelText: 'Enter Phone Number'),
            ),
            SizedBox(height: 20),
            Container(
              width: double.infinity,
              height: 40,
              child: TextButton(
                  onPressed: sendCode,
                  style: TextButton.styleFrom(
                      backgroundColor: Theme.of(context).primaryColor),
                  child: loading
                      ? _loader()
                      : Text(
                          'Send code',
                          style: TextStyle(color: Colors.white),
                        )),
            ),
            if (errorMessage != null) ...[
              SizedBox(height: 30),
              _errorWidget()
            ],
            if (successMessage != null) ...[
              SizedBox(height: 30),
              _successWidget()
            ]
          ],
        ),
      ),
    );
  }

  Widget _buildEnterSmsCode() {
    return Scaffold(
      appBar: AppBar(
        elevation: 0,
        backgroundColor: Colors.transparent,
        leading: IconButton(
          icon: Icon(Icons.arrow_back_ios, size: 18, color: Theme.of(context).primaryColor),
          onPressed: switchToPhoneNumber,
        ),
      ),
      body: Padding(
        padding: const EdgeInsets.all(40.0),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            TextField(
              controller: smsCodeController,
              keyboardType: TextInputType.number,
              decoration: InputDecoration(labelText: 'Enter Sms Code'),
            ),
            SizedBox(height: 20),
            Container(
              width: double.infinity,
              height: 40,
              child: TextButton(
                  onPressed: verifyCode,
                  style: TextButton.styleFrom(
                      backgroundColor: Theme.of(context).primaryColor),
                  child: loading
                      ? _loader()
                      : Text(
                          'Verify',
                          style: TextStyle(color: Colors.white),
                        )),
            ),
            if (errorMessage != null) ...[
              SizedBox(height: 30),
              _errorWidget()
            ],
            if (successMessage != null) ...[
              SizedBox(height: 30),
              _successWidget()
            ]
          ],
        ),
      ),
    );
  }

  Widget _loader() => SizedBox(
        height: 15,
        width: 15,
        child: CircularProgressIndicator(strokeWidth: 2, valueColor: AlwaysStoppedAnimation(Colors.white)),
      );

  Widget _errorWidget() => Material(
        borderRadius: BorderRadius.circular(5),
        color: Colors.red.withOpacity(.1),
        child: Padding(
          padding: EdgeInsets.symmetric(vertical: 10, horizontal: 15),
          child: Row(
            children: [
              Expanded(child: Text(errorMessage, style: TextStyle(color: Colors.red))),
              IconButton(icon: Icon(Icons.close, size: 16), onPressed: () => changeErrorMessage(null))
            ],
          ),
        ),
      );

  Widget _successWidget() => Material(
        borderRadius: BorderRadius.circular(5),
        color: Colors.green.withOpacity(.1),
        child: Padding(
          padding: EdgeInsets.symmetric(vertical: 10, horizontal: 15),
          child: Row(
            children: [
              Expanded(child: Text(successMessage, style: TextStyle(color: Colors.green))),
              IconButton(icon: Icon(Icons.close, size: 16), onPressed: () => changeSuccessMessage(null))
            ],
          ),
        ),
      );
}

以上示例展示了如何在 Flutter 应用中集成 Twilio 的电话号码验证功能。确保替换所有占位符（如 your_account_sid, your_auth_token, your_service_sid）为您实际的 Twilio 凭据。