search

roughike / flutter_facebook_login

A Flutter plugin for allowing users to authenticate with native Android & iOS Facebook login SDKs.
BSD 2-Clause "Simplified" License
405 stars 331 forks source link

[WEB] feature - web support #227

Closed romulojjunior closed 3 years ago

romulojjunior commented 4 years ago

I did few changes to support flutter web, using facebook sdk (web). I hope this code can help other people. :)

rbozan commented 4 years ago

I'm not sure how to use it, can you help? When I use the logIn method, a dialog opens that says:

Can't Load URL The domain of this URL isn't included in the app's domains. To be able to load this URL, add all domains and subdomains of your app to the App Domains field in your app settings.

But I can't add the URL, for example http://[::1]:49772, because Facebook doesn't like that.

romulojjunior commented 4 years ago

Hi @rbozan Facebook SDK require a Https connection. You need build and deploy your flutter application in https website. Maybe in the future flutter use https in development mode.

Today, I did a bugfix in this branch. maybe its help you too.

If you want test flutter web with facebook login. You can user firebase hosting service. Its is free and for development works fine.

Project Tips

Update your pubspec file

// Please fork this project, it is a good idea. // Or please, use my tags link. // And update your dependency // Remember, check if there is some update here.

 flutter_facebook_login:
    git:
      url: git@github.com:[account name here]/flutter_facebook_login.git
      ref: feature/web_support

or

  flutter_facebook_login:
    git:
      url: 'git@github.com:romulojjunior/flutter_facebook_login.git'
      ref: 'v1.3.0-web' # Check latest version

Facebook Tips

Facebook settings/dashboard you can use this example: https://[your domain here]/login/callback

Firebase Tips

Create a Firebase account and project

Firebase dashboard select: Hosting See tutorial:

$ npm install -g firebase-tools   // Install NodeJs
$ firebase login

In your flutter project (root folder)

$ mkdir firebase_deploy
$ cd firebase_deploy
$ firebase init

1 "◯ Hosting: Configure and deploy Firebase Hosting sites" 2 "Use an existing project" 3 "Select your firebase project."

? What do you want to use as your public directory? web ? Configure as a single-page app (rewrite all urls to /index.html)? Yes ? File web/index.html already exists. Overwrite? No

# Return to root folder
$ cd ..

# Build your flutter project to web
$ flutter build web --release

# Copy your files to firebase folder
$ cp -r build/web firebase_deploy/

Deploy

$ firebase deploy

After this deploy you can see a https url in your console.

ex: https://fb-login-29c92.firebaseapp.com/

Use this url in your facebook dashboard. This url will be used to redirect user to your website.

New builds

flutter build web --release && cp -r build/web firebase_deploy/ && cd firebase_deploy && firebase deploy && cd ..

This way, you can not debug in web. Maybe in te future, we can create a mock and run debug mode.

Bye :) .

Thanks by feedbacks

@rbozan @pixnbit and others

rbozan commented 4 years ago

Thank you, I’ll try.

pixnbit commented 4 years ago

Thank you Sir! This worked out for me wonderfully. Two notes you might want to include in your instructions:

  1. Before this is merged into master and release, you'll have to specify the forked origin and branch of the dependency in pubspec as follows. And you need to do a flutter clean to fetch updates. pubspec can't detect version updates with this. 
    flutter_facebook_login:
git:
  url: git@github.com:[account name here]/flutter_facebook_login.git
  ref: feature/web_support
  2. The OAuth redirect URL is in the format of https://[your domain here]/login/callback
brianschardt commented 4 years ago

When is this getting merged into master? This is important functionality for all of us!

romulojjunior commented 4 years ago

When is this getting merged into master? This is important functionality for all of us! Thanks @brianschardt

I opened this pull request on 29 Dec 2019, but nobody approved yet. I don't the reason.

@roughike can you help us? Thanks so much.

camsethsum commented 4 years ago

can someone enlighten me how to use this update to my project? I'm new to github environment, Id like to use the latest web update to my project...please guide me.

rbozan commented 4 years ago

can someone enlighten me how to use this update to my project? I'm new to github environment, Id like to use the latest web update to my project...please guide me.

@camsethsum

For me the comments above (especially https://github.com/roughike/flutter_facebook_login/pull/227#issuecomment-593163959) and the changed contents of the README.md (https://github.com/roughike/flutter_facebook_login/pull/227/files#diff-04c6e90faac2675aa89e2176d2eec7d8R136-R173) were enough to get it to work

Faiyyaz commented 4 years ago

@roughike Please merge this PR even i want the same functionality for web

danielfnz commented 4 years ago

@roughike Please merge this PR even i want the same functionality for web

dineshpote26 commented 4 years ago

Hi I am getting the following issue after the facebook login in web when accesing accessToken FacebookAccessToken accessToken = result.accessToken;

Uncaught Invalid argument: Instance of 'minified: JD'

romulojjunior commented 4 years ago

Hi I am getting the following issue after the facebook login in web when accesing accessToken FacebookAccessToken accessToken = result.accessToken;

Uncaught Invalid argument: Instance of 'minified: JD'

Hi @dineshpote26. Which browser are you using? Could you send me more details?

romulojjunior commented 4 years ago

Version v1.3.0-web

Obs. use this tag 'v1.3.0-web' to test. @rbozan @pixnbit @brianschardt @camsethsum @dineshpote26

dannycortesv commented 4 years ago

May be this can help others about how to include it in the .yaml

flutter_facebook_login: git: url: git://github.com/romulojjunior/flutter_facebook_login.git ref: v1.3.0-web

dvirgiln commented 4 years ago

Hello guys.

Do you know when this PR will be merged and this functionality released? I see that it keeps opened since December 2019.

romulojjunior commented 4 years ago

Hello guys.

Do you know when this PR will be merged and this functionality released? I see that it keeps opened since December 2019.

Hi dvirgiln,

Unfortunately the future this PR is uncertain. I have being worked this PR (during my free time), because people are using.

Maybe in the future, I will create a new project with support to mac osx linux and windows too.

rbozan commented 4 years ago

Thanks to this PR I don’t necessarily have to use flutter Android emulator but I can just use flutter web for debugging.

romulojjunior commented 3 years ago

I decided close this PR, after a long time waiting. Currently this branch is very old and I don't have more time to update it.

christophemacabiau commented 3 years ago

@roughike please can you merge this PR? Romulo has deleted the source repository, all his work (which seems fine in my case) will be lost...

dannycortesv commented 3 years ago

Please @roughike