{"id":41376,"date":"2016-12-07T15:40:57","date_gmt":"2016-12-07T10:10:57","guid":{"rendered":"http:\/\/www.tothenew.com\/blog\/?p=41376"},"modified":"2016-12-07T16:27:13","modified_gmt":"2016-12-07T10:57:13","slug":"login-with-facebook-for-smart-tv-user-experience","status":"publish","type":"post","link":"https:\/\/www.tothenew.com\/blog\/login-with-facebook-for-smart-tv-user-experience\/","title":{"rendered":"Login With Facebook for Smart TV – User Experience"},"content":{"rendered":"

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

This blog describes the steps to have a clear and consistent user experience for device login on a Smart TV.<\/p>\n

\u00a0Flow for Login With Facebook on Smart TV<\/strong><\/p>\n

\"Smart<\/p>\n

    \n
  1. \n

    Login with Facebook Action\u00a0:<\/h2>\n

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

    \"fb-login-sample\"<\/p>\n

    The development team<\/a> 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.<\/li>\n

  2. \n

    Display Activation\u00a0Code<\/h3>\n

    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.<\/p>\n

    The code that returns from Facebook Device Login API is between 6-12 characters long.<\/p>\n

    \"display-code\"<\/p>\n

    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.<\/li>\n

  3. \n

    Authorization of the Code<\/h3>\n

    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.<\/p>\n

    \"fb-device-auth-1\"<\/p>\n

    After clicking on continue user can choose the permissions they want to grant<\/p>\n

    \"fb-device-auth-2\"<\/p>\n

    If user completes the process then Facebook show them the successful login screen<\/p>\n

    \"fb-device-auth-3\"<\/li>\n

  4. \n

    Login Confirmation<\/h3>\n

    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.
    \nData of user can be fetched using Facebook Graph APIs.<\/p>\n

    \"fb-confirm-login\"<\/li>\n

  5. \n

    Logout from Facebook Action<\/h3>\n

    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.<\/p>\n

    There is no need to make any API call to invalidate the token.<\/li>\n<\/ol>\n","protected":false},"excerpt":{"rendered":"

    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. \u00a0Flow for Login With Facebook […]<\/p>\n","protected":false},"author":302,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"iawp_total_views":99},"categories":[3479,3477,1772,1],"tags":[3570,707,4269,4094,4204,4201,4205,4095,4202,4861,4268],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/41376"}],"collection":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/users\/302"}],"replies":[{"embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/comments?post=41376"}],"version-history":[{"count":0,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/41376\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/media?parent=41376"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/categories?post=41376"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/tags?post=41376"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}