Login With Facebook for Smart TV – User Experience

07 / Dec / 2016 by Ankit Jain 6 comments

When developing a web, mobile app or a Smart TV app – login with Facebook is used for user authentication and conveniently capturing the user’s social information from Facebook itself.

This blog describes the steps to have a clear and consistent user experience for device login on a Smart TV.

 Flow for Login With Facebook on Smart TV

Smart TV login Flow

  1. Login with Facebook Action :

    The step is to finalize an appropriate place for the Login button and where the user can connect to their Facebook profile. This can be done at the start of the application or can be also done at any later stages as per the requirements

    fb-login-sample

    The development team must ensure that the call-to-action button is easy-to-use, visually consistent as per the brand colours and closely look like an official Facebook Login button.

  2. Display Activation 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.

    display-code

    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.

  3. Authorization of the Code

    When an 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.

    fb-device-auth-1

    After clicking on continue user can choose the permissions they want to grant

    fb-device-auth-2

    If user completes the process then Facebook show them the successful login screen

    fb-device-auth-3

  4. Login Confirmation

    As soon as user completes its login process for devices, Smart TV continues the polling from Facebook Device Login API, Once the code is authorized Smart TV gets the information and shows user confirmation message of login and ask user to continue.
    Data of user can be fetched using Facebook Graph APIs.

    fb-confirm-login

  5. Logout from Facebook Action

    If user wants to logout from device then there should be an option to logout, When user click logout button then we should delete the access_token from Facebook. Device should not store the token and if we have stored the token in database or cloud then we should delete the same from that places.

    There is no need to make any API call to invalidate the token.

FOUND THIS USEFUL? SHARE IT

comments (6)

  1. Jeff

    Authorized but now the screen says abcd and have an option to enter. But enter does nothing. How do I get past this?

    Reply
  2. Ricky Samuel

    Smarthub got reset and Facebook video not working I’m getting “unable to install. Please try again later. (118)

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *