# TV Login 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. The authorization flow acts as illustrated in the following diagram: ![](login/device_auth_grant.png) 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 and can be used as a `context key` when accessing content. ## TV OAuth2 plugin **TV OAuth2 Login plugin** is Applicaster's implementation of a OAuth 2.0 Device Authorization Grant. ### Notes before you start - Applicaster offers out of the box integration with `inPlayer & Cleeng`. - Applicaster also supports any OAuth2 implementation that supports OAuth2 Device Authorization Grant flow. If you use a provider that supports `OAuth2 Device Authorization Grant flow` Make sure to get the following: - App client id - Device endpoint - Token endpoint - Refresh endpoint > You can read more about Device flow here - https://developer.okta.com/blog/2019/02/19/add-oauth-device-flow-to-any-server - In the case your Authorization provider is not supporting Device flow, Please contact your customer success representative to find out how to integrate your custom login implementation. ### Setup endpoints Go to Zapp endpoints section and add the following #### Create a new endpoint called `oAuth2 API` - Set its URL to to the login URL your Authorization provider gave you. > If you are using **Cleeng** or **InPlayer** set it to `https://login-flow.applicaster.com/api/app` - Set its HTTP Method to `POST` - Set its mime type to `application/x-www-form-urlencoded` #### Create another endpoint called `oAuth Refresh` - Set its URL to the refresh URL your Authorization provider gave you. > If you are using **Cleeng** or **InPlayer** set it to `https:////refresh`. > Please consult your your customer success representative to get the exact URL. - Set its HTTP Method to `POST` - Set its mime type to `application/x-www-form-urlencoded` ### Setup feeds #### Create a feed called `TV Device Auth` - Set its URL to the device URL your Authorization provider gave you. > If you are using **Cleeng** or **InPlayer** set it to `https://login-flow.applicaster.com/api/app/device` > For more info see [Device Authorization Response](https://datatracker.ietf.org/doc/html/rfc8628#section-3.2) #### Create a feed called `TV Device Token` - Set its URL to the token URL your Authorization provider gave you. > If you are using **Cleeng** or **InPlayer** set it to `https://login-flow.applicaster.com/api/app/token` > For more info see [Device Access Token Response](https://datatracker.ietf.org/doc/html/rfc8628#section-3.5) #### Create a feed called `Refresh Token` - Set its URL to the refresh URL your Authorization provider gave you. > If you are using **Cleeng** or **InPlayer** set it to `https:////refresh` ### 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. ![](login/oauth2-tv-plugin-teaser.png) ### Screen Add the OAuth 2.0 Login screen in Zapp Studio. ![](login/oauth2-tv-screen.png) 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. - **Client ID** (Mandatory): as provided by the provider. > For **Cleeng** use `cleeng` and for **inPlayer** use `inPlayer` - **Device Endpoint**: set to the `TV Device Auth` feed you created before. - **Token Endpoint**: set to the `TV Device Token` feed you created before. - **Logout Endpoint**: Leave empty - unless your authorization provider instructed you differently. - **Scopes** - Leave empty - unless your authorization provider instructed you differently. > The section below should be filled if you are using **Cleeng** or **inPlayer** > It allows you to customize the web login screens to your provider and brand. #### API URLs > Only set API URL if you use **Cleeng** or inPlayer **Login URL**: `https:////login` **Register URL**: `https:////register` **Reset Password API URL**: `https:////reset` **Refresh URL**: `https:////refresh` #### Login Links - Add web URL to a web page that contains extra information on the registration and login process (links appear on the intro screen) - Add web URL to a web page that contains terms and conditions information (link appears on the registration form) #### Optional registration fields - You can enable/disable what field you would like to present on the registration form. #### Styles Configure the mobile web forms styles ![](login/styles.png) #### 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. ![](login/oauth2-hook.png) **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. ![](login/oauth2-tv-app-screen.png)