Implementing Hosted Pages

Overview

Today, most E-commerce websites rely on third-party hosted pages for sign-ups, sign-ins, checkouts, payments, and other user workflows.

Hosted Pages are third-party landing pages that handle business workflows by taking care of the logic, flows, and views. They cater to different business use cases like user registration, verification, authentication, OTP validation, customer data protection, security, and more.

Problem Statement

cidaas' V1 provides default or custom UI development to end-user(s). While this works for a simple business model, multi-tenant customers need a different page style for various workflows. However, they don't want to host their pages outside of their organization. Instead, they'd like to control different page views when the UI is subject to frequent use case-based changes.

The Solution

cidaas' V2 introduces Hosted Pages Concepts let you execute user workflows by integrating your app to a pre-configured redirect page that supports all the required backend services like Register, Login, Logout, Password Change, User Verification, and more). Here, you can personalize the style, colors, layout, page components, navigation, look and feel to your brand through some confguration changes. Furthermore, you can map each pre-configured page that you've created to a Hosted Page Group, which is a collection of all the required Hosted Pages. This group can then be linked to your application under cidaas Admin UI > Edit App > App Settings.

Using our Hosted Pages feature, you can integrate backend services (both Default and Custom) for specific user actions on your app using either:

1. Your custom enterprise UI, or

2. cidaas' default UI design.

With our Hosted Page services, you can customize webpages to execute the required services for your app users. They will be redirected to the mapped Hosted Page URL where the design and functionalities configured on the cidaas Admin UI will apply.

The following is the working hierarchy of Hosted Pages on cidaas.

Note: The pages are predefined while only the content, page components like logos, colors, etc. and other admin settings can be customized. Basically, we will offer all the possible self-service pages in the Hosted Pages section.


How Hosted Pages Work?

On cidaas, applications control the entire business flow. Thus, they need to be mapped to the right Hosted Page Group (default or custom) to enable the required backend services on the redirected page (the URL linked to the Hosted Page).

This will help you deliver exceptional user experiences on your app when you configure various advanced settings for services like registration, login, consent, authentication, etc., in additon to, the scopes defined for the application.

Hosted Pages provide an OAuth 2.0-compliant implementation of end-user flows for user registration, verification, authentication, consent, password management, etc.

For example, you can set up Multi-Factor Authentication (MFA), Passwordless Authentication, email verification, and other options for sign in using social providers or any other OpenID Connect (OIDC) or SAML compliant IAM providers.

Example

Let’s illustrate how Hosted Pages can be used with the example of Carbook.

The Carbook app may have multiple modules like User register and Fleet Management.

On the user registration screen, only simple user information is requested for user onboarding. However, in the Fleet Management page, additional information like their purchase history may be required to complete a request.

In this case, we need to define two Hosted Page Groups to redirect the user to the right page for information collection or any other action. A significant advantage is that you can map Hosted Page Groups to web and mobile apps.

It's important to note that with a dedicated Hosted Page for each module workflow, unique and custom design and functionality are made available for each business use case. This improves customer experience and convenience on your app.

Benefits of Hosted Pages

Here are a few reasons to consider cidaas’ Hosted Pages Solution for your business.

Quick implementation with no-code configuration and easy setup on the cidaas Admin UI.


Provides the ability to instantly integrate your app to our pre-configured (Default) or an existing custom Hosted Page Group when you create a Hosted Page group.


Lowered security risks, and cost overheads since sensitive data is managed, transmitted, and utilized professionally without being stored on your server.


Improved user experience for 16 features (services).


Create a Custom Hosted Page Group by selecting only the required services from the list.


Simple and intuitive navigation and configuration on our Admin UI.


Multi-device friendly implementation.


Multiple Advanced App Settings can be configured for your Hosted Pages.


Embed your existing HTML code or link an existing URL to a Hosted Page.


Create multiple language-friendly hosted pages based on the user's language preference(s).


Instantly apply a single configuration change to multiple page(s) in the same Hosted Page Group.


How to use Hosted Pages?

Step 1: Use the Hosted Page in your app.

Under App Settings on the cidaas Admin UI, click on your app and change its Hosted Page Group.

Step 2: Make sure to select the corresponding scopes for hosted_pages_read and hosted_pages_write under App Settings for your app to avail cidaas' Hosted Pages Services.

Step 3: Get redirected to the linked Hosted Page based on the Hosted Page Group that you're using (Default or Custom).

You need to pass your cidaas authority parameters in the URL of your authz page which include client_id, response_type and redirect_uri to access the page.

For example:

https://nightlybuild.cidaas.de/authz-srv/authz?client_id=123&response_mode=query&response_type=token&view_type=login&redirect_uri=https://myexamplepage.de


Optional Step: Change Hosted Page settings to use localhost Under Settings > Hosted Pages, click on the Edit option your Hosted Page Group and change the URLs you want to use to localhost.

What happens when you request for a Hosted Page?

When you request for a Hosted Page, a secure & unique URL will be returned which you could either embed (in the HTML content) or redirect (to a specific URL) depending upon the embed parameter value that has been passed.

Embed in HTML:

Using the embed parameter, you can embed the Hosted Page in your website where your users do not have to leave your website and can avail the best user experience.

Embed in your website URL:

Types of Hosted Pages on cidaas

cidaas provides options to configure Default Hosted Page and Custom Hosted Page groups.

