Contents

Azure AD OAuth / OpenID Connect Single Sign-On (SSO) into Typo3 | Azure AD SSO Login

Typo3 OAuth 2.0 Authentication and Authorization Single Sign-On (SSO) extension allows your Frontend & Backend (Admin & Customer) users to seamlessly login into Typo3 site using Azure Active Directory (Azure AD) credentials. Integration of Azure AD Login (Azure Active Directory OAuth Single Sign-On) with Typo3 using OAuth 2.0 Protocol.

The Typo3 OAuth & OpenID Connect Single Sign-On (SSO) extension makes it possible to log into Typo3 securely using any OAuth and OpenID Connect provider such as Azure B2C, Okta, Keycloak, Salesforce etc. Advanced Single Sign-On (SSO) features such as user profile Attribute Mapping, Role Mapping, and so on are also supported in this extension. Click here to read more about the Typo3 OAuth Single Sign-On (OAuth & OpenID Connect Client) extensions's premium features.

In this guide, We'll go over how to set up SSO between Typo3 and Azure AD. Users should be able to log in to Typo3 through Azure AD by the end of this guide.

Pre-requisites : Download And Installation

Installing OAuth Client / OpenID Connect extension in TYPO3

Using Composer
Manual Installation

Use the below command to install the extension using composer:
composer req miniorange/miniorange_oidc
Now search for the "miniOrange OpenIDConnect" in Installed extensions section and activate the extension by clicking on activate button.
After installation, click on the newly installed extension "miniOrange OpenIDConnect" for TYPO3 SSO and login with your registered miniOrange credentials.

Typo3 miniorange OpenIDCconnect settings

After entering username and password you will require license key to proceed further if you are a premium customer. (You will get this key from the miniOrange team. After entering license key, you can activate the license and proceed further.)

If you are not a premium customer you can seamlessly login by submitting miniOrange credentials.
After successful login, you can see the details related to your account.

Typo3 OAuth Single Sign-On account detilas

Now you are ready to configure your IdP. But, it's important to integrate frontend first.

Download the zip file of the OAuth / OIDC extension from TYPO3 marketplace
Go to your TYPO3 backend, and click on Extensions section at the left side of your screen.
Upload the zip file,as represented in the below image.

Now search for the "miniOrange OpenIDConnect" in Installed extensions section and activate the extension by clicking on activate button.
After installation, click on the newly installed extension "miniOrange OpenIDConnect" for TYPO3 SSO and login with your registered miniOrange credentials.

After entering username and password you will require license key to proceed further if you are a premium customer. (You will get this key from the miniOrange team. After entering license key, you can activate the license and proceed further.)

If you are not a premium customer you can direcly login submitting miniOrange credentials.
After successful login, you can see the details related to your account.
Now you are ready to configure your IdP. But, it's important to integrate frontend first.

Integrate extension with TYPO3

Click on the Pages from the left navigation.
Then you need to create a folder to store the frontend users in it by right clicking on the Home page and select New subpage.

Select Folder type from the dropdown.

Name the folder as Website Users and click on the Save.

Typo3 OAuth Single Sign-On create frontend

Go to behaviour tab and add Website Users in it.

If you see a hyphen sign in red on the created folder, it means that the folder is not enabled. You can then enable it by right clicking on that folder and clicking Enable.
You need to add two STANDARD pages within the HOME page. If you are using Premium Plugin you can create three pages.
Here we will consider Page Names as: FEOIDC, RESPONSE, LOGOUT (Logout is optional for premium customers).
To create a FEOIDC page, right click on Home page then select New subpage and select STANDARD type from dropdown.

Add Page Title as FEOIDC and click Save.

Then again Click on FEOIDC Page and click on Add content. Go to plugins and add FEOIDC Plugin and click on the Save.

Typo3 OAuth Single Sign-On select plugin

Navigate to plugin tab and select FEOIDC plugin.

Add website users in Record Storage Page and save the settings.

You can enable the FEOIDC page by right clicking and selecting Enable option.

If you need to make changes in URL segment, which will also be your initial SSO URL, right click on FEOIDC page, select edit and click on "toggle URL" button to set URL according to your way.
Follow the same steps to create and configure Standard pages of Response.
Ensure you will be selecting Response Plugin for Response page.
Keep the FEOIDC and RESPONSE page urls handy as you will need them while configuring the OAuth/OpenID Connect extension.

Steps to configure Azure AD OAuth & OpenID Single Sign-On (SSO) Login into Typo3

1. Setup Azure AD as OAuth Provider

