如何使用Firebase在Flutter中进行电话身份验证? [英] How to do Phone Authentication in Flutter using Firebase?

问题描述

我搜索了许多网站，但没有找到使用Firebase在Flutter中实现电话身份验证的方法.谁能告诉我该怎么做?

I have searched many websites and I didn't find a way to implement phone authentication in Flutter using Firebase. Can anyone tell me how to this?

推荐答案

详细记录的工作演示项目这里

Well Documented Working Demo project here

下面是详细过程

1. 询问用户的电话号码
2. 从Firebase获取OTP
3. 登录到Firebase

规则

• 登录/登录以相同的方式完成.
• OTP仅用于获取AuthCrendential对象
• AuthCredential对象是用于登录用户的唯一对象. 它可以从verifyPhoneNumber中的verificationCompleted回调函数或PhoneAuthProvider中获得.

Rules

• SignIn/Login is done in the same way.
• The OTP is only used to get AuthCrendential object
• AuthCredential object is the only thing that is used to signIn the user. It is obtained either from verificationCompleted callback function in verifyPhoneNumber or from the PhoneAuthProvider.

(不要担心它是否令人困惑，请继续阅读，您会明白的.)

(Don't worry if it's confusing, keep reading, you'll get it)

1. 用户提供phoneNumber
2. Firebase发送OTP
3. 登录用户
   • 如果带有phoneNumber的SIM卡不在当前运行该应用程序的设备中，
     • 我们必须首先询问OTP并获取AuthCredential对象
     • 接下来，我们可以使用AuthCredential进行登录 即使phoneNumber在设备中
     ，此方法仍然有效
1. User gives the phoneNumber
2. Firebase sends OTP
3. SignIn the user
   • If the SIM card with the phoneNumber is not in the device that is currently running the app,
     • We have to first ask the OTP and get AuthCredential object
     • Next we can use that AuthCredential to signIn This method works even if the phoneNumber is in the device
• 我们可以不使用OTP登录.
• 因为submitPhoneNumber函数中的verificationCompleted回调提供了AuthCredential对象，该对象是登录用户所需的
• 但是在以前的情况下，由于SIM卡不在手机中，因此未调用.
• We can signIn without the OTP.
• because the verificationCompleted callback from submitPhoneNumber function gives the AuthCredential object which is needed to signIn the user
• But in the previous case, it ain't called because the SIM is not in the phone.

功能

• SubmitPhoneNumber

Future<void> _submitPhoneNumber() async {
    /// NOTE: Either append your phone number country code or add in the code itself
    /// Since I'm in India we use "+91 " as prefix `phoneNumber`
    String phoneNumber = "+91 " + _phoneNumberController.text.toString().trim();
    print(phoneNumber);

    /// The below functions are the callbacks, separated so as to make code more readable
    void verificationCompleted(AuthCredential phoneAuthCredential) {
      print('verificationCompleted');
      ...
      this._phoneAuthCredential = phoneAuthCredential;
      print(phoneAuthCredential);
    }

    void verificationFailed(AuthException error) {
      ...
      print(error);
    }

    void codeSent(String verificationId, [int code]) {
      ...
      print('codeSent');
    }

    void codeAutoRetrievalTimeout(String verificationId) {
      ...
      print('codeAutoRetrievalTimeout');
    }

    await FirebaseAuth.instance.verifyPhoneNumber(
      /// Make sure to prefix with your country code
      phoneNumber: phoneNumber,

      /// `seconds` didn't work. The underlying implementation code only reads in `milliseconds`
      timeout: Duration(milliseconds: 10000),

      /// If the SIM (with phoneNumber) is in the current device this function is called.
      /// This function gives `AuthCredential`. Moreover `login` function can be called from this callback
      verificationCompleted: verificationCompleted,

      /// Called when the verification is failed
      verificationFailed: verificationFailed,

      /// This is called after the OTP is sent. Gives a `verificationId` and `code`
      codeSent: codeSent,

      /// After automatic code retrival `tmeout` this function is called
      codeAutoRetrievalTimeout: codeAutoRetrievalTimeout,
    ); // All the callbacks are above
  }

• SubmitOTP

void _submitOTP() {
    /// get the `smsCode` from the user
    String smsCode = _otpController.text.toString().trim();

    /// when used different phoneNumber other than the current (running) device
    /// we need to use OTP to get `phoneAuthCredential` which is inturn used to signIn/login
    this._phoneAuthCredential = PhoneAuthProvider.getCredential(
        verificationId: this._verificationId, smsCode: smsCode);

    _login();
  }

• 登录/登录

Future<void> _login() async {
    /// This method is used to login the user
    /// `AuthCredential`(`_phoneAuthCredential`) is needed for the signIn method
    /// After the signIn method from `AuthResult` we can get `FirebaserUser`(`_firebaseUser`)
    try {
      await FirebaseAuth.instance
          .signInWithCredential(this._phoneAuthCredential)
          .then((AuthResult authRes) {
        _firebaseUser = authRes.user;
        print(_firebaseUser.toString());
      });
      ...
    } catch (e) {
      ...
      print(e.toString());
    }
  }

• 注销

  Future<void> _logout() async {
    /// Method to Logout the `FirebaseUser` (`_firebaseUser`)
    try {
      // signout code
      await FirebaseAuth.instance.signOut();
      _firebaseUser = null;
      ...
    } catch (e) {
      ...
      print(e.toString());
    }
  }

有关实现的更多详细信息，请参阅lib/main.dart文件此处.

For more details on implementation please refer to the lib/main.dart file here.

如果发现问题，欢迎对此答案和此回购自述文件进行修改

If you found issues, edits are welcome to this answer and to this repo README

这篇关于如何使用Firebase在Flutter中进行电话身份验证?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！