Default Hosted Page Group

You can use cidaas’ Default Hosted Page Group to integrate your app into our pre-configured solution (consisting of Available page templates and functionalities) or your own enterprise solution. This is useful if you want to make certain key functionalities immediately available to your app users like Register, Login, Reset Password, etc., without spending time on additional configuration for simple business use cases.

However, you can change the selections for the Default Hosted Page Group's Available Pages, Select Locale, and URL/HTML template content to suit your app needs.

Sample Default Hosted Page Output

Note: Here, the App Primary Color and App Accent Color have been changed from their default values under Edit Apps > App Details in the Admin UI.

Custom Hosted Page Group

cidaas lets you create and configure Custom Hosted Page Groups for your apps. With a Custom Hosted Page Group, you can define the page template, colors (background and foreground), icons & other screen components, outlay, login options, links, and more for various pages. This helps give a personalized branding touch to these pages, in addition to, helping you customize various Advanced Settings for each Custom Hosted Page like Register or Login for superior customer experience delivery.

Sample Custom Hosted Page Output

Configuring Default Hosted Page Groups

Important Note: The Default Hosted Page Group can only be edited and not deleted.


Creating a Default Hosted Page Group

The Default Hosted Page is created automatically on cidaas and does not have to be created explicitly.

Editing the Default Hosted Page Group

To configure Hosted Pages, navigate to Dashboard > Settings > Hosted Pages.

Option 1:

1. Click on the Edit icon of the “default” Hosted Page group.

2. This will redirect to the Edit Default Group page. In the Edit tab, you will see the following input fields with pre-populated values.

a. Available Pages: This is a mandatory field and shall let you select the page(s) from the list that will be available in the default hosted group in your app. The default selection is “LOGIN” for the login page. Click here to view the various options available for Available Pages under Default Hosted Page Group.

You can search for a specific option with the search feature.

b. Select Locale: This is a mandatory field and shall let you select the language in which information on your default hosted page will be available. You can set this option to meet the local language requirements of your app users. The default selection is “English (United States).”

You can search for a specific option with the search feature.

c. The next field “Add Hosted Page By:” lets you add the Hosted Page to the group in one of these two ways:

  • Using the default URL
  • Using the default HTML template content

URL

1. Click the URL button as shown below.

2. Then, provide the default URL link for the URL field. This will map this URL to the selected Available Pages option. In the example below, the highlighted URL is mapped to “LOGIN”.

3. Finally, click on the Save button for the page to get updated. Clicking on the Cancel button redirects to hosted pages.

Sample Screen

Whichever options are defined under the Default Hosted Pages, get displayed in the cidaas login URL (URL provided in the Edit page), as shown below.

HTML

a. Click the HTML Content button for the Add Hosted Page by: option.

b. Paste the Default cidaas provided HTML Content in the Template Content field.

c. Then, click on the “Preview” tab to view the changes in the Default Hosted Page.

d. Finally, click on the Save button in the Edit page for the page to get updated. Clicking on the Cancel button will redirect back to the Settings > Hosted Pages section.

e. The Reset to Last button helps reset the HTML Template Content.

Sample Screen

This page displays the HTML page based on the HTML Template code content provided.

Setting the Default Hosted Page Group for you App

To set the Hosted Page Group as Default for your app, Under Apps List > Edit App (click on edit icon of your app) > App Settings, select Default from the dropdown list for the Hosted Page Group field. Then, click on Next and finally, click on Save to save this configuration.

Custom Hosted Page Group Configuration

Creating a Custom Hosted Page Group

1. For creating a custom Hosted Page Group, click on the Create Hosted Page Group button under Settings > Hosted Pages as shown below.

2. In the Create Hosted Page Group page, type the group name in the Group Name textbox and click on CREATE.

You can click on the Configure Hosted Page Group icon to view the dropdown list and select an existing Hosted Page Group from which you want to copy the configuration to the new Group.

Selecting default will apply all the services configured for the Default Hosted Page Group to the new Hosted Page Group.

Similarly, you can apply all the services configured for a Custom Hosted Page Group to the new Group.

3. A success confirmation window with the message “Hosted Page Group Created Successfully” will appear to indicate that the new Hosted Page Group has been created. Click on Okay to continue.

4. The Custom Hosted Page Group you’ve created will appear in the Hosted Page Group list as shown below.

5. Your New Hosted Page Group is now ready! You can edit this Hosted Page Group to configure Available Pages, Select Locale, URL, and other options.

How to initialize the SDK?

Step 1: Create a cidaas app.

Go to your cidaas Admin UI and create a new cidaas app by clicking on the +Create New App button.

Provide the details of the app in the App Details page.

Step 2: Initialize the SDK.

Initialize the SDK by providing the options of its cidaas app which you created in Step 1.

(window as any).cidaas = new CidaasSDK.WebAuth({
    authority: URLHelper.getAuthority(),
    client_id: URLHelper.getClientId(),
    redirect_uri: params.get('redirect_uri'),
    post_logout_redirect_uri: params.get('redirect_uri') + "logout",
    popup_post_logout_redirect_uri: params.get('redirect_uri') + "logout",
    silent_redirect_uri: params.get('redirect_uri') + "logout",
    response_type: "id_token token code",
    scope: "cidaas:register"
  });

Selecting the Custom Hosted Page Group for your App

