Hello there!

Need Help? We are right here!

miniOrange Email 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

Flutter Single Sign-On (SSO)


Flutter SSO by miniOrange has developed a ready to use Single Sign-On solution for Flutter Apps. Flutter is a cross-platform framework that allows you to create apps for a variety of devices with just one code. miniOrange allows you to setup Single Sign-On(SSO) into using two standard protocols like SAML 2.0 and JSON web Tokens (JWT). Flutter SSO with JWT is achieved by protocol brokering between JWT and SAML. Flutter Apps has support for SSO using JSON Web Token (JWT) tokens. miniOrange allows your users to Single Sign-On into Flutter Apps by verifying Identity with your existing SAML 2.0 compliant Identity Provider and passing JWT tokens to Flutter Apps.

Connect with External Source of Users


miniOrange provides user authentication from various external sources, which can be Directories (like ADFS, Microsoft Active Directory, Azure AD, OpenLDAP, Google, AWS Cognito etc), Identity Providers (like Shibboleth, Ping, Okta, OneLogin, KeyCloak), Databases (like MySQL, Maria DB, PostgreSQL) and many more.



Prerequisites

  • Download the flutter_jwt_connector from here.
  • Copy the path of the flutter_jwt_connector and add it as a package in the pubspec.yaml file of your project.
  • Add jose:0.3.2 as a package.
  • dependencies: flutter: sdk: flutter flutter_jwt_connector: path: D:/sdk-and-connectors/flutter_jwt_connector jose: ^0.3.2
  • Install all the dependencies using
  • flutter pub get

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

1. Configure Flutter in miniOrange

  • Login to miniOrange Admin Console.
  • Go to Apps Click on Add Application button.
  • Flutter  Single Sign-On (SSO) add app

  • In JWT App click on Create App.
  • Flutter  Single Sign On SSO add app

    Flutter Single Sign-On (SSO): saml jwt app

  • In Add Apps tab enter the values and click on Save.
    Custom Application Name The name of your flutter application
    Redirect-URL Enter the app URL where you want to handle the JWT token.
    Identity Source You need to select the user store or the external IDP where the user accounts will be stored.
  • Flutter Single Sign-On (SSO): add jwt app

  • To configure App secret go to Edit against your configured app, Apps>>Select your app>>Edit
  • Flutter Single Sign-On (SSO): edit-jwt-app

    Flutter Single Sign-On (SSO): edit-jwt-app

  • You can download the certificate by clicking on ‘certificate’ in the options of your application. You will need the certificate in the following steps.
  • Flutter Single Sign-On (SSO): download certificate

  • Now, You can access Flutter App using IDP credentials through the Single-sign-on URL as shown in image above.

