Call OData services in browser-based JavaScript applications

In this tutorial, you create HTTP requests to access Sitefinity CMS OData services using access tokens with Bearer token authentication. To do this, you use a JavaScript OpenID Connect (OIDC) client OAuth2 protocol support for client-side applications.

In this tutorial, you enable users, authenticated in the backend, to obtain access token and have permissions to view News items via a protected service. You can additionally implement other actions authenticated users can complete, such as modify or delete.

The files you work with in this tutorial are:

• oidc-client.js
  OIDC client and OAuth2 protocol support for browser-based JavaScript applications.
• silent.html
  Helper page required to obtain access token.
• news.html
  A sample page demonstrating how to obtain an access token and call the OData services.

NOTE: In this tutorial, you work with specific versions of the files, listed above. You can download these file versions from the GitHub repository.

To setup the application and create HTTP requests:

1. Download the following assets:
   • oidc-client.js script from the GitHub repository.       
     
   • Helper page for obtaining the access token: silent.html file from the GitHub repository.
2. Paste the assets in the relevant folders in your web application, for example, paste the OIDC client in the scripts folder.

   NOTE: By default, assets are copied to the root folder of your application.

3. Open the news.html file:
   In the code above you:
   1. Setup the links to where you pasted the silent.html and oidc-client.js, for example, to the scripts folder where you placed the oidc-client.js file.

      NOTE: By default, the links direct to the root folder.

   2. Configure the OIDC client settings:

      Parameter	Value	Description
      authority	http://host:port/Sitefinity/Authenticate/OpenID	The absolute path to the external STS.
      client_id	sitefinity	The client ID configured in the external STS.
      silent_redirect_uri	http://host:port/<folder where the silent page is located>/silent.html	The URL for the page containing the code handling the silent renew.
      response_type	id_token token	The type of response desired from the OIDC/OAuth2 provider.
      scope	openid	The minimum scope, required by the scenario.
      automaticSilentRenew	true	Automatically renew the access token on the silent page.

      
      
   NOTE: For a full list of OIDC settings, see GitHub OIDC client settings page.
4. Restart the application.