The Hosted Page Group you have just created will appear in the Hosted Pages: list for your app under Edit App > App Settings of the cidaas Admin UI. To map the same to your app, please do the following:

1. Navigate to Apps > App Settings > Apps List. Click on the Edit icon.

2. Under Edit App > App Settings > Hosted Page Group, select the name of the Hosted Page Group you have just created from the list.

3. Then, click on the Save button.

4. The following confirmation window appears with the message “App Saved Successfully.” Next, click on “Okay” to continue.

This will complete mapping the new Hosted Page Group to your application. Your customer will be redirected to this Hosted Page from your app for the Hosted Page mapped to an action like Register, Login, Login_success, etc.

Editing a Custom Hosted Page Group

1. Once you’ve created a custom Hosted Page Group on cidaas, click on the Edit icon to start editing the details of the Hosted Page Group.

2. Under the Edit page of the custom Hosted Page Group, you can change the default selections for the following by choosing a value from the list.

a. Available Pages– Select a page from the dropdown list to be mapped to this group.

b. Select Locale - Choose a value for locale (language) from the listed options (same as those for Default Hosted Page Group).

You can search for a specific value from the list using the search function.

c. Finally, provide the redirect URL for the selected Available Pages option in the URL textbox. Then, click on the Save button to save your settings.

3. A confirmation window with the message “Hosted Page Group Updated Successfully” will pop up as shown below.

4. Click on Okay to proceed. The configuration edits made to the selected hosted group will be updated for the Custom Hosted Page Group.

Deleting a Custom Hosted Page Group

1. You can delete an existing custom Hosted Page Group on cidaas by clicking on the delete icon of the desired Hosted Page Group tab.

2. A confirmation window appears with the message “Do you want to delete this Group?” when the icon is clicked.

3. Click on OK to delete the Hosted Page Group.

4. A system confirmation window appears with the message “Hosted Page Group Deleted Successfully” as shown below.

5. Click on OK to continue. You will also notice that the selected Hosted Page Group has been removed from the Hosted Page Groups list as shown below.

This completes the configuration settings available for Custom Hosted Page Group on cidaas.

If you face any issues while configuring a Custom Hosted Page Group on cidaas, please contact our support team for further assistance.

Now, let's move on to the details of the Available Pages on cidaas for Default and Custom Hosted Page Groups' mapping.

Available Default Hosted Pages

Here is the list of Available Pages that you can configure for your Default Hosted Page Groups on your app.

Important Note: Only one Default Hosted Page Group is available on cidaas. You can map any of the below Hosted Pages to this group.


Register

The user provides the requisite information on this page to register or sign up on the application.

Hosted Pages Admin UI Settings

Go to Settings > Hosted Pages > Edit Default Hosted Page Group and configure the following settings.

Sample Screen

cidaas Admin UI App Settings

Scopes

Define certain registration scopes for your app's client ID in the Admin UI under Edit App > App Settings > Scopes. For example, allow registering a new user only if the cidaas:register scope is defined, and register using email, profile, address, etc. by adding the relevant scopes as shown below.

Once you map the Hosted Page Group under App Settings, these scopes will apply to the Register Hosted Page.

cidaas Admin UI Advanced Settings

Registration Fields

Navigate to Edit App > App Settings > Advance Settings > Registration Fields.

Here, you can select the Allowed (that will be visible) Fields and the Required (mandatory) fields that should appear during user registration on your app. You can also enable or disable Mobile Number Verification and Email Verification on your Register Hosted Page using this Advanced Setting option.

These options will be implemented in the redirect URL of the Register Hosted Page that you've configured under Settings > Hosted Pages.

You can find more details on how to configure Registration Fields here.

Flow Settings

This Advanced setting lets you define the Registration flow at the app level w.r.t. Login namely,

1. Auto-login After Register - As soon as the user is registered successfully, they are logged into the application.

2. Register with Login Information - When this option is enabled, the user gets automatically registered when he opts for Social Login (Using Social providers such as Facebook/ Google etc.) on the Login page. If this option is disabled, when a first-time user tries to login to the application (using Social login) without registering, an error message will be displayed. The users will have to then use social login on the registration page or register themselves using the conventional registration method.

The other user checks done during registration include the following and can be enabled or disabled:

1. Enable Deduplication: You can enable deduplication at app level to ensure that redundant users accounts are not created during registration.

2. Allow Disposable Email: You can allow user registration using disposable email (i.e. registration using online insecure email generators used for testing such as abc@mailinator.com). When this option is disabled, it means disposable emails are blocked during registration. You can find more information here.

3. Validate Phone Number: When you enable this option, the user’s phone number is verified at the time of registration.

Defining the Registration Page Fields

Under Settings > Registration Page Fields of the Admin UI Dashboard, you can create and configure the properties of the fields on your Registration Page mapped to your Hosted Page Group.

For example, you can enable or disable a new field first_name on the registration page, mark it as Required (mandatory), set it as Read-Only, or an internal field. First, you need to create this Registration Field and then configure its settings like Field Type, scopes, and Permissions under Edit Field > Field Setting.

You can get more information on Field Setting for Registration Fields here.

Important Note: Remember to set the Scopes to cidaas:registration_setup_read and cidaas:registration_setup_write while you enable a Registration Field.


Sample Screen

Configuration

Output

REGISTER SUCCESS