Follow the steps below to configure Azure AD as OAuth Provider

Configure Azure AD as OAuth Provider

Sign in to Azure portal.
Select Azure Active Directory.

Typo3 OAuth Azure AD Single Sign-on (SSO) - Login

In the left-hand navigation pane, click the App registrations service, and click New registration.

Typo3 SSO Azure AD Single Sign-on App-Registration

When the Create page appears, enter your application's registration information.(Refer to the below table)

Name :	Name of your application.
Application type :	Select "Web app / API" for client applications and resource/API applications that are installed on a secure server. This setting is used for OAuth confidential web clients and public user-agent-based clients. The same application can also expose both a client and resource/API.
Redirect URI :	For "Web app / API" applications, provide the base URL of your app. eg, https://<domain-name> might be the URL for a web app running on your local machine. Users would use this URL to sign in to a web client application.

Copy Callback URL from the miniOrange OAuth Client extension and save it under the Redirect URL textbox.

Typo3 OAuth/OpenID/OIDC Azure AD Single Sign-On Configure call back url

Make sure the "Grant admin consent to openid and offline_access permissions" option is enabled. When finished, click Register.

Typo3 OAuth SSO Azure AD Single Sign-on (SSO) Register

Azure AD assigns a unique Application ID to your application. The Application ID is your Client ID and the Directory ID is your Tenant ID, keep these values handy as you will need them to configure the miniOrange OAuth Client extension.

Typo3 SSO OAuth 2.0 Azure AD Single Sign-on (SSO) applications details

Go to Certificates and Secrets from the left navigaton pane and click on New Client Secret. Enter description and expiration time and click on ADD option.

Typo3 OAuth Azure AD Single Sign-on (SSO) secret-Key OAuth/OpenID/OIDC

Copy the secret key "value" and keep the value handy it will be required later to configure Client Secret under the miniOrange OAuth Client extension.

Typo3 SSO Azure AD Single Sign-on (SSO) secret key value

You have successfully configured Azure AD as OAuth Provider for achieving Azure AD Single Sign-On (SSO) with Typo3 for user authentication.

2. Configuring Typo3 2 as OAuth Client

After successfully configuring OAuth Provider, enter the OAuth Provider Name, Client ID, Client Secret, Scope and provided endpoints.

Please refer below Endpoints to configure the OAuth client

Scope:	openid
Authorize Endpoint:	https://login.microsoftonline.com/[tenant-id]/oauth2/v2.0/authorize
Access Token Endpoint:	https://login.microsoftonline.com/[tenant-id]/oauth2/v2.0/token
Get User Info Endpoint:	https://graph.microsoft.com/beta/me

Click on the Save button to save the settings.

Typo3 OAuth 2.0 SSO credentials Azure AD SSO

Click on the Test Configuration button.

Typo3 OAuth credentials Azure AD SSO OAuth

You will see all the values returned by your OAuth Provider to Typo3 in a table. If you don't see value for First Name, Last Name, Email or Username, make the required settings in your OAuth Provider to return this information.
You have successfully configured your Typo3 as an OAuth Client. Now you can create your custom SSO button in your Typo3 Frontend site and embed the FEOIDC page URL to it to initiate the SSO.

3: Attribute Mapping (Optional). *This is Premium feature.

You can map attributes in the Attribute Mapping tab. Only username and email are allowed to be mapped in free version of the extension. However, in the premium version of the extension, you can map various attributes coming from your OAuth Provider to the attributes present in your Typo3 site.

4: Group Mapping (Optional). *This is Premium feature.

You can specify a default role in the free extension that will be allocated to all non-admin users when they conduct SSO.
Go to Group mapping tab and navigate to Group Mapping section.
Select the Default Role and click on the Save button.

Azure AD Typo3 SSO - Azure AD Single Sign-On(SSO) Login in Typo3 - role mapping

By configuring Azure AD as an OAuth Provider and Typo3 as an OAuth Client using our Typo3 OAuth Client extension, you have successfully installed Typo3 Azure AD Single Sign-On (SSO). Within minutes, you'll be able to provide safe access to your Typo3 site utilising Azure AD login credentials thanks to this solution.

Additional Resources

If you are looking for anything which you cannot find, please drop us an email on magentosupport@xecurify.com

Azure AD OAuth / OpenID Connect Single Sign-On (SSO) into Typo3 | Azure AD SSO Login

Contents

Azure AD OAuth / OpenID Connect Single Sign-On (SSO) into Typo3 | Azure AD SSO Login

Pre-requisites : Download And Installation