2. Configure the plugin in your application

  • Select a component that will be responsible for verifying the JWT token most preferably the login component.
  • Import the JWTBuilder class from the flutter_jwt_connector. From the path to which it was moved in step 1 of Pre-requisites.
  • import 'package:flutter_jwt_connector/jwt_builder.dart';
  • You can add a button on your login screen to redirect to the SSO URL. You can get this SSO URL from this step of Configure your application in miniOrange.
  • ElevatedButton(onPressed: () => sso(), child: const Text("Login")) sso() { const url = ''; // "https://swapnilj.miniorange.in/moas/broker/login/jwt/21582?client_id=s9BIi073EBW qyoAJ&redirect_uri=http://localhost:4000/" html.window.open(url, "_self"); } Login button

  • On Clicking the SSO button the user will be redirected to the miniOrange portal for authentication Then the JWT token is returned to your application to the redirect URL you have set while adding your application in miniOrange. In the following steps, we will be verifying this token and retrieving the user details.
  • Retrieve the id_token from the url and pass it down into the login widget
  • Retrieve id token

  • You need to add your x509 certificate that you can get from this step of configure your application in miniOrange.
  • class Login extends StatefulWidget { String? token; Login({Key? key, this.token}) : super(key: key); @override State createState() => _Login(); } class _Login extends State { String x509Cert = "< PLACE YOUR CERTIFICATE STRING HERE >"; @override void initState() { // check if token exists and login if (widget.token != null) { login(); } super.initState(); } login() async { JWTBuilder jwtBuilder = JWTBuilder(); // Initialize the JWT jwtBuilder.parseJwt(widget.token); // set the secret that was shared by your IdP jwtBuilder.setSecret(x509Cert); bool verified = false; Map payload; try { // Compare the hashed jwt with the one received verified = await jwtBuilder.verifyJwt(); } catch (err) { if (kDebugMode) { print(err); } } if (verified) { // Once you find the JWT is verified, you can go ahead and get the data from JWT payload = jwtBuilder.getPayload(); String username = payload['username']; String email = payload['email']; // You can create a user session here if required and navigate to the home page } }
  • Now if the token is verified, the payload which consists of the User details can be saved in local storage or serialized into a User Class and the user now verified can be redirected to the home screen of your application.

3. Configure Your User Directory

miniOrange provides user authentication from various external sources, which can be Directories (like ADFS, Microsoft Active Directory, Azure AD, 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.



  • To add your users in miniOrange there are 2 ways:
  • 1. Create User in miniOrange

    • Click on Users >> Add User.
    • Flutter  VPN 2FA : Add user in miniOrange

    • Here, fill the user details without the password and then click on the Create User button.
    • Flutter  MFA: Add user details

    • After successful user creation a notification message "An end user is added successfully" will be displayed at the top of the dashboard.
    • Flutter  Two-Factor Authentication: Add user details

    • 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.
    • Flutter  2FA: Select email action

    • 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.
    • Flutter  Multi-Factor Authentication: Reset user password
    • 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.
    • Flutter  2FA: Add users via bulk upload

    • In Bulk User Registration Download sample csv format from our console and edit this csv file according to the instructions.
    • Flutter  Two-Factor authentication: Download sample csv file

    • To bulk upload users, choose the file make sure it is in comma separated .csv file format then click on Upload.
    • Flutter  2FA : Bulk upload user

    • 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.
  • Flutter  2FA: Configure User Store

  • Select Directory type as AD/LDAP.
  • Flutter  2FA: Select AD/LDAP as user store

    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.
    3. Flutter  Two-Factor Authentication : Select ad/ldap user store type

  • 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.
  • Flutter  MFA/2FA: Configure LDAP server URL Connection

  • In Active Directory, go to the properties of user containers/OU's and search for Distinguished Name attribute.
  • Flutter  MFA: Configure user bind account domain name

  • Enter the valid Bind account Password.
  • Click on Test Bind Account Credentials button to verify your LDAP Bind credentials for LDAP connection.
  • Flutter  MFA: Check bind account credentials

  • 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.
  • Flutter  2FA : Configure user search base

  • Select a suitable Search filter from the drop down menu. To use custom Search Filter select "Write your Custom Filter" option and customize it accordingly.
  • Flutter  MFA/2FA : Select user search filter

  • 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.
  • Flutter  MFA : Activate LDAP options

    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
    Fallback 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 Connection to check whether you have enter valid details. For that, it will ask for username and password.
  • Flutter  2FA: Test AD/Ldap connection

  • On Successful connection with LDAP Server, a success message is shown.
  • Click on Test Attribute Mapping.
  • Flutter  LDAP successful connection

  • Enter a valid Username. Then, click on Test. Mapped Attributes corresponding to the user are fetched.
  • Flutter  MFA: Fetch mapped attributes for user

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

User Import and Provisioning from AD

  • Go to Settings in the Customer Admin Account.
  • MFA/Two-Factor Authentication(2FA) for   miniOrange dashboard

  • Enable the "Enable User Auto Registration" option and click Save.
  • MFA/Two-Factor Authentication(2FA) for   Enable User Auto Registration

  • (Optional) To send a welcome email to all the end users that will be imported, enable the "Enable sending Welcome Emails after user registration" option and click Save.
  • MFA/Two-Factor Authentication(2FA) for   Enable sending Welcome Emails after user registration

  • From the Left-Side menu of the dashboard select Provisioning.
  • MFA/Two-Factor Authentication(2FA) for   User Sync/Provisioning

  • In Setup Provisioning tab select Active Directory in the Select Application Drop Down.
  • Toggle the Import Users tab, click on Save button.
  • MFA/Two-Factor Authentication(2FA) for   User Sync Active Directory Configuration

  • On the same section, switch to Import Users section.
  • Select Active Directory from the dropdown and click on the Import Users tab, to import all the users from Active Directory to miniOrange.
  • MFA/Two-Factor Authentication(2FA) for   User Sync Import Operation

  • You can view all the Users you have imports by selecting Users >> User List from Left Panel.
  • MFA/Two-Factor Authentication(2FA) for   User List

  • All the imported users will be auto registered.
  • These groups will be helpful in adding multiple 2FA policies on the applications.

miniOrange integrates with various external user sources such as directories, identity providers, and etc.

Not able to find your IdP or Need help setting it up?


Contact us or email us at idpsupport@xecurify.com and we'll help you setting it up in no time.





Want To Schedule A Demo?

Request a Demo
  


Our Other Identity & Access Management Products