Select a site

IMPORTANT: This version of Sitefinity CMS is out of support and the respective product documentation is no longer maintained and can be outdated. Use the version selector to view a supported product version.

Tutorial: Call OData services in browser-based JavaScript applications

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.

PREREQUISITES:

Make sure the authentication protocol is set to OpenID (the default authentication protocol in Sitefinity CMS):

  1. Navigate to Administration -> Advanced settings -> Authentication.
  2. From the Authentication protocol dropdown, select OpenId.

To setup the application and create HTTP requests:

  1. Download the following assets:
  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.

Back To Top