仅在Flutter应用中使用电话号码进行首次身份验证

时间:2020-06-15 10:59:06

标签: flutter firebase-authentication

我是移动应用开发的新手。我正在尝试构建一个要求用户注册电话号码的应用程序。我正在使用Firebase进行身份验证。我已经能够用电话号码注册用户。但是,我希望应用程序首次注册用户,并且在进一步加载后,应该显示主页。同样,如果用户在移动设备中更改其电话号码,则应该再次要求他注册新的电话号码。 我在这里尝试过一些东西...

class _State extends State<MyAppPage> {
  String phoneNo;
  String smsOTP;
  String verificationId;
  String errorMessage = '';
  FirebaseAuth _auth = FirebaseAuth.instance;

  Future<void> verifyPhone() async {
    final PhoneCodeSent smsOTPSent = (String verId, [int forceCodeResend]) {
      this.verificationId = verId;
      smsOTPDialog(context).then((value) {
        print('Sign in');
      });
    };
    try {
      await _auth.verifyPhoneNumber(
        phoneNumber: this.phoneNo, 
        timeout: const Duration(seconds:20), 
        verificationCompleted: (AuthCredential phoneAuthCredential) {
          print(phoneAuthCredential);
        }, 
        verificationFailed: (AuthException exceptio) {
          print('${exceptio.message}');
        }, 
        codeSent: smsOTPSent, 
        codeAutoRetrievalTimeout: (String verId) {
          this.verificationId = verId;
        });
    } catch(e) {
      handleError(e);
    }
  }

  Future<bool> smsOTPDialog(BuildContext context) {
    return showDialog(
      context: context,
      barrierDismissible: false,
      builder: (BuildContext context) {
        return new AlertDialog(
          title: Text('Enter SMS Code'),
          content: Container(
            height: 85,
            child: Column(children: [
              TextField(
                onChanged: (value) {
                  this.smsOTP = value;
                },
              ),
              (errorMessage != ''
                ? Text(
                    errorMessage,
                    style: TextStyle(color: Colors.red),
                  )
                : Container()
              )
            ]),
          ),
          contentPadding: EdgeInsets.all(10),
          actions: <Widget>[
            FlatButton(
              child: Text('Done'),
              onPressed: () {
                _auth.currentUser().then((user) {
                  if(user != null) {
                    Navigator.of(context).pop();
                    Navigator.of(context).pushReplacementNamed('/homepage');
                  }
                  else {
                    signIn();
                  }
                });
              },
            )
          ],
        );
      }
    );
  }

  signIn() async {
    try {
      final AuthCredential credential = PhoneAuthProvider.getCredential(
        verificationId: verificationId, 
        smsCode: smsOTP,
      );
      final FirebaseUser user = (await _auth.signInWithCredential(credential)).user;
      final FirebaseUser currentUser = await _auth.currentUser();
      assert(user.uid == currentUser.uid);
      Navigator.of(context).pop();
      Navigator.of(context).pushReplacementNamed('/homepage');
    }
    catch (e) {
      handleError(e);
    }
  }

  handleError(PlatformException error) {
    print(error);
    switch (error.code) {
      case 'ERROR_INVALID_VERIFICATION_CODE':
      FocusScope.of(context).requestFocus(new FocusNode());
      setState(() {
        errorMessage = 'Invalid Code';
      });
      Navigator.of(context).pop();
      smsOTPDialog(context).then((value) {
        print('Sign In');
      });
      break;
      default:
      setState(() {
        errorMessage = error.message;
      });
      break;
    }
  }

UI如下。

Widget build(BuildContext context) {    
        return Scaffold(    
            appBar: AppBar(    
            title: Text('Phone Authentication'),    
            ),    
            body: Center(    
            child: Column(    
                mainAxisAlignment: MainAxisAlignment.center,    
                children: <Widget>[    
                Padding(    
                    padding: EdgeInsets.all(10),    
                    child: TextField(    
                    decoration: InputDecoration(    
                        hintText: 'Enter Phone Number Eg. +910000000000'),    
                    onChanged: (value) {    
                        this.phoneNo = value;    
                    },    
                    ),    
                ),    
                (errorMessage != ''    
                    ? Text(    
                        errorMessage,    
                        style: TextStyle(color: Colors.red),    
                        )    
                    : Container()),    
                SizedBox(    
                    height: 10,    
                ),    
                RaisedButton(    
                    onPressed: () {    
                    verifyPhone();    
                    },    
                    child: Text('Verify'),    
                    textColor: Colors.white,    
                    elevation: 7,    
                    color: Colors.blue,    
                )    
                ],    
            ),    
            ),    
        );    
    }

问题是,firebase首次使用设备中的电话号码对新用户进行了身份验证,但在重新打开应用程序时再次询问了电话号码。同样在提供电话号码时,firebase并未发送OTP,因为用户已通过身份验证。 感谢您的帮助。预先感谢。.

0 个答案:

没有答案