dart 在otp文本字段中自动填充otp的问题

tkclm6bt  于 2023-05-04  发布在  其他
关注(0)|答案(1)|浏览(210)

在我的flutter程序中,我有一个包含两个方法的类。一个使用firebase phone auth登录到应用程序,另一个验证从登录中获得的otp。这就是课堂

class AuthController{

  signInWithPhoneNumber(String code,)async{
    String res = '';
    try{
      await _auth.verifyPhoneNumber(
        phoneNumber: code,
        timeout: const Duration(seconds: 30),
        verificationCompleted: (PhoneAuthCredential credential) async{
          await _auth.signInWithCredential(credential);
          res = 'Success';
        },
        verificationFailed: (FirebaseAuthException e) {
          if (e.code == 'invalid-phone-number'){
            res = 'Phone number not valid';
          }else{
            res = e.toString();
          }
        },
        codeSent: (String verificationId, int? resendToken) async{

          _verificationId = verificationId;
          // PhoneAuthCredential credential = PhoneAuthProvider.credential(verificationId: _verificationId, smsCode: otp);
          //
          // // Sign the user in (or link) with the credential
          // await _auth.signInWithCredential(credential);
        },
        codeAutoRetrievalTimeout: (String verificationId) {

        },
      );
    }catch(e){
      print('the error isss ${e.toString()}');
    }

    return res;
  }

  verifyOTP(String otp)async{
    String res = '';
    try{
      PhoneAuthCredential credential = PhoneAuthProvider.credential(verificationId: _verificationId, smsCode: otp);

      // Sign the user in (or link) with the credential
      await _auth.signInWithCredential(credential).whenComplete((){
        res = 'Success';
      });
    }catch(e){
      print('the error issss ${e.toString()}');
    }

    return res;
  }

}

在我的代码的一部分中,我能够使用signInwithPhoneNumber函数成功地登录,并且我得到了我的OTP。我现在的问题是,当我得到我的otp时,我希望它自动填充到otpTextForm中。我已经尝试使用一切,我是相当新的电话号码方面的firebase无论如何。这是我的OTP文本字段。

import 'package:flutter/material.dart';
import 'package:flutter_svg/svg.dart';
import 'package:geepx/auth_controller/auth_controller.dart';
import 'package:geepx/utils/snack.dart';
import 'package:google_fonts/google_fonts.dart';
import 'package:otp_text_field/otp_field.dart';
import 'package:otp_text_field/style.dart';
class OTPScreen extends StatefulWidget {
  static const String routeName = 'OTPScreen';
  final String code;
  const OTPScreen({Key? key, required this.code}) : super(key: key);

  @override
  State<OTPScreen> createState() => _OTPScreenState();
}

class _OTPScreenState extends State<OTPScreen> {
   late String otp;
  AuthController _authController = AuthController();
  _useOtp()async{
  String res =  await _authController.verifyOTP(otp);
  if(res == 'Success'){
    Navigator.pushNamedAndRemoveUntil(context, 'MainHome', (route) => false);
  }else{
    snack(context, 'something went wrong');
  }
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            SizedBox(
              height: MediaQuery.of(context).size.height*0.18,
            ),
            SvgPicture.asset('assets/icons/GEEPX LOGO 1.svg'),
            const SizedBox(
              height: 38,
            ),
            Text('Your phone number',
                style: GoogleFonts.roboto(
                    fontSize: 24,
                    fontWeight: FontWeight.w400
                )
            ),
            const SizedBox(
              height: 20,
            ),
            Text('We\'ve sent an SMS with an activation code to your',
              style: GoogleFonts.roboto(
                  fontSize: 16.5,
                  fontWeight: FontWeight.w400,
                  color: Color(0xff74777F)
              ),
            ),
            Text('phone ${widget.code}',
              style: GoogleFonts.roboto(
                  fontSize: 16.5,
                  fontWeight: FontWeight.w400,
                  color: Color(0xff74777F)
              ),
            ),
            const SizedBox(
              height: 25,
            ),
         OTPTextField(
          length: 6,
          width: MediaQuery.of(context).size.width*0.8,
          textFieldAlignment: MainAxisAlignment.spaceAround,
          fieldWidth: 45,
          fieldStyle: FieldStyle.box,
          outlineBorderRadius: 15,
          style: GoogleFonts.roboto(fontSize: 17),
          onChanged: (v){
            otp = v;
          },
          onCompleted: (pin) {
            otp = pin;
            _useOtp();
          }
          ),
      ]
        )
      ),
      floatingActionButton: TextButton(
          onPressed: (){
            _useOtp();
          }, child: Text('Click here if it did not send automatically')
      )
    );
  }
}

有没有一种方法可以自动填充文本字段。请回答真的可以接受

uqjltbpv

uqjltbpv1#

目前,您将收到一条如下所示的文本消息:

839077 is your verification code.
SYjNp5QJPBB

为了让文本自动填充到应用程序中,您需要合并特定于平台的代码。在Android中,它将是SMS Retriever API。在iOS上,它将是带有关联域的password autofill选项。
另一个可以考虑的选择是使用Firebase UI Auth,它已经在应用程序中内置了此功能。

相关问题