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 Google Apps credentials. The Typo3 OAuth / OpenID Connect Single Sign-On (SSO) extension makes it easy to use OAuth2 to set up Google Apps Login on Typo3 (Google Apps Single Sign on).
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'll go over how to set up SSO between Typo3 and Google Apps. Users should be able to log in to Typo3 through Google Apps by the end of this guide.
Pre-requisites : Download And Installation
Installing OAuth Client / OpenID Connect extension in TYPO3
- 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.
- 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.
- 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.
- 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.
- 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 Google Apps OAuth & OpenID Single Sign-On (SSO) Login into Typo3
1. Setup Google Apps as OAuth Provider
Follow the steps below to configure Google Apps as OAuth Provider
Configure Google Apps as OAuth Provider
- Go to https://console.developers.google.com/ and sign up/login.
- Click on Select Project to create a new Google Apps Project for Typo3 OAuth Client, you will see a popup with the list of all your projects.
- Click on the New project button to create new project.
- Enter your Project Name in project name field and click on Create.
- Go to Navigation MenuAPIsServicesCredentials.
- Click on Create Credentials button and then select OAuth Client ID from the options provided in the dropdown menu.
- Choose how you want to configure and register your app (User Type) and click on create button.
- In case you are facing some warning saying that in order to create an OAuth Client ID, you must set a product name on consent screen (as shown in below image). Click on the Configure consent screen button.
- Fill up the required information, such as the App Name and User Support Email. and then select the Save and Continue option.
- Now for configuring scopes, click on Add or Remove the Scopes button.
- Now, Select the Scopes to allow your project to access specific types of private user data from their Google Account and click on Save and Continue button.
- Go to the Credentials tab and click on Create Credentials button. Select Web Application from dropdown list to create new application.
- Enter the name you want for your Client ID under the name field and enter the Redirect/Callback URI from Typo3 OAuth and OpenID Single Sign On (SSO) plugin under the Authorized redirect URIs field and click on Create button.
- You will see a popup with the Client ID and Client Secret Copy your Client ID and Client Secret and save it on your Typo3 OAuth and OpenID Single Sign On (SSO) plugin Configuration.
You have successfully configured Google Apps as OAuth Provider for achieving Google Apps Single Sign-On (SSO) with Typo3 for user authentication.
2. Configuring Typo3 as OAuth Client
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.
By configuring Google Apps as an OAuth Provider and Typo3 as an OAuth Client using our Typo3 OAuth Client extension, you have successfully installed Typo3 Google Apps Single Sign-On (SSO). Within minutes, you'll be able to provide safe access to your Typo3 site utilising Google Apps login credentials thanks to this solution.
Additional Resources
If you are looking for anything which you cannot find, please drop us an email on info@xecurify.com