Facebook Login Extension


#1

Hi everybody, i found the way to log in with Facebook i hope to enjoy!

To use this component you have to create an app in https://developers.facebook.com/apps/ after you created an app, facebook will give an ID and Client token. You can get this information from your dashboard.
Then Go to Facebook Login > settings and enable Login for devices. finally save changes

This component let you authenticate users in your app using “facebook login”, the user should insert a code to authorizate your app to get data as name, profile picture and email. after code is generate the user have to be redirect to facebook.com/device. The developer decide the way to do it. e.g. using a web viewer or activity starter runnig a web browser. after user authorizate your app, an email, name a picture path will be returned.

Propieties

AppID: (designer only)
The App ID from facebook dashboard.

ClientToken: (designer only)
The client token from facebook dashboard. Go to Settings >Advanced

Methods
GenerateCode:

Generate a code for Sign in with facebook, developers should to redirect the user to http://facebook.com/device to insert the code generated, the code is automatically copy to clipboard for improve the usability. This extension use the basic scope: public_profile and email because not require extra permissions from facebook.

CheckAuthorization(Text code):

Checks for Authorization status. After generate the user code a ChooseDialogMessage shows in the screen, when user choose “Go to Facebook” AfterMessage event pass facebookUrl for Login and code for check authorization status.
If you use another screen to redirect user to the facebookUrl, you need this block to check authorization status every 5 seconds. After user authorizate your app. AuthorizationChecked event fires with an access token. If user don’t authorizate you app. AuthorizationPending event fires with a message.

NOTE: “code” parameter is generated AfterMessage event and it’s no same code to given to the user to authorizate the app.

Events
After message

choice: the user selection “Cancel” or “Go to Facebook”.
This event fires after the user has made a selection in the message shown. returns “facebookUrl” and “code”.
facebookUrl: is the Url to redirect the user to authorize your app login with Facebook.
code: is the code to check authorization status in another screen.

AuthorizationChecked

This event fires after the user has authorized your app. returns “accessToken” and “expireIn”.
accessToken: is used to Confirm Login and can be used to make a Firebase Authentication credentials too.(coming soon on FirebaseAuth extension).
expireIn: time which access token expire. The user have to make the process again to get a new token.

AuthorizationPending

this event fires when user has not authorized the application yet. Returns a message.
This messages could be:
“This request requires the user to take a pending action”
“User request limit reached”

AfterConfirmLogin

After confirm login an name, email and picture path is returned. Use this datas to show a confirmation message to the user.

Video tutorial:

All steps in my blog
mirxtremapps.com

Best practices: remender follow the facebook branding guidelines:


See full documentation process:
https://developers.facebook.com/docs/facebook-login/for-devices?locale=en_US

FacebookLogin (English message version)
com.mirxtremapps.FacebookLogin.aix (43.6 KB)

FacebookLogin (Spanish message version)
com.mirxtremapps.FacebookLogin.aix (43.7 KB)

aia project (insert your own AppID and ClientToken)
FacebookLogin.aia (77.6 KB)

Facebook Login apk
FacebookLogin.apk (2.2 MB)

Finally you can donate, thank you very much!


Facebook Account Picker Extension
Facebook App Integration
#2

Great extension! Keep up the good work!


#3

Does that mean that this extension includes the Facebook SDK? If yes, that would be awesome.


#4

Thanks for it.You used activicty starter for view facebook.com/device website can we use webview?


#5

@Ali_Aydin i use webview in this example but… if you see the aia, i leave and activity starter example if you want to use it.


#6

This extension use HTTP request and API Graph of Facebook. no include sdk


#7

nice and useful extension. i hope this should open doors for other extensions like instagram login etc


#8

there’s something also for linkedin.
sorry for my ignorance, but with and integration with facebook or linkedin, may i see messages too? may i manipulate them?


#9

Vas duro colega, muy buen trabajo, (y) :grinning:


#10

(added to AI2 FAQ Web Services section)
[https://groups.google.com/forum/?utm_medium=email&utm_source=footer#!msg/mitappinventortest/2cd6Uz__xA0/cPQSiZpcDAAJ]
ABG


#11

Can we change message text to own


#12

Hi!.. you cannot. these is a standard message, but what message do you want to show?


#13

please help i did all you mentioned it worked but the name and profile picture string does not work it is empty


#14

please help me

I have a pictureurl profile, but can not be displayed.
facebook has sent this pictureUrl

" https://scontent.xx.fbcdn.net/v/t1.0-1/p50x50/1509975_1559832697587793_2133883693071677997_n.jpg?oh=46028013ce82163f0edb66ccb4621e63 "


#15

Hi, I tried your extension but it does not work for me… It will never show a dialog if the button in your .aia is clicked… I entered my own AppID and ClientToken and activated “login from devices” but it just won’t work :confused:


#16

There three aditional steps that you have to follow.

  1. add redirect URI in facebook console, you can set https://localhost

image

  1. add Privacy Polices to launch your app to production.

  2. enable App as Public app.( add privacy polices first or you can do this).

Remenber check if API does not have spaces at the beggining or at the end. some time it sneaks when copy and paste.

Trick: Facebook has an event to manage error, basically is a negative response from server and it’s useful to know what tha hell it’s happening and error handle. jeje

best regards, i hope to fix it.


#17

remenber follow the toturial in you tube:


#18

I’ll give it another try later… I was just confused because not even the message dialog appeared…

Thanks for your relpy!