Once the user has completed the registration, they will be redirected to the REGISTER_SUCCESS Hosted Page, only if this page is enabled for the given cidaas client.

Hosted Pages Admin UI Settings

Go to Settings > Hosted Pages > Edit Default Hosted Page Group and configure the following settings.

Sample Screen

REGISTER ADDITIONAL INFO

The user can provide additional information when redirected to the REGISTER_ADDITIONAL_INFO page if it was not provided during registration. This page is required for progressive registration which will help collect any mandatory information not provided by the user to complete their registration.

Hosted Pages Admin UI Settings

Go to Settings > Hosted Pages > Edit Default Hosted Page Group and configure the following settings.

Sample Screen

How to implement the Register flow?

Step 1: Show Registration options.

The options depend on the input given for the user exists check and include the following.

  1. R1: IVR, SMS and Password as options if mobile number was given.
  2. R2: Email and Password as options if email was given.
  3. R3: Social Login if social login was selected.

Step 2: Register user.

The user needs to be registered before a verification setup can be done in the next step.

cidaas.register(
  {
    provider: "SELF",
    invite_id: this.invited_id,
    username: regForm.uid,
    email: this.getUidType() === "EMAIL" ? regForm.uid : undefined,
    mobile_number: this.getUidType() === "MOBILE" ? regForm.uid : undefined,
  },
  { requestId: this.requestId }
);

Step 3: Set up verification.

Depending on the registration option the user opted for in Step 1, IVR/SMS/Email or Social Login needs to be set up for the user.


cidaas.initiateAccountVerification({
  verificationMedium: verificationType.toLowerCase(),
  requestId: this.requestId,
  processingType: "CODE",
  sub: this.userSub,
});

Step 4: Provide the missing fields.

Now, the user will be asked for the any missing fields that are mandatory to complete the registration. This call checks for missing fields and captures the missing registration fields from the user.


cidaas.getMissingFieldsLogin(this.trackId);
cidaas.getRegistrationSetup({requestId: this.requestId, acceptlanguage: navigator.language});

This completes the Register Flow Implementation.

LOGIN

The user provides their credentials (User ID and password) on this page to gain access to the application (landing page).

Hosted Pages Admin UI Settings

Go to Settings > Hosted Pages > Edit Default Hosted Page Group and configure the following settings.

Sample Screen

cidaas Admin UI Advanced Settings

You can add Login Providers to your Default Login Hosted Page by navigating to Apps > Edit App > App Settings > Advance Settings > Login Providers.

The Login Providers option lets you configure the login options from various providers like social providers, SAML providers, etc. that you require for your app on the Login hosted page.

By default, the allowed providers are PayPal and Facebook. You can add a Custom Login Provider from either your organization or any other provider whose services you want to integrate to your app.

Similarly, you can add SAML and Active Directory Providers from the list to configure on the Login Hosted Page of your app.

You can configure additional Login settings on the cidaas Admin UI for your app,

Adding Guest Login

You can add the Guest Login option on your Default Login Hosted Page to allow non-registered users to access the limited features of your app.

You can find more details on Guest Login configuration here.

Adding Bot Detection

You can add the Bot Detection option on your Default Login Hosted Page to check and confirm if your app is being accessed by a human user or a bot.

For this, go to Apps > Edit App > App Settings > Advance Settings > Bot Detection, turn on the Enable Bot Detection switch, and select the Captcha Bot from the list of configured options.

Then, Save this configuration.

Adding Captcha

You can add the Captcha option on your Default Login Hosted Page to grant access to the users only if they provide the correct Captcha code.

For this, go to Apps > Edit App > App Settings > Advance Settings > Captcha Settings, and select the Captcha you want to set from the list of configured options.

Then, Save this configuration.

You can find more details on cidaas' Captcha Settings here.

Adding Remember Me Option

You can add the Remember Me option on your Default Login Hosted Page to allow the user to save their credentials in the system for granting automatic access during consecutive logins.

For this, go to Apps > Edit App > App Settings > Advance Settings > Remember Me, turn on the toggle switch for "Make Remember Me as selected in login page", and Save this configuration.

Adding Groups and Role restriction

You can add the Groups and Role restrictions on your Default Login Hosted Page to allow only specific users belonging to a specific group (within cidaas or in your organization) mapped to allowed roles like admin, manager, etc., to access your app through the Default Login Hosted Page.

For this, go to Apps > Edit App > App Settings > Advance Settings > Groups & Role restriction.

Under Login restriction, select the Roles from the list for cidaas group, cidaas Admin group, and the Custom group created for your organization. Then, Save your selections.

After this configuration, only the user groups and roles mapped to your app as shown in the sample advanced settings configuration below will be allowed to login through the Default Login Hosted Page.

Flow Settings

Here, you can enable or disable the following Login options.

1. Auto Login after Register: Lets the user login to the app automatically after the registration is complete.

2. Allow Login with: Select one or more option(s) from the list to let the user login with options like Email, Mobile, User Name, Customer Number, cidaas ID Valiator, Employee Number, etc.

3. Register with Login Information: Lets a new user login to your app instantly while registering them in the background with the Login information.

4. FDS Enabled: When you enable this option, the cidaas FDS detects if the user trying to login is legitimate based on pre-defined criteria.

5. Enable Passwordless Auth: Lets your user login using Passwordless Authentication (without providing the password for the username) where an alternate method like Email or SMS OTP verification is used for logging in.

