Unlock Limitless Possibilities with Drupal Headless SSO using SAML protocol

Overview

miniOrange’s Headless SSO security solution performs seamless single sign-on (SSO) between the headless application, the Drupal backend, and the Identity Provider (IdP). In this authentication process, users are first redirected to the Identity Provider login page for authentication. Once the authentication is successful, they are redirected back to the frontend application. At this stage, a JSON Web Token (JWT) is generated to securely verify the user's identity and sent to the frontend site. (Optional: This token can be utilized for API validation while fetching any further information from Drupal.) Moving on, this document highlights the steps to configure SSO for a headless Drupal setup.

Prerequisites

• miniOrange SAML SP Module : This module enables SSO between the Drupal site and the SAML Provider.
• REST & JSON API Authentication Module :
• After the SSO is performed, this module helps to generate the JWT and send this token to the frontend application.
• This token can be used in the header along with the API request to Drupal in order to authenticate/validate any further APIs. The REST & JSON API Authentication module will validate the JWT before allowing API calls to ensure secure access.

Backend configurations

• miniOrange SAML Module: Refer to this setup guide for establishing the SSO between the Drupal site and the desired SAML Identity Provider.
• REST & JSON API Authentication Module:
• To authenticate the Drupal APIs using the JWT, configure the JWT-based Authentication method in the module by following this setup guide.
• Configure the login URL to the frontend:
• To get the login URL, go to the miniorange_saml module, then navigate to the Service Provider Setup tab. Copy the SSO Link and integrate it into the frontend login page.

• Configure the frontend endpoint:
• The REST & JSON API authentication module generates a JWT corresponding to the logged-in user. To get this JWT from the module, configure the redirect URL in the API authentication module by following the below steps:
• Navigate to the Advanced Settings tab of the REST & JSON API Authentication module.

• In the Token Endpoint Configuration for the headless SSO section, enter the endpoint of the frontend application where the browser will redirect after the Single Sign-On (SSO) process with a code and a relay state parameter. After this, click on the Save Token Endpoint Configuration button.

• Configure the logout redirect URL of the frontend:
• After the user logs out of the Drupal site, they will be directed back to the frontend side. To set up this endpoint of the frontend application, go to the Sign-in tab of the miniOrange_saml module.
• In the ‘Default Redirect URL after logout' text field, enter the endpoint of the frontend side where the user should be redirected after logging out.

Uncovering the Frontend Scenes

This section highlights everything that a user needs to do on the frontend side. It also talks about the possible changes a user will witness on the frontend. Let’s begin:

• Login Flow:
• Initiate the login from the frontend application using the SSO URL.
• The user is redirected to the configured IdP.
• Enter the user’s credentials to authenticate.
• After successful authentication, the user is redirected back to the frontend with the code and relay state as query parameters in the URL.

Note: The relay state is the parameter from which the login is initiated, or if the destination parameter is the present login URL, then the relay state will be the destination parameter’s value.

• Use the code obtained in the previous step to make a request to Drupal's token endpoint. For this, follow the below-mentioned steps:
• Locate the token endpoint in the Token Endpoint Configurations for headless SSO details. Refer to the below image for this.

• Example for making a POST request with the received code:
• Suppose the user received a code '(received_code)' on the front end.
• Now, use the below format to make a POST request using this code.

Postman Format:

                HTTP:
                    POST /drupal10_1_1/web/getToken HTTP/1.1
                    Host: localhost
                    Content-Type: application/x-www-form-urlencoded
                    Content-Length: 35
                    code=MjEOxuSuQyd1vUE7Ft5K5fT8Syh25c

                CURL:
                    curl --location
                    'http://localhost/drupal10_1_1/web/getToken' \
                    --header 'Content-Type:
                    application/x-www-form-urlencoded' \
                    --data-urlencode
                    'code=MjEOxuSuQyd1vUE7Ft5K5fT8Syh25c'
                

• The token endpoint will validate the code.
• If the code is valid, the token endpoint provides a generated JWT (Note that the code is for one-time use, so it cannot be used again to get a JWT.) Now, use this JWT token to authenticate subsequent APIs.
• Logout Flow:
• Initiate a logout from the frontend application. (using URL- {drupal-base-url}/user/logout)
• Ensure the configuration of single logout.
• This will logout the user from both the Drupal site and the IdP.
• After logging out from the Drupal site, the user will get redirected to the configured endpoint.

Related Articles

• What is Headless CMS ?
• Benefits of headless system

Why choose us

24/7 Support

Get prompt support from our Drupal technical experts, accessible around the clock for direct assistance

 Contact Us

Case Studies

miniOrange has successfully catered to the use cases of 400+ trusted customers with its highly flexible Drupal solutions.

 Case Studies

Other Solutions

Explore our popular Drupal solutions trusted by customers, including 2FA, User Provisioning, and Website Security.

 Know More