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.

Increase your Sitefinity skills by signing up for our free trainings. Get Sitefinity-certified at Progress Education Community to boost your credentials.

Get started with Integration Hub | Sitefinity Cloud | Sitefinity SaaS

This free lesson teaches administrators, marketers, and other business professionals how to use the Integration hub service to create automated workflows between Sitefinity and other business systems.

Web Security for Sitefinity Administrators

This free lesson teaches administrators the basics about protecting yor Sitefinity instance and its sites from external threats. Configure HTTPS, SSL, allow lists for trusted sites, and cookie security, among others.

Foundations of Sitefinity ASP.NET Core Development

The free on-demand video course teaches developers how to use Sitefinity .NET Core and leverage its decoupled architecture and new way of coding against the platform.

Was this article helpful?