When we develop a web , Mobile app and Smart Tv app login with facebook is used for the authentication of the user and gather the social information of user from facebook .
If you’re building a TV app for Android TV, or Fire TV, you should use the Facebook SDK for tvOS or Android.
User Experience
These guidelines describe how to design a clear, safe, and consistent login experience across devices and services.
Flow for Login With Facebook on Android TV
1. Call-to-Action
First consider where in your user experience you want to ask people to log in or connect with Facebook. For some devices this will be right away, and for others it might be later in the experience.
To ensure the most usable, consistent, and reliable user experience, design the button to look as much as possible like the official Facebook Login button.
From a visual design perspective, this means that you should
- Label the button with “Log in with Facebook” or “Connect to Facebook”.
- Use white and the official Facebook brand blue: #3B5998.
- If your device supports a graphical display, you can also incorporate the official “f” logo. According to the Facebook brand guidelines, the logo should always be either white or Facebook blue (#3B5998).
2. Display the Code
When the user clicks the call-to-action button, the device immediately calls the Facebook API which returns an activation code. In interface tell user to go to http://facebook.com/device via his/her desktop and smartphone and enter the displayed code.
The code that returns from Facebook Device Login API is between 6-12 characters long.
Once the code is displayed, the device starts to poll for the authorization using Facebook Device Login API to check if user has authorized the code or not. If the authorization is not complete the device shows an error message of code expired. Depending upon the case, the response is displayed on the screen for the user.
You can include a Close or Cancel button so people can cancel the device login flow. This should return them to the initial login screen.
3. Authorization
When a user goes to link http://facebook.com/device from his/her desktop then they see the following screen where they see a text field to enter the displayed code on device and click on continue.
After clicking on continue user can choose the permissions they want to grant
If user completes the process then Facebook show them the successful login screen
4. Confirm Successful Login
On your device’s interface, you should also display a confirmation message. Ideally this includes the person’s name and, if possible, their Facebook profile picture.
Display this confirmation on your device until the person clicks a Continue button. Someone may have to enter the code into a computer at another location, so they may need time to return to your device and see the confirmation before continuing.
After the person clicks Continue, your device can then show a great, personalized experience.
5. Log out or Disconnect
User should be able to log out from device, and device should not store their connection with Facebook. To do this, provide a Log out from Facebook or Disconnect from Facebook option in device’s menu.
When user selects this option, device should delete the stored access token from its memory. If we store the access token in a database or cloud storage, you should also remove it there. You do not need to make an API call to invalidate the access token.
After user logs out, our device should display the initial call-to-action.
Implemention Facbook Login for Devices-
Facebook Login for Devices is for devices that directly make HTTP calls over the internet. There are several step for the device login are :
Step 1-> Enable Login for Devices:-
Load your app’s dashboard and change Product > Facebook login > Settings > Login from Devices to ‘Yes’.
Step 2-> Generate a Code:-
When the user click on Login With Facebook Button the Api call arises :
POST https://graph.facebook.com/v2.6/device/login
In Query:
Access token =
Scope=
eg:public_profile,user_likes
The scope parameter is optional and must contain a comma separated list of Login Permissions which are approved for use in Login Review.
The CLIENT_TOKEN is found in your App Settings -> Advanced, and should be combined with your app ID (separated with a pipe, |) to form the complete access_token.
Response for this Api will be like this:
{
“code” : “92a2b2e351f2b0b35033b203b2de2511132f47”,
“user code” : “A1NWZ9”,
“verification uri”: “https://www.facebook.com/device”,
“expire in”: 420,
“interval”: 5
}
Step 3 -> Display the Code:-
Your device should display the user_code and tell people to visit the verification_uri such as facebook.com/device on their PC or smartphone.
Step 4 –> Poll for Authorization:-
Device should poll the Device Login API to see if the person successfully authorized your app. For this we will again hit poll authorization Api
POST https://graph.facebook.com/v2.6/device/login_status
In Query:
Access token =
Code=
eg:”92a2b2e351f2b0b35033b203b2de2511132f47”
The Response will be:
{
“access_token”: “EAAbLCEoHPooBAK8qVgGCCiqZBV1R2jZAlDigApMkk0B8TIfW”,
“data_access_expiration_time”: 1572544494,
“expires_in”: 5183985,
“error”: {
“message”: “This request requires the user to take a pending action”,
“type”: “OAuthException”,
“code”: 31,
“error_subcode”: 1349174,
“is_transient”: false,
“error_user_title”: “Device Login Authorization Pending”,
“error_user_msg”: “User has not yet authorized your application. Continuepolling.”,
“fbtrace_id”: “A4z12hdsDdu2-wjCnhgfwo”
}
}
Step 5 -> Confirm Successful Login:-
When we receive the access token the user will authorized to the application and we should persist this access token on the device. After receiving the access token we will hit last Api for the user profile details.
GET https://graph.facebook.com/v2.3/me?
In Query:
fields=name,picture&
access_token=
The Response will be:
{
“name”: “Apple Singh”,
“picture”: {
“data”: {
“height”: 50,
“is_silhouette”: false,
“url”: “https://platform-lookaside.fbsbx.com/platform/profilepic/?asid=348907552518094&height=50&width=50&ext=1567360601&hash=cdufydsfcu”
“width”: 50
}
},
“id”: “3489075525665894”,
“error”: {
“message”: “Malformed access token EAAbLCEoHPooBAK8qVgGCCiqZBV1R2jZAlDigApMkk0B8TIfWVszzxhgS3yaxl1mIbQml
u7dVr1kCTyNLZAsmfYO2aJDJIkPYWg9qlq9zDYU5Y2pZCZCJSHXIT53t
4NEDO933NALAxmNLqjlOZCKlyKCtj5rIygftOy
0EOA1Tms7QZDZD2jjkjkkjjk”,
“type”: “OAuthException”,
“code”: 190,
“fbtrace_id”: “AlBgudhi5AhMLkj7eLu_Gzk9”
}
}
For reference of implementation of Facebook login with Android Tv kindly fork from https://github.com/Archana1209/LoginWithFacebookInAndroidTv
I hope the tutorial gives you the insights you need. For any queries, you can contact us here
