TypeError: dart.global.FacebookAuth is not a constructor

Klabauterman commented 3 years ago

Describe the bug Getting this stacktrace on startup of my webapp, although the following script was added to the index.html

<body>

  <script>
      var FACEBOOK_APP_ID = "1541669779240401";
      window.fbAsyncInit = function () {
        FB.init({
          appId: FACEBOOK_APP_ID,
          cookie: true,
          xfbml: true,
          version: "v9.0",
        });
        FB.AppEvents.logPageView();
      };
    </script>
  <script async defer crossorigin="anonymous" src="https://connect.facebook.net/en_US/sdk.js" ></script>
  <script src="flutter_facebook_auth.js" type="application/javascript" ></script>

Environment [✓] Flutter (Channel stable, 2.0.2, on macOS 11.0.1 20B50 darwin-x64, locale de-DE) • Flutter version 2.0.2 at /Users/christiankirst/development/flutter • Framework revision 8962f6dc68 (10 days ago), 2021-03-11 13:22:20 -0800 • Engine revision 5d8bf811b3 • Dart version 2.12.1

flutter_facebook_auth: 3.1.1

darwin-morocho commented 3 years ago

Hi @Klabauterman Have you added the flutter_facebook_auth.js file in your web folder?.

Please check the example folder.

Also please add the complete index.html

Klabauterman commented 3 years ago

Thanks for the quick response, I indeed forgot to add the flutter_facebook_auth.js file. Now it works!

Abhishek01039 commented 3 years ago

Hello @Klabauterman and @darwin-morocho from where have you found flutter_facebook_auth.js file?

darwin-morocho commented 3 years ago

flutter_facebook_auth.js file

Hi @Abhishek01039 since flutter_facebook_auth: ^3.3.2 the flutter_facebook_auth.js file is not need it any more because this plugin now uses the allowInterop method to handle the facebook javascript SDK responses. Now you need to initialize the web sdk in your main function.

void main() {
  // check if is running on Web
  if (kIsWeb) {
    // initialiaze the facebook javascript SDK
    FacebookAuth.instance.webInitialize(
      appId: "1329834907365798",//<-- YOUR APP_ID
      cookie: true,
      xfbml: true,
      version: "v9.0",
    );
  }
  runApp(MyApp());
}

For more info go to https://facebook.meedu.app/#/web

Also you can download a previous version of this plugin https://github.com/darwin-morocho/flutter-facebook-auth/releases/tag/v2.0.1 and go to the example/web folder and find the flutter_facebook_auth.js file

Abhishek01039 commented 3 years ago

Yeah great, Thanks, @darwin-morocho for your help and now it is working fine. how we should handle the exception while login with Facebook?

 switch (e.errorCode) {
        case FacebookAuthErrorCode.OPERATION_IN_PROGRESS:
          throw Exception(Message.previousLoginOperation);
        case FacebookAuthErrorCode.CANCELLED:
          throw Exception(Message.loginCancel);
        case FacebookAuthErrorCode.FAILED:
          throw Exception(Message.loginFailed);
        default:
          throw Exception(Message.genericLoginErrorMessage);
      }

we have this in previous versions.

darwin-morocho commented 3 years ago

Yeah great, Thanks, @darwin-morocho for your help and now it is working fine. how we should handle the exception while login with Facebook?

 switch (e.errorCode) {
        case FacebookAuthErrorCode.OPERATION_IN_PROGRESS:
          throw Exception(Message.previousLoginOperation);
        case FacebookAuthErrorCode.CANCELLED:
          throw Exception(Message.loginCancel);
        case FacebookAuthErrorCode.FAILED:
          throw Exception(Message.loginFailed);
        default:
          throw Exception(Message.genericLoginErrorMessage);
      }

we have this in previous versions.

You need to use

 final LoginResult result = await FacebookAuth.instance.login();
 if (result.status == LoginStatus.success) {
    final accessToken = result.accessToken;
  } else {
    print(result.status);
    print(result.message);
  }

Abhishek01039 commented 3 years ago

I am trying this.

darwin-morocho commented 3 years ago

I am trying this.

https://facebook.meedu.app/#/migration-guide

The FacebookAuthException class was removed and you don't need use any more a try and catch

Abhishek01039 commented 3 years ago

Thanks @darwin-morocho Thanks again for your quick response.

darwin-morocho commented 3 years ago

I am trying this.

https://facebook.meedu.app/#/migration-guide

The FacebookAuthException class was removed and you don't need use any more a try and catch

Just use

 if (result.status == LoginStatus.success) {
      _accessToken = result.accessToken;
      _printCredentials();
      // get the user data
      // by default we get the userId, email,name and picture
      final userData = await FacebookAuth.instance.getUserData();
      // final userData = await FacebookAuth.instance.getUserData(fields: "email,birthday,friends,gender,link");
      _userData = userData;
    } else if(result.status == LoginStatus.failed) {
      print(result.message);
    }else if(result.status == LoginStatus.cancelled) {
      print(result.message);
    }

Abhishek01039 commented 3 years ago

Thanks 😊

Abhishek01039 commented 3 years ago

Hello @darwin-morocho

what URL should I put here? I am just trying locally now. And Any other configuration needed for our flutter web app? because I am getting this error

The method FB.login can no longer be called from http pages. https://developers.facebook.com/blog/post/2018/06/08/enforce-https-facebook-login/

darwin-morocho commented 3 years ago

Hello @darwin-morocho

what URL should I put here? I am just trying locally now. And Any other configuration needed for our flutter web app? because I am getting this errro
The method FB.login can no longer be called from http pages. https://developers.facebook.com/blog/post/2018/06/08/enforce-https-facebook-login/

In your localhost you can test the login flow with some warnings because the javascript Facebook sdk only allows https connections

In localhost you can't use the FacebookAuth.instance.accessToken because it requires an oauth redirect URL that must be a valid site url with https, the URL should be the URL of your login page

Abhishek01039 commented 3 years ago

can I add https://www.bearpeak.io into site URL which is there in facebook console?

darwin-morocho commented 3 years ago

can I add https://www.bearpeak.io into site URL which is there in facebook console

yes but that url must implements the Facebook login

darwin-morocho / flutter-facebook-auth

TypeError: dart.global.FacebookAuth is not a constructor #70