Flutter Web 中的 Firebase Phone 身份验证

Posted 2023-02-23

【中文标题】Flutter Web 中的 Firebase Phone 身份验证

【英文标题】：Firebase Phone authentication in Flutter web

【发布时间】：2021-01-17 07:06:24

【问题描述】：

我正在尝试在 Flutter Web 应用程序中使用（Firebase 电话身份验证）手机号码登录，但这不再有效。

我的 pubspec.yaml 代码：

 # firebase_phoneauth: ^0.0.1
  firebase_core: ^0.4.0+9
  firebase_auth: ^0.14.0+5

实际登录代码为：

Future<bool> loginUser(String phone, BuildContext context) async 
    FirebaseAuth _auth = FirebaseAuth.instance;

    _auth.verifyPhoneNumber(
        phoneNumber: phone,
        timeout: Duration(seconds: 60),
        verificationCompleted: (AuthCredential credential) async 
          Navigator.of(context).pop();

          AuthResult result = await _auth.signInWithCredential(credential);

          FirebaseUser user = result.user;

          if (user != null) 
            Navigator.push(
                context,
                MaterialPageRoute(
                    builder: (context) => HomeScreen(
                          user: user,
                        )));
           else 
            print("Error");
          

          //This callback would gets called when verification is done auto maticlly
        ,
        verificationFailed: (AuthException exception) 
          print(exception);
        ,
        codeSent: (String verificationId, [int forceResendingToken]) 
          showDialog(
              context: context,
              barrierDismissible: false,
              builder: (context) 
                return AlertDialog(
                  title: Text("Give the code?"),
                  content: Column(
                    mainAxisSize: MainAxisSize.min,
                    children: <Widget>[
                      TextField(
                        controller: _codeController,
                      ),
                    ],
                  ),
                  actions: <Widget>[
                    FlatButton(
                      child: Text("Confirm"),
                      textColor: Colors.white,
                      color: Colors.blue,
                      onPressed: () async 
                        final code = _codeController.text.trim();
                        AuthCredential credential =
                            PhoneAuthProvider.getCredential(
                                verificationId: verificationId, smsCode: code);

                        AuthResult result =
                            await _auth.signInWithCredential(credential);

                        FirebaseUser user = result.user;

                        if (user != null) 
                          Navigator.push(
                              context,
                              MaterialPageRoute(
                                  builder: (context) => HomeScreen(
                                        user: user,
                                      )));
                         else 
                          print("Error");
                        
                      ,
                    )
                  ],
                );
              );
        ,
        codeAutoRetrievalTimeout: null);
  

错误：

errors.dart:163 Uncaught (in promise) Error: MissingPluginException(No implementation found for method verifyPhoneNumber on channel plugins.flutter.io/firebase_auth)
    at Object.throw_ [as throw] (errors.dart:212)
    at MethodChannel._invokeMethod (platform_channel.dart:157)
    at _invokeMethod.next (<anonymous>)
    at async_patch.dart:45
    at _RootZone.runUnary (zone.dart:1450)
    at _FutureListener.thenAwait.handleValue (future_impl.dart:143)
    at handleValueCallback (future_impl.dart:696)
    at Function._propagateToListeners (future_impl.dart:725)
    at _Future.new.[_completeWithValue] (future_impl.dart:529)
    at async._AsyncCallbackEntry.new.callback (future_impl.dart:567)
    at Object._microtaskLoop (schedule_microtask.dart:41)
    at _startMicrotaskLoop (schedule_microtask.dart:50)
    at async_patch.dart:166

如果你有任何示例代码，我是 Flutter 的初学者，请使用：https://pub.dev/packages/firebase_phoneauth/install

提前致谢。

【参考方案1】：

_auth.verifyPhoneNumber() 仅适用于移动设备。 在 Flutter web 上使用 _auth.signInWithPhoneNumber() 进行电话认证。