TV

Introduction

You can configure a Login and Sign-Up flow in your app to block access to the application, or specific sections/content, for non-subscribers.

Applicaster provides 3 ways of implementing Login within your app:

  1. OAuth2 plugin which implements the OAuth 2.0 Device Authorization Grant authorization framework.
  2. Pre-made integration with 3rd party vendors (Adobe PrimeTime, InPlayer, etc).
  3. Custom Embedded Login plugin implementation (embedded user agents).

Applicaster recommends following the OAuth 2.0 Device Authorization Grant (formerly known as the Device Flow), which is an OAuth 2.0 extension that enables devices without a browser or limited input capability to obtain an access token. This is commonly seen and used today on TV apps.

As it is difficult to enter text on a TV screen, directing the user to open a link on his/her computer or smartphone to authorize the device will create a better user experience. You can do this via QR code or on-screen text.

The authorization flow acts as illustrated in the following diagram:

  1. User navigates to the sign-in page in the app.
  2. App presents a QR code/ URL to the login form.
  3. User opens to the browser using the URL, fills the form and submits.
  4. App polls the authorization server token endpoint to get user's status.
  5. Once the user is authenticated via the the web browser form, the authorization server returns the token to the app.
  6. Token is stored on the TV device.

TV OAuth2 plugin

TV OAuth2 Login plugin is Applicaster's implementation of a OAuth 2.0 Device Authorization Grant.

In order to use this plugin, make sure your setup supports OAuth2 as stated above.

Prerequisites

In order to use the plugin, you should make sure the Authorization Provider is set and supports the Device Authorization Grant flow. In some cases in order to support this flow you will need to build an additional proxy which will connect to your Authorization provider (follow the integration guide here). Each provider will require different configuration. Once the Authorization provider is set, you should be able to obtain the App client ID, Device endpoint, Token endpoint and Refresh token endpoint. The plugin expects a specific response as explained here.

Features

  • Supported on Apple TV, Android TV, Amazon Fire TV, Samsung TV, LG TV and Roku.
  • Can connect to any Authorization Server that follows the OAuth 2.0 Authorization Grant flow specifications.
  • Supports refresh token.
  • A Screen Plugin with UI configuration in Zapp Studio.
  • Can be used as a standalone Login/Sign Up screen which could be accessed by the user from settings or any navigation action, or as a gatekeeper to restrict specific content in the app.
  • Localized texts.

App Set up

Plugin

Add the plugin TV OAuth 2.0 Login to the app version via the plugin configuration. Make sure you add the plugin to all relevant versions and platforms. Once added, you will need to rebuild the app to be able to use this functionality.

Configure the Authorization provider parameters in the plugin configuration panel:

  • Client ID (Mandatory): as provided by the provider.

  • Device Endpoint (Mandatory): This endpoint will be triggered when the login screen is presented. The client initiates the authorization flow by requesting a set of verification codes from the authorization server by making an HTTP "POST" request to the device authorization endpoint. The response should follow the Device Authorization Response.

  • Token Endpoint (Mandatory): After displaying instructions to the user, the client creates an access token request and sends it to the token endpoint. The response should follow the Device Access Token Response.

  • Refresh Token Endpoints: This endpoint will be used to refresh the token. On TV devices, it is recommended to set this field to make this a less cumbersome experience for the user, and reduce number of times him/her will need to login .

  • Logout Endpoint: Optional endpoint which will be invoked when user initiates a logout action.

Screen

Add the OAuth 2.0 Login screen in Zapp Studio.

The screen is the entry point to initiate the login flow. The screen can be used as a standalone screen, or be configured as a screen hook to act as the gatekeeper for locked content.

Adding the login screen as a hook for video content

One of the use cases you might want to handle is to prompt the login and authentication flow before playing a video. This experience is recommended, as it allows user to browse the app and it also enables some content to be free, and some behind a login.

You can achieve it by using our screen hooks mechanism:

  1. In Zapp studio, make sure you add Quick Brick Player Plugin screen.
  2. Once added, select the player screen and scroll down the configuration panel to the SCREEN STORYBOARD section. Select the Login screen from the plugins dropdown.
  3. Click on the + button and save the layout.

Configure the screen styling

The screen allows Zapp Studio users to configure styles and assets which will be remotely loaded. Please use the styles and localization section to setup the screen as you desire.

Pre-made integrations

Applicaster provides pre-made integrations with some of the leading vendors like Adobe Primetime for TV Everywhere, InPlayer, Etc. These plugins are available and could be added to your app using Zapp's Plugin Gallery.

Custom (Embedded) Login plugin implementation

A Custom Embedded Login plugin is the scenario in which users login directly to your application using a Login/Registration Form, and credentials are transmitted to the authorization server. There are security concerns with this approach, and it provides a poor user experience.