Webflow provides a platform that allows businesses or people to create responsive websites without any technical expertise. It provides the pre-edited templates of different sites as per users need. Webflow allows users to accomplish most aspects of web development & website distribution entirely within the application, so go grab ready to use Webflow Single Sign-On (SSO) solution.
Webflow SSO solution by miniOrange provides you a ready to use Single Sign-On service which allows users to securely login into Webflow and other integrated applications using a single set of login credentials. You can easily connect with any of your IDP (Okta, Ping, etc), Active Directory and LDAP without migrating your users. Webflow SSO integration helps your organization's time and efforts with improved security to your data present in the cloud or on-premise. You don't need any enterprise plan or premium feature to enable SSO for Webflow. Get One-Click secure SSO access with miniOrange’s IAM services.
Challenge faced by Webflow Users
Webflow users want a continuous and seamless access to their Webflow portal through their existing accounts. They don't wish for their users to have a separate set of credentials for logging in to Webflow. Webflow provides a way for its users to allow their users to log in to the platform seamlessly. But, an interface needs to be created which would allow this.
SSO Solution for Webflow
miniOrange provides an integrated SSO solution where a logged in user's existing session can be used to log the users into Webflow by creating a valid JSON Web Token (JWT). Webflow user is relieved from maintaining separate user credentials for its users.
As a result, miniOrange Single Sign-On (SSO) solution is implemented. Webflow users can now log into Webflow platform using their existing credentials.
Video Setup Guide
Prerequisites
Please make sure your organisation branding is already set under Customization >> Login and Registration Branding in the left menu of the dashboard.
Connect with External Source of Users
miniOrange provides user authentication from various external sources, which can be Directories (like ADFS, Microsoft Active Directory, OpenLDAP, AWS etc), Identity Providers (like Microsoft Entra ID, Okta, AWS), and many more. You can configure your existing directory/user store or add users in miniOrange.
Follow the step-by-step guide given below for Webflow Single Sign-On (SSO)
1. Configure Webflow in miniOrange:
Login into miniOrange Admin Console.
Go to Apps and click on Add Application button.
In Choose Application, select JWT from the application type dropdown.
In the next step, search for Webflow application from the list. If your application is not found, search for JWT App and you can set up your Application.
You can configure the following details in the application:
Display Name
Enter the Display Name (i.e. the name for this application)
Redirect URL
Enter the Redirect URL (i.e. the endpoint where you want to send/post your JWT token).
You can add multiple redirect URLs by separating them with a ‘;’.E.g. abc.com;xyz.com
Client ID
The Client ID is shown in the field below. Click the clipboard icon to copy it.
Client Secret
Client Secret is hidden by default. Click the eye icon to reveal it and use the clipboard icon to copy it. This is used in the HS256 signature algorithm for generating the signature.
Description (Optional)
Add a description if required.
Click Save.
You will be redirected to the Policies section. Click Add Policy.
A dialog box will open enter the following details:
Group Name
Select the group for which you wish to add a this policy. For multiple groups, you can
click here to add a multiple/separate policies for each group.
Policy Name
You can give a name for the authentication policy.
First Factor
Select the login method as Password and Password-less. You can enable 2-Factor Authentication (MFA), Adaptive Authentication and Force MFA On Each Login Attempt.
Click Submit to add the policy.
You will see the policy listed once it’s successfully added.
Click on Advanced tab.
Enter the following details as required:
Access Token
Enter the access token that will be sent to your redirect URL after a user logs in. This token helps your app know the user is allowed to access certain features.
ID Token Expiry (In Mins)
Set how long (in minutes) the ID token will be valid. After this time, the user will need to log in again to get a new token.
Subject
Choose what information, like the user’s email address, will be used to identify them in the token. This helps your app know which user is logged in.
Signature Algorithm
Select your signature algorithm from the dropdown.
The Logout URL of your application
Enter the web address where users should be sent after they log out.
Signature Algorithms for JWT
RSA-SHA256
Asymmetric, uses a set of private and public keys to generate and validate the signature which is included in the JWT token.
The private key is used to generate the signature on the IDP side.
The public key is used to verify the signature on the SP side.
We provide the public key for this.
HS256
Symmetric, uses the same secret key to generate and validate the signature
The secret key in this case is configurable from the app configuration page.
Switch to Authentication tab.
Primary Identity Provider
Select the default ID source from the dropdown for the application. If not selected, users will see the default
login screen and can choose their own IDP. [Choose miniOrange in this case.]
Force Authentication
If you enable this option, users will have to log in every time, even if their session already exists.
Enable User Mapping
Enable this option, if you want the app to show which user is signed in when it responds.
Show On End User Dashboard
Enable this option if you want to show this app in the end-user dashboard.
Navigate to Endpoints and copy the following details:
Single Sign-On URL:
This URL is used to initiate user authentication to obtain the JWT token.
Take redirect_uri as one of the query parameters.
After successful authentication on the IDP end, an active user session is created in the IDP and the user is redirected to the redirect_uri with the JWT token.
Single Logout URL:
This URL is used to log out the user from the IDP by removing the active user session.
Take redirect_uri as one of the query parameters.
After removing the active user session, the IDP redirects the user to the redirect_uri.
Reply back URL for IdP initiated logout:
This URL is used to initiate the logout in case the JWT user login was IDP Initiated [User logged in to the dashboard first and then initiated the login for the app from the dashboard.]
After logging out the user from the IDP, the user is redirected to the IDP dashboard login page.
2. Adding Script on Webflow's End
To enable SSO on Webflow's end, all you need to do is add a customized script.
Click here to download the script needed or you can reach out to us at idpsupport@xecurify.com at any time if you need help with the integration.
3. Configure Your User Directory
miniOrange provides user authentication from various external sources, which can be Directories (like ADFS, Microsoft Active Directory, Microsoft Entra ID, OpenLDAP, Google, AWS Cognito etc), Identity Providers (like Okta, Shibboleth, Ping, OneLogin, KeyCloak), Databases (like MySQL, Maria DB, PostgreSQL) and many more. You can configure your existing directory/user store or add users in miniOrange.
Here, fill the user details without the password and then click on the Create User button.
After successful user creation a notification message "An end user is added successfully" will be displayed at the top of the dashboard.
Click on Onboarding Status tab. Check the email, with the registered e-mail id and select action Send Activation Mail with Password Reset Link from Select Action dropdown list and then click on Apply button.
Now, Open your email id. Open the mail you get from miniOrange and then click on the link to set your account password.
On the next screen, enter the password and confirm password and then click on the Single Sign-On (SSO) reset password button.
Now, you can log in into miniOrange account by entering your credentials.
2. Bulk Upload Users in miniOrange via Uploading CSV File.
Navigate to Users >> User List. Click on Add User button.
In Bulk User Registration Download sample csv format from our console and edit this csv file according to the instructions.
To bulk upload users, choose the file make sure it is in comma separated .csv file format then click on Upload.
After uploading the csv file successfully, you will see a success message with a link.
Click on that link you will see list of users to send activation mail. Select users to send activation mail and click on Send Activation Mail. An activation mail will be sent to the selected users.
Click on External Directories >> Add Directory in the left menu of the dashboard.
Select Directory type as AD/LDAP.
STORE LDAP CONFIGURATION IN MINIORANGE: Choose this option if you want to keep your configuration in miniOrange. If the active directory is behind a firewall, you will need to open the firewall to allow incoming requests to your AD.
STORE LDAP CONFIGURATION ON PREMISE: Choose this option if you want to keep your configuration in your premise and only allow access to AD inside premises. You will have to download and install miniOrange gateway on your premise.
Enter LDAP Display Name and LDAP Identifier name.
Select Directory Type as Active Directory.
Enter the LDAP Server URL or IP Address against the LDAP Server URL field.
Click on the Test Connection button to verify if you have made a successful connection with your LDAP server.
In Active Directory, go to the properties of user containers/OU's and search for the Distinguished Name attribute. The bind account should have minimum required read privileges in Active Directory to allow directory lookups. If the use case involves provisioning (such as creating, updating, or deleting users or groups), the account must also be granted appropriate write permissions.
Enter the valid Bind account Password.
Click on the Test Bind Account Credentials button to verify your LDAP Bind credentials for LDAP connection.
Search Base is the location in the directory where the search for a user begins. You will get this from the same place you got your Distinguished name.
Select a suitable Search filter from the drop-down menu. If you use User in Single Group Filter or User in Multiple Group Filter, replace the <group-dn> in the search filter with the distinguished name of the group in which your users are present. To use custom Search Filter select "Write your Custom Filter" option and customize it accordingly.
Click on the Next button, or go to the Authentication tab.
You can also configure following options while setting up AD. Enable Activate LDAP in order to authenticate users from AD/LDAP. Click on the Next button to add user store.
Here's the list of the attributes and what it does when we enable it. You can enable/disable accordingly.
Attribute
Description
Activate LDAP
All user authentications will be done with LDAP credentials if you Activate it
Fallback Authentication
If LDAP credentials fail then user will be authenticated through miniOrange
Enable administrator login
On enabling this, your miniOrange Administrator login authenticates using your LDAP server
Show IdP to users
If you enable this option, this IdP will be visible to users
Sync users in miniOrange
Users will be created in miniOrange after authentication with LDAP
Click on the Next button, or go to the Provisioning tab.
User Import and Provisioning from AD
If you want to set up provisioning, click here for detailed information. For now, we are skipping this step by clicking Skip on Provisioning.
Attributes Mapping from AD
By default userName, firstName, lastName, email are configured. Scroll down and click on Save Configurations. To fetch additional attributes from Active Directory, enable Send Configured Attributes. On the left side, enter the name that you wish to release to the applications. On the right side, enter the attribute name from Active Directory. E.g., if you wish to fetch company attribute from Active Directory, and send it as organization to configured applications, enter the following:
Attribute Name sent to SP = organization Attribute Name from IDP = company
Test Connections
You will see a list of directories in External Directories. Go to the directory you have configured, click Select, then go to Test Connections and click on it.
Click on Test Connection to check whether you have enter valid details. For that, it will ask for username and password.
On Successful connection with LDAP Server, a success message is shown.
Test Attribute Mapping
You will see a list of directories in External Directories. Go to the directory you have configured, click Select, then go to Test Attribute Mapping and click on it.
A pop-up will appear to add the username. After clicking Test, you will see the Test Attribute Mapping Result.
Set up AD as External Directory configuration is complete.
Note: Refer our guide to setup LDAP on windows server.
miniOrange integrates with various external user sources such as directories, identity providers, and etc.
How can I restrict page access on webflow? Is this handled via the scripts?
Yes, our scripts are completely customizable and you can restrict page access based on memberships, groups, company . domain or any other custom attribute of your choice.
What will happen if my customers disable javascript on the browser?
We handle this by adding the no script tags in our script file, this enables redirection of your users to a customizable page with instructions to enable javascript.
