Setting Up Identity Providers for Your Website

With Scrivito, visitors to your website and, optionally, the editors working on your CMS content can be given the possibility to log in via an identity provider supporting OpenID Connect, e.g. Auth0 or Google. 

In this guide, we are going to show you how set up identity providers and make them known to your Scrivito CMS via the Dashboard. Even though visitor and editor authentication are two completely different stories, setting them up is almost identical so they are both covered here.

If the “Settings” tab of your Scrivito Dashboard doesn’t include the “Visitor Identity Providers” or “Editor Identity Provider” sections, please have them enabled by our Scrivito Support. For the editor identity provider option to be made available, a Scrivito Enterprise plan is required.

An identity provider (IdP) offers user authentication as a service. For service providers, the main benefit of using IdPs is that the identity of users can be asserted without the need to store and manage their passwords.

Most people come into contact with identity providers when they click on login form buttons such as “Log in with Google”, for example. For users, being able to bypass login forms and not having to maintain dedicated credentials for a service is convenient.

Scrivito works with any identity provider supporting OpenID Connect. You can even connect your own Active Directory or LDAP, as long as they're configured for OpenID Connect.

OpenID Connect is a widely used authentication service supported by several major cloud platform providers such as Google, Microsoft, or Yahoo. So any person with an account at any of these providers can be added as a visitor or editor to a Scrivito CMS.

OpenID Connect is based on the OpenID 2.0 and OAuth 2.0 protocols. OpenID Connect directly incorporates OAuth 2.0 capabilities. These components are open standards, enabling you to trust that your visitors and editors are logged in securely.

For your website to support logging in via visitor identity providers, three steps need to be made:

1. Register your website with the IdP.
2. Register the IdP in your Scrivito Dashboard. You can register up to four visitor IdPs.
3. Integrate a log-in form into your website that lets visitors authenticate via the IdP(s).

Afterwards, only logged-in visitors are given access to website content that is flagged as restricted. Below, we will guide you through the first two steps, the registrations. Making your website fit for logging in via the IdP is covered by the corresponding API documentation.

Regarding editor identity providers, the Scrivito Dashboard acts as such. To use a different editor IdP, only two steps are required:

1. Register your website with the IdP. You cannot register more than one editor IdP.
2. Register the IdP in your Dashboard.

With an editor IdP configured, Scrivito no longer redirects users to the dashboard for logging in. Instead, it redirects to the configured identity provider. Once a user has logged in via the IdP, the IdP redirects back to Scrivito to complete the login. The registration steps needed for setting up an editor IdP are almost the same as for a visitor IdP.

In this example, we are using Auth0 as our identity provider with OpenID Connect support. In the next section, we'll walk through the same setup using Google GSuite as our IdP.

For configuring an identity provider, open the Auth0 dashboard and create an application. Make sure to select the “Single Page App” type for visitor authentication, and “Regular Web App” for editor authentication. Then, from the settings tab of the new application, take down the following data as you will need it in the next step:

• Domain, e.g. foobar.eu.auth0.com
• Client ID, e.g. JLSyTv8ReKff8zxz2PdNqkfUpJ37qg6u
• Client Secret …

For an editor identity provider, Auth0 needs to be provided with Scrivito's authentication callback URL. This piece of information can be found on the “Settings” tab of your website in the Scrivito Dashboard. Copy this URL and paste it into Auth0’s “Allowed Callback URLs” input field.

Finally, see below how to make your identity provider known to Scrivito.

In this example setup, we are using Google GSuite as our editor identity provider. Please refer to Google's OpenID Connect Guide for further details.

On the next screen, select “Web Application” as the “Application Type”, give your new Google OAuth client a name, and provide Scrivito’s authentication callback URL. This piece of information can be found on the “Settings” tab of your website in the Scrivito Dashboard:

Copy this authentication callback URL and paste it into Google's “Authorized redirect URIs” input field.

Finally, click “Create” on the Google OAuth client setup page. Note down the client ID and secret as you will need them in the next step:

• Client ID, e.g. JLSyTv8ReKff8zxz2PdNqkfUpJ37qg6u.apps.googleusercontent.com
• Client Secret, e.g. 2Tz9kqRaTLLAgTh8m8YAMN6P

So far, you have set up an application with your IdP. To complete the process, let’s configure Scrivito to use this IdP for authenticating users:

Open up the Scrivito Dashboard in your browser and select the “Settings” tab of your website. Enter the details in the “Visitor Identity Providers” section or the “Editor Identity Providers” section, depending on the kind of users you want to enable to authenticate.

For visitors, up to four identity providers can be configured. Scrivito accepts logins from any of the providers. For each of them, the following pieces of information are required:

• Provider URL: this is the “Domain” value from above, specified as a complete URL, including the HTTPS scheme. For the “foobar.eu.auth0.com” example domain, the provider URL would be “https://foobar.eu.auth0.com/”. For Google as an IdP, it's always “https://accounts.google.com”.
• Hosted Domain: With Auth0 as your IdP, this field can be left blank because the provider URL already contains your unique account name, “foobar”, as part of the domain. For Google, however, use your GSuite domain name.
• Client ID: The client ID you were given in the IdP setup process.
• Client Secret: The client secret you were given.
  

With this, we are done with editor authentication. For visitor authentication, your app needs to provide a means to authenticate in order to get access to restricted content.