cidaas Admin UI General Settings

You need to individually configure Social Providers, Custom OAuth2 & OpenID Connect Providers, SAML SP, and AD Providers for the Login page under Settings > Login Providers on the cidaas Admin UI where the details for integration to enable seamless login are described.

Based on the configurations done for different login provider pages here, the options will be available under App Settings.

You can find more details on how to configure various login providers under Settings > Login Providers here.

Based on the Login Providers you set for your app, the Default Login Hosted Page shall appear. A sample screen is shown below.

How to Implement the Login Flow?

Step 1: Check if user exists.

SDK Code

The SDK call used to get the login providers is given below.

this.http.post(URLHelper.getAuthority() + '/users-srv/user/checkexists/' + requestId, { email: ctrl.value })
      .subscribe((res: any) => {
        if (!res) {
          this.email.setErrors({
            isInvalid: true
          });
        } else {
          this.getMFAList(ctrl.value);
          PasswordlessComponent.verified = true;
        }
      });

Step2: Retrieve Login Providers.

SDK Call


cidaas.getClientInfo({
  requestId: requestId,
});

JSON Response Example

{
  "success": true,
  "status": 200,
  "data": {
    "passwordless_enabled": true,
    "login_providers": [],
    "policy_uri": "https://www.privacy.com",
    "tos_uri": "https://www.agb.com",
    "imprint_uri": "https://www.imprint.com",
    "client_name": "cspace-test",
    "client_id": "3aa4202a-12b4-4d67-83e9-7bf8a701e282",
    "client_display_name": "Cidaas Space Test",
    "allowed_mfa": [
      "BACKUPCODE",
      "EMAIL",
      "FACE",
      "FIDO2",
      "FIDOU2F",
      "IVR",
      "PASSWORD",
      "PATTERN",
      "PUSH",
      "SEALONE",
      "SECURITY_QUESTION",
      "SMS",
      "TOTP",
      "TOUCHID",
      "VOICE"
    ],
    "allow_login_with": ["EMAIL", "MOBILE", "USER_NAME"],
    "email_verification_required": true,
    "mobile_number_verification_required": true,
    "enable_classical_provider": true,
    "is_remember_me_selected": true,
    "enable_bot_detection": false,
    "ask_captcha": true,
    "bot_provider": "CIDAAS"
  }
}

Step 3: Retrieve the verification setups of the user.

SDK Call


cidaas.getMFAListV2({ 
email: user,
requestId: requestId 
})

JSON Response Example

{
  "success": true,
  "status": 200,
  "data": {
    "configured_list": [
      {
        "type": "EMAIL",
        "mediums": [
          {
            "id": "c915ffb1-466f-4461-8346-fd574a63f120",
            "key_name": "jak******ser@w***s.de"
          }
        ]
      }
    ]
  }
}

Step 4: Send the verification code/request.


cidaas.initiateEmailV2({
  email: this.user,
  request_id: this.requestId,
  usage_type: "PASSWORDLESS_AUTHENTICATION",
});

Step 5: Authenticate and Login.

SDK Call


cidaas.authenticateEmailV2({
  "exchange_id": PasswordlessComponent.exchange_id,
  "sub": PasswordlessComponent.sub,
  "pass_code": ctrl.value
});
cidaas.passwordlessLogin({
  status_id: res.data.status_id,
  sub: res.data.sub,
  requestId: this.requestId,
  verificationType: this.verificationType,
});

This completes the Login Flow Implementation.

LOGIN SUCCESS

The LOGIN_SUCCESS page which is optional, will be displayed after a successful login. A meaningful use case is where mobile apps handle the browser request for saving the password.

Hosted Pages Admin UI Settings

Go to Settings > Hosted Pages > Edit Default Hosted Page Group and configure the following settings.

Sample Screen

cidaas Admin UI Advanced Settings

You have to enable the Login Success Page to redirect the user to your Default LOGIN_SUCCESS Hosted Page on your app. For this, navigate to Apps > Edit App > App Settings > Advance Settings > Success Page.

Then, turn on the toggle switch for Enable Login Success Page and click on Save.

LOGOUT SUCCESS

The user is redirected to the LOGOUT_SUCCESS (optional) page after logging out successfully from the application. This page will be displayed only if it is enabled for the given cidaas client.

Hosted Pages Admin UI Settings

Go to Settings > Hosted Pages > Edit Default Hosted Page Group and configure the following settings.

Sample Screen

cidaas Admin UI Advanced Settings

You have to enable the Login Success Page to redirect the user to your Default LOGIN_SUCCESS Hosted Page on your app. For this, navigate to Apps > Edit App > App Settings > Advance Settings > Success Page.

Then, turn on the toggle switch for Enable Login Success Page and click on Save.

PASSWORD FORGOT INIT

In the PASSWORD_FORGOT_INIT page, your app users can provide their E-mail/Mobile number to authenticate themselves and proceed with resetting their password or click a button to trigger the password reset.

Hosted Pages Admin UI Settings

Go to Settings > Hosted Pages > Edit Default Hosted Page Group and configure the following settings.

Sample Screen

cidaas Admin UI Advanced Settings

1. Make sure that you have selected the options EMAIL and SMS for the Authentication: field under App Settings > Advance Settings > Authentication to initiate the (Email or SMS OTP) service through the mapped Hosted Page.

