ClipShare SDK Docs
  • Welcome!
  • MOBILE SDK
    • Android
      • Installation
      • Initialization
      • Sharing Clips
      • Customization
      • API Documentation
    • iOS
      • Installation
      • Initialization
      • Sharing Clips
      • Customization
      • API Documentation
  • WEB SDK
    • JavaScript
      • Installation
      • Access Token Handling
      • Sharing Clips
      • Customization
      • Implementation Errors
      • API documentation
Powered by GitBook
On this page
  1. WEB SDK
  2. JavaScript

Access Token Handling

Covers the handling of tokens for authentication purposes.

PreviousInstallationNextSharing Clips

Last updated 1 year ago

The SnapOdds SDK requires a valid access token to be provided in order to communicate with the Snapscreen API, which uses the OAuth 2.0 authentication mechanism.

Our customers are provided with a Client ID and Secret which must be used to retrieve the access token from the API endpoint described below:

Below is an example of the HTTP request using curl to receive an access token:

curl -d "client_id=YourClientId&client_secret=YourClientSecret&grant_type=anonymous"  https://api.us.snapscreen.com/oauth/token

Having the access token retrieval system implemented on the client side is unsafe and strongly discouraged, as credentials are available in plain text and could easily be stolen. Therefore Snapscreen recommends implementation of this logic on the server side.

For the implementation to function, a REST API endpoint must be provided from which the client can request the access token. On the server side, the access token will be fetched from the Snapscreen API, stored in the current HTTP session, and then returned to the browser.

Fetch AccessToken Example

Enclosed below is a snippet of a basic implementation of the access token provider.

function fetchAccessTokenFromApi() {
  return fetch('/token', { mode: 'cors', cache: 'no-cache' })
    .then((response) => response.json());
}

To further improve security, we also recommend using the technique to protect this resource. If you have other security protection mechanisms available in your Web Application, then we highly recommend using them as well.

Let us assume a REST API endpoint has been created using the path '/token'. The next required step is to direct this endpoint to the SnapOdds SDK in the form of an access token provider, which is function that when executed will return a of the whole access token returned from the Snapscreen API.

Note: The access token provider must return a standard Promise (not any equivalent like or other custom promise libraries like ). The SDK is built as angular element and relies on for change detection, so only browser native async methods are recognized.

CSRF token
Promise
AngulerJS $q
Kris Kowal's Q
zone.js
  • POST/oauth/token
  • Fetch AccessToken Example
post

Grants an access token to an anonymous user.

Body
client_idstringRequired

The client identifier specific to the customer.

client_secretstringRequired

The client secret.

grant_typestringRequired

The requested access grant type, should be set to "anonymous".

device_fingerprintstringOptional

Unique device fingerprint.

Responses
200
An access token and it requisites.
application/json
400
A request is not well formatted.
application/json
401
A request lacks valid authentication credentials for the requested resource.
application/json
403
The server refuses to authorize request.
application/json
500
The server encountered an unexpected condition that prevented it from fulfilling the request.
application/json
post
POST /oauth/token HTTP/1.1
Host: api.us.snapscreen.com
Content-Type: application/x-www-form-urlencoded
Accept: */*
Content-Length: 91

"client_id='text'&client_secret='text'&grant_type='text'&device_fingerprint='text'"
{
  "access_token": "text",
  "token_type": "text",
  "refresh_token": "text",
  "expires_in": 1,
  "scope": "text"
}