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.

Want to learn more?

Sign up for our free beginner training. Boost your credentials through advanced courses and certification.
Register for Sitefinity training and certification.

Was this article helpful?

Next article

Generate access key