PASSWORD SET

On the PASSWORD_SET page, the user can provide their old password, new password and re-confirm the new password to reset their current password.

Hosted Pages Admin UI Settings

Go to Settings > Hosted Pages > Edit Default Hosted Page Group and configure the following settings.

Sample Screen

cidaas Admin UI Password Policy Settings

If you want to set the Password Policy on your Password Set Default Hosted Page, then, you need to either create a new Password Policy, set its configurations, and then, map it to your app (under Advanced Settings), or use an existing Password Policy from the list.

1. To create a new Password Policy, go to Settings > Password Policy, then, click on the Create Password Policy button as shown below.

Then, set up the values for the fields in the Password Policy Settings panel as shown below.

To set up a Password Policy from the available options under Password Policy List, then, click on the Edit icon of any custom password policy you'd like to configure for your app.

2. In the Edit Password Policy page > Password Policy settings, you can configure the fields for minimum and maximum character counts, digits, and special character counts, and also enable or disable both Upper and Lower-case characters.

If the user authentication method of your app is set to password (Advance Settings > Password) on the Login page (Default Login Hosted Page), then, this password policy configuration will apply to it.

cidaas Admin UI Advanced Settings

To map a Password Policy you've created, do the following.

1. Navigate to Apps > Edit App > App Settings > Advance Settings > Password policy settings.

2. Here, select the password policy you want to map to your app from the list.

3. Finally, Save this configuration.

The configured Password Policy will apply to the PASSWORD_SET Default Hosted Page when your user tries to reset the password.

Sample Screen

Important Note: The Password option should be configured under Advanced Settings > Authentication for your application before configuring the PASSWORD_SET Default Hosted Page to enable password authentication. Please refer to the image below to configure this option.


PASSWORD SET SUCCESS

The user is redirected to the PASSWORD_SET_SUCCESS page which displays a success confirmation message when the password is reset successfully.

Hosted Pages Admin UI Settings

Go to Settings > Hosted Pages > Edit Default Hosted Page Group and configure the following settings.

Sample Screen

VERIFICATION INIT

After a user has registered himself, the VERIFICATION_INIT page is displayed stating that the user has to verify his mobile number (SMS) or Email address via a system-generated OTP to proceed further.

Hosted Pages Admin UI Settings

Go to Settings > Hosted Pages > Edit Default Hosted Page Group and configure the following settings.

Sample Screen

VERIFICATION COMPLETE

The user can complete the verification by entering the verification code (OTP received via SMS or Email) in the VERIFICATION_COMPLETE page. This page also displays a message confirming if the verification was successful or failed.

Hosted Pages Admin UI Settings

Go to Settings > Hosted Pages > Edit Default Hosted Page Group and configure the following settings.

Sample Screen

cidaas Admin UI Advanced Settings

1. Make sure that you have selected the options EMAIL and SMS for the Authentication: field under App Settings > Advance Settings > Authentication to initiate the (Email or SMS OTP) verification on your app.

The terms & conditions/policy related information can be previewed before acceptance/denial on the CONSENT_PREVIEW page. If the flag askfor is set to true for this page on the Admin UI, the user(s) will be prompted to accept or deny their consent to proceed further here. If askfor is set to false, just information about the consent is displayed.

When the user selects the Privacy Policy checkbox on the Register page, they are redirected to this page.

Hosted Pages Admin UI Settings

Go to Settings > Hosted Pages > Edit Default Hosted Page Group and configure the following settings.

Sample Screen

cidaas Admin UI Advanced Settings

To map a Login Consent page you've created, do the following.

1. Navigate to Apps > Edit App > App Settings > Advance Settings > Consent Management.

2. Here, you need to pick one or more Consent Groups from the list for Select Login Consents: that you want to map to your app and click on Save.

The configurations that you've set for the selected Login Consent Group will reflect on your CONSENT_PREVIEW Hosted Page during Login.

You can find more information on how to create a Consent Group and add the Group Name and Description here.

During login (first OAuth request), if the admin passes any scope and that scope is marked as "required", then, they will be redirected to the CONSENT_SCOPES page.

Hosted Pages Admin UI Settings

Go to Settings > Hosted Pages > Edit Default Hosted Page Group and configure the following settings.

Sample Screen

MFA REQUIRED

In case the user has enabled multi-factor authentication on the application in the Admin UI, they will be redirected to the MFA_REQUIRED hosted page. This page will ask for additional authentication methods such as email, TOTP, etc. based on what is configuration.

The cidaas Authenticator app helps implement Two-step Verification or MFA. You can find more details here.

Hosted Pages Admin UI Settings

Go to Settings > Hosted Pages > Edit Default Hosted Page Group and configure the following settings.

Sample Screen

cidaas Admin UI Settings

On the cidaas Admin UI, you need to configure MFA Settings to ensure that the Two-step Verification service works on the redirected Hosted Page.

In the Dashboard menu, Go to Multifactor Settings > MFA Settings to configure your app's MFA settings by turning on the toggle switch of the Authentication Method(s) you'd like to offer to your users.

You can find more information on MFA Settings here.

Additionally, you need to configure the Physical Verification Set-up on your Admin Profile for the following options by navigating to Admin Profile > My Account > Physical Verification Setup.

Configured Authentication Types

1. Text-Message: User Authentication using OTP/verification code to the registered mobile text message/SMS.

2. Email: User Authentication using OTP/verification code sent via the registered email ID.

Setup Physical Verification

1. Face Recognition: Physical user verification using the registered facial recognition biometrics through the cidaas Authenticator app.

2. TouchID: Fingerprint biometrics registered through the cidaas Authenticator app.

3. Voice Recognition: Voice recording biometrics registered through the cidaas Authenticator app.

4. Pattern: Register a secret verification pattern for your app using the cidaas Authenticator app.

5. IVR Recognition: Verification codes are sent via voice calls.

6. SmartPush: Receive verification codes through PUSH messages using the cidaas Authenticator app.

7. TOTP: Receive verification codes even when your phone is offline using the cidaas Authenticator app or Google Authenticator app.

8. Backup Code: Receive secret backup codes if you lose your phone or can’t receive codes via SMS, cidaas Authenticator app, or voice calls.

9. FIDO Webauthn: Use security key devices or native device biometric for verification.

Advanced App Settings

The following steps will help you map the desired authentication service to your app using 2FA.

1. Navigate to Apps > Edit App > App Settings > Advance Settings > Authentication. Here, turn on the toggle switch for Always ask for 2FA to ensure that MFA is enabled for your app.

2. Next, select the Authentication options from the list that includes, EMAIL, SMS, TOTP, 1PASSWORD, BACKUPCODE, FACE, IVR, PATTERN, PUSH, TOUCHID, VOICE, FIDO, SECRETQUESTION, and more to make the service available on the mapped Hosted Page.

Implementing SDKs

The SDK call used to get the verfication setups is:


cidaas.getMFAListV2({ 
email: user,
requestId: requestId 
})

An example response for Email is:

{
  "success": true,
  "status": 200,
  "data": {
    "configured_list": [
      {
        "type": "EMAIL",
        "mediums": [
          {
            "id": "c915ffb1-466f-4461-8346-fd574a63f120",
            "key_name": "jak******ser@w***s.de"
          }
        ]
      }
    ]
  }
}

You can setup other verification methods as well by changing the value for type and mediums in the above code.

This completes the required setup for your MFA_REQUIRED Hosted Page.

Sample Screen (MFA during Login)

ACCOUNT DEDUPLICATION

If a new user tries to register with an existing email address or user profile, the ACCOUNT_DEDUPLICATION Hosted Page will ask the user if they want to use this profile, link the two accounts, or create a new user account. This is useful in preventing duplicate user accounts and ensuring that only one unique instance of user is retained on the server.

You can find more details on cidaas' user deduplication feature here.

Hosted Pages Admin UI Settings

Go to Settings > Hosted Pages > Edit Default Hosted Page Group and configure the following settings.

Sample Screen

cidaas Admin UI Settings

On the cidaas Admin UI, you can enable or disable the deduplication check for a registered user on your app with the following steps.

1. Navigate to Apps > App Settings > Edit App > Advance Settings > Flow Settings.

2. Under Flow Settings, ensure that Allow Login With is set to Email and USER_NAME. Then, if you want to Allow Deduplication, turn on the Enable Deduplication switch as shown below, otherwise, turn off this switch (slide the switch to left), and Save this configuration.

This will enable/disable Deduplication on your configured Hosted Page.

ERROR

The user is redirected to this page if an error occurs in the system.

Hosted Pages Admin UI Settings

Go to Settings > Hosted Pages > Edit Default Hosted Page Group and configure the following settings.

Sample Screen

Available Custom Hosted Pages

Naming Convention Alert: When you set the Available Pages value or Page ID for Custom Hosted Pages, please ensure you provide the same name for redirect page name in URL as shown in the example below.


Important Note: Any number of Custom Hosted Page Groups can be created on cidaas to include all or only specific Hosted Pages from the Available Pages list.


Here is the list of Available Pages that you can configure for your Custom Hosted Page Groups on your app with the same definitions and functionalities as their Default Hosted Page Group counterparts.

You can change the value for Select Locale and need to set the URL to a redirect page of your enterprise or a custom landing page for your brand using the cidaas UI.

CONSENT_PREVIEW (CUSTOM)

This page will have custom elements included but works the same as Default CONSENT_PREVIEW Hosted Page.

Hosted Pages Admin UI Settings

Go to Settings > Hosted Pages > Edit Default Hosted Page Group and configure the following settings.

Sample Screen

CONSENT_SCOPES (CUSTOM)

This page will have custom elements included but works the same as Default CONSENT_SCOPES Hosted Page.

Hosted Pages Admin UI Settings

Go to Settings > Hosted Pages > Edit Default Hosted Page Group and configure the following settings.

Sample Screen

ERROR (CUSTOM)

This page will have custom elements included but works the same as Default ERROR Hosted Page.

Hosted Pages Admin UI Settings

Go to Settings > Hosted Pages > Edit Default Hosted Page Group and configure the following settings.

Sample Screen

LOGIN (CUSTOM)

This page will have custom elements included but works the same as Default LOGIN Hosted Page.

Hosted Pages Admin UI Settings

Go to Settings > Hosted Pages > Edit Default Hosted Page Group and configure the following settings.

Sample Screen

LOGIN_SUCCESS (CUSTOM)

This page will have custom elements included but works the same as Default LOGIN_SUCCESS Hosted Page.

