Step by Step Guide to Setup Typo3 OAuth / OpenID Connect Single Sign-On (SSO) Extension

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 any OAuth 2.0 and OpenID Connect 1.0 standard complaint provider.

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 AD, 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 will go through the steps to setup miniOrange OAuth / OpenID Connect Single Sign-On SSO extension.

Installation Steps

1. Installing OAuth Client / OpenID Connect extension in TYPO3

• 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.

2. Integrate extension with TYPO3

• Now you have to design your frontend by left clicking on the Home tab then click on New Subpage

• 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).
• Enter the Standard Page name as: FEOIDC.

• Click on FEOIDC Page and click on Add content. Go to plugins and add FEOIDC Plugin.

• Navigate to plugin tab and select FEOIDC plugin. Add website users in Record Storage Page and save the settings.

• 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 and Logout Plugin for Logout Page.
• Your TYPO3 directory should look like this.

• Also, you must create at least one group as TYPO3 doesn’t allow to create users unless there’s one usergroup at least.
• To create group go to list tab from the left panel, click on Website users folder and hit the "+" button at the top of the screen.

• Now select Websiteuser group ? from the list.

• Insert Group Name in group title section and click on Save button at the top. User group will be created.

• You can also create a SSO button on login page. Click on Home, proceed to the +Content option.

• Switch to Special elements tab and select Plain HTML.

• Here what you will be doing is, you are adding SSO login button, URL in the button section will be of FEOIDC Standard Page.
• The code snippet to do so is mentioned in the given image. Enter the code and hit the Save button at the top.

• Now you can configure plugin in the backend.

3. Configure OAuth Provider

Let's see how OAuth provider is configured, here we will consider Azure AD as IDP. If your IDP is different you can access complete setup guide of your desired IDP from here.

• Sign in to Azure portal.
• Select Azure Active Directory.

• In the left-hand navigation pane, click the App registrations service, and click New 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.

• Make sure the "Grant admin consent to openid and offline_access permissions" option is enabled. When finished, click 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.

• 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.

• 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.

4. Configuring TYPO3 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.

5. Test Configuration

• This feature will help you to find out if submitted configurations are correct or not. You will also get the attributes you have configured in response.
• To get test Configuration checked go to OpenID Connect plugin, in that go to OpenID Connect client tab, in the bottom you will find Test Configuration button, click on it it will show you the results as shown in the given diagram.

6. Attribute Mapping

• 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.

7. Group Mapping

• 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.

You have successfully configured your Typo3 as an OAuth Client. You will see the SSO button on your frontend. Click on the button and test the SSO.

Additional Resources

• What is Single Sign-On (SSO) Login?
• What is SAML? How SAML SSO works?
• Typo3 OAuth and OpenID Single Sign On (SSO).
• Typo3 SAML Single Sign On (SSO).

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