Webflow Single Sign-On SSO

---

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 Single Sign-On (SSO) solution for Webflow.

Challenge faced by Webflow Users

Webflow users want a continuous and seamless access to their 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 login into Webflow platform using their existing credentials.

Follow the Step-by-Step Guide given below for Webflow Single Sign-On (SSO)

1. Configure Webflow in miniOrange

• Login to miniOrange Admin Console.
• Go to Apps >> Manage Apps. Click on Add Application button.



• In JWT App click on Create App.



• In Add Apps tab enter the values and click on Save.
  
  

  Custom Application Name	Choose appropriate name according to your choice.
  Description	Add appropriate description according to your choice.
  Redirect-URL	JWT Endpoint fetched from JWT in the previous step.
  Group Name	Default
  Policy Name	Add policy name according to your Preference.
  Login Method	Password.

• To configure App secret go to Edit against your configured app, Apps>>Select your app>>Edit.






Signature Algorithm

Choose RSA-SHA256

• Click on Save
• Now, You can access Webflow Account Using IDP credentials through the Single-sign-on URL

2. Adding Script on Webflow's End

• In this step add scripts on Webflow's end to replace JWT.
• miniOrange will be providing the script to add on their header or footer section to retreive values from JWT.

3. Configure Your User Directory

• Setup AD as User Directory
• Setup miniOrange as Identity Provider

• Log in to miniOrange Admin Console.
• From the left side menu, click on User Stores >> Add User Store.



• Select User Store type as AD/LDAP.



1. STORE LDAP CONFIGURATION IN MINIORANGE: Choose this option if you want to keep your configuration in miniOrange. If active directory is behind a firewall, you will need to open the firewall to allow incoming requests to your AD.
2. 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 in 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 LDAP Server URL field.
• Click on 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 Distinguished Name attribute.



• Enter the valid Bind account Password.
• Click on 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. To use custom Search Filter select "Custom Search Filter" option and customize it accordingly.



• You can also configure following options while setting up AD. Enable Activate LDAP in order to authenticate users from AD/LDAP. Click on the Save 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
Sync users in miniOrange	Users will be created in miniOrange after authentication with LDAP
Backup Authentication	If LDAP credentials fail then user will be authenticated through miniOrange
Allow users to change password	This allows your users to change their password. It updates the new credentials in your LDAP server
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
Send Configured Attributes	If you enable this option, then only the attributes configured below will be sent in attributes at the time of login



• Click on Save. After this, it will show you the list of User stores. Click on Test Configuration 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.
• Click on Test Attribute Mapping.



• Enter a valid Username. Then, click on Test. Mapped Attributes corresponding to the user are fetched.



• After successful Attribute Mapping Configuration, go back to the ldap configuration and enable Activate LDAP in order to authenticate users from AD/LDAP.

Refer our guide to setup LDAPS on windows server.

• Log in to miniOrange Admin Console.
• Go to Userstore >> Add Userstore.



• Select Userstore type as miniOrange and click on Add miniOrange Identity Source.



• Once done with adding Identity Source, make it default by clicking on Select against the recently added miniOrange Identity Source.
  
  
  
• There are 3 ways to add users in miniOrange:

1. Create User in miniOrange

2. Bulk Upload Users

3. Self User Registration

1. Create User in miniOrange

• Click on Users >> Add User.



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

3. Self User Registration

• miniOrange self user registration allows end users to register themselves using customized registration form. miniOrange admin users can customize the registration form by adding more custom fields according to their choice. Follow the miniOrange guide to customize user self registration page.

4. Webflow SSO Login

• Lets say you have configured miniOrange as userstore.
• So after accessing the Single sign-on(SSO) URL , you will be asked for miniOrange crediantials.



• And on entering the valid credentials, Click on sign in and you will redirected sucessfully to Webflow.