Hosted Pages Admin UI Settings

Go to Settings > Hosted Pages > Edit Default Hosted Page Group and configure the following settings.

Sample Screen

LOGOUT_SUCCESS (CUSTOM)

This page will have custom elements included but works the same as Default LOGOUT_SUCCESS Hosted Page.

Hosted Pages Admin UI Settings

Go to Settings > Hosted Pages > Edit Default Hosted Page Group and configure the following settings.

Sample Screen

MFA_REQUIRED (CUSTOM)

This page will have custom elements included but works the same as Default MFA_REQUIRED Hosted Page.

Hosted Pages Admin UI Settings

Go to Settings > Hosted Pages > Edit Default Hosted Page Group and configure the following settings.

Sample Screen

PASSWORD_SET (CUSTOM)

This page will have custom elements included but works the same as Default PASSWORD_SET Hosted Page.

Hosted Pages Admin UI Settings

Go to Settings > Hosted Pages > Edit Default Hosted Page Group and configure the following settings.

Sample Screen

PASSWORD_SET_SUCCESS

This page contains the confirmation message that the password was set successfully.

Hosted Pages Admin UI Settings

Go to Settings > Hosted Pages > Edit Default Hosted Page Group and configure the following settings.

Sample Screen

REGISTER (CUSTOM)

This page will have custom elements included but works the same as Default REGISTER Hosted Page.

Hosted Pages Admin UI Settings

Go to Settings > Hosted Pages > Edit Default Hosted Page Group and configure the following settings.

Sample Screen

REGISTER_ADDITIONAL_INFO (CUSTOM)

This page will have custom elements included but works the same as Default REGISTER_ADDITIONAL_INFO Hosted Page.

Hosted Pages Admin UI Settings

Go to Settings > Hosted Pages > Edit Default Hosted Page Group and configure the following settings.

Sample Screen

REGISTER_SUCCESS (CUSTOM)

This page will have custom elements included but works the same as Default REGISTER_SUCCESS Hosted Page.

Hosted Pages Admin UI Settings

Go to Settings > Hosted Pages > Edit Default Hosted Page Group and configure the following settings.

Sample Screen

VERIFICATION_INIT (CUSTOM)

This page will have custom elements included but works the same as Default VERIFICATION_INIT Hosted Page.

Hosted Pages Admin UI Settings

Go to Settings > Hosted Pages > Edit Default Hosted Page Group and configure the following settings.

Sample Screen

VERIFICATION_COMPLETE (CUSTOM)

This page will have custom elements included but works the same as Default VERIFICATION_COMPLETE Hosted Page.

Hosted Pages Admin UI Settings

Go to Settings > Hosted Pages > Edit Default Hosted Page Group and configure the following settings.

Sample Screen

PASSWORD_FORGOT_INIT (CUSTOM)

This page will have custom elements included but works the same as Default PASSWORD_FORGOT_INIT Hosted Page.

Hosted Pages Admin UI Settings

Go to Settings > Hosted Pages > Edit Default Hosted Page Group and configure the following settings.

Sample Screen

ACCOUNT_DEDUPLICATION (CUSTOM)

This page will have custom elements included but works the same as Default ACCOUNT_DEDUPLICATION Hosted Page.

Hosted Pages Admin UI Settings

Go to Settings > Hosted Pages > Edit Default Hosted Page Group and configure the following settings.

Sample Screen

Customization of UI

With the release of the new Hosted Pages concept V2 which includes a newly designed Login UI, we provide the possibility to do the basic style configurations in the Admin UI for both Default and Custom Hosted Pages.

App Details Configuration

By default, the App Details section of an app will look like the following for a new cidaas client.

The default Login UI page will appear like the one shown below.

In this screen, you can see that the colors red (accent color) and orange (primary color) are used for different parts of the UI. By default, the App Primary Color and the App Accent Color are set to #F7941D, and #EF4923 respectively as shown below.

These colors and other aspects of the Login UI can be changed for each cidaas client to reflect in the Default/Custom Hosted Page.

For this,

1. Navigate to Apps > Apps List > Edit App (of the app you choose to configure) > App Details.

2. Next, you can configure the following fields to customize your UI.

Field Description
App Logo URL Name of the App which should be shown additionally to the string “Welcome to."
App Background URL If desired, a background image can be used which will be shown behind the Login UI. By default, a grey background will be displayed.
App Primary Color The app primary color refers to the main color used in the login screen. Here, elements such as buttons are colored in the specified primary color.
App Accent Color This is the accent color used in the login mask. Elements such as headings are colored in the specified accent color.

Here’s a sample configuration and output that is displayed once you change the default configuration for a Default Hosted Page.

The default UI will support following browsers:

  • Chrome: 90, 89, 88, 87
  • Firefox: 88, 87, 86, 85
  • Edge: 90, 89, 88, 87
  • Safari: 14.1
  • Opera: 78 (dev), 77, 76, 75
Important Note: Some browsers may not be able to load the dynamic styles which are defined in the “Customization of UI” section.


Here’s a sample configuration and the output screen displayed once you change the default App Details configuration for a Custom Hosted Page.

Output Screen

This completes our discussion on cidaas' Hosted Pages Implementation.

If you face any issues while configuring Default/Custom Hosted Pages Group for your app, or need further assistance, please reach out to us here. Thank you!



results matching ""

    No results matching ""