Typo3 OAuth / OpenID Connect Single Sign-On (SSO) Setup Guide

Typo3 OAuth / OpenID Connect Single Sign-On (SSO) Setup Guide


The Typo3 OAuth / OpenID Connect Single Sign-On (SSO) extension works with any OAuth provider that conforms to the OAuth 2.0 and OpenID Connect 1.0 standard. This Typo3 Single Sign On plugin helps you to setup SSO with any OAuth / OIDC Provider.

The plugin can be set up using other Social Media sources, as well as custom OAuth and OIDC providers. It contains a lot of Single Sign-On (SSO) features, like Attribute Mapping for user profiles, Role Mapping, and so on. Click here to read more about the Typo3 OAuth Single Sign-On (OAuth & OpenID Connect Client) plugin's extra features.

The Typo3 2 OAuth & OpenID Connect Single Sign-On (SSO) plugin makes it possible to log into Typo3 securely using any OAuth and OpenID Connect provider. You can also use alternative OAuth providers, such as Azure B2C, Office 365, and other custom providers, to configure the plugin. Advanced Single Sign-On features such as user profile Attribute Mapping, Role Mapping, and so on are supported.

Click here to know more about other features we provide in Typo3 OAuth Single Sign-On ( OAuth & OpenID Connect Client ) plugin

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.
  • Typo3 OAuth OIDC SSO upload plugin
  • 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.)
  • minorange license oauth oidc login
  • 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
  • Typo3 oauth SSO create frontend
  • 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.
  • FEOIDC page Typo3 OAuth Single Sign-On
  • Click on FEOIDC Page and click on Add content. Go to plugins and add FEOIDC Plugin.
  • Typo3 OAuth SSO add content Typo3 single sign on add content
  • Navigate to plugin tab and select FEOIDC plugin. Add website users in Record Storage Page and save the settings.
  • Typo3 login add website users
  • 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.
  • Typo3 oauth SSO edit SSO URL
  • 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.
  • Typo3 OIDC SSO directory
  • 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.
  • create group Typo3 OIDC single sign on
  • Now select Websiteuser group ? from the list.
  • Typo3 oauth SSO website users group
  • Insert Group Name in group title section and click on Save button at the top. User group will be created.
  • User group created Typo3 OAuth OIDC SSO
  • You can also create a SSO button on login page. Click on Home, proceed to the +Content option.
  • Typo3 oauth SSO add content
  • Switch to Special elements tab and select Plain HTML.
  • Plain html to create miniorange SSO button
  • 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.
  • SSO button on frontend Typo3 OAuth OIDC SSO
  • 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.

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

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.
  • Typo3 OAuth 2.0 SSO credentials Azure AD SSO

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.
  • Test configuration Typo3 SAML SSO

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.
  • Typo3 OAuth attribute mapping Typo3 SSO

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.
  • Azure AD Typo3 SSO - Azure AD Single Sign-On(SSO) Login in Typo3 - role mapping

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.

Typo3 OAuth 2.0 SSO Azure AD SSO

Additional Resources


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

Hello there!

Need Help? We are right here!

support
Contact miniOrange Support
success

Thanks for your inquiry.

If you dont hear from us within 24 hours, please feel free to send a follow up email to info@xecurify.com