Steps to Configure Branding in the Identity Self-Service Portal Builder

1. Open the Identity Self-Service Portal Builder Navigate to the Identity Self-Service Portal Builder page within the platform.

2. Access Branding Configuration Locate and click on the branding configuration section.

3. Upload Logos

   • Light Theme Logo: Click on the option to upload an image for the light theme logo. Ensure the image is in either PNG or SVG format.

4. Set Theme Colors

   • Enter the primary color using a valid hexadecimal code (e.g., #ff5733). Ensure the color falls within the specified range.

5. Upload Favicon

   • Click to upload a favicon in ICO, PNG, or SVG format. This favicon will appear in the browser tab.

6. Configure Fonts

   • Select a font family from the dropdown menu, which includes the top 15 supported UI fonts for use throughout the portal.

7. Run Accessibility Checker

   • After making your changes, use the accessibility checker to verify compliance with Web Content Accessibility Guidelines (WCAG) for both dark and light modes.

8. Save Changes

   • Once you have completed all branding configurations, click Save to apply the new settings to the portal.

The SEO settings feature in the Identity Self-Service Portal Builder allows administrators to control how the portal appears in browsers & search engine results.

It enables you to Configure SEO settings such as page titles, descriptions & keywords.

The branding configuration for the Identity Self-Service Portal enables administrators to customize the portal's visual identity to align with their brand. This includes modifying logos, theme colors, fonts, and favicons.

Accessibility Compliance Our accessibility checker ensures that dark and light modes comply with Web Content Accessibility Guidelines (WCAG). This tool helps maintain sufficient contrast between text and background, enhancing readability and accessibility for all users.

Steps to Configure SEO Settings for the Identity Self-Service Portal

1. Go to SEO Settings: From the Identity Self-Service Portal Builder page, navigate to the SEO settings section.

2. Update Metadata: Enter the page title, meta description, and up to 10 relevant meta keywords.

3. Set Search Visibility: Enable or disable the portal’s visibility on search engines as needed.

Enable Self-Registration

You can Enable/disable registration for your users using the TF Platform. When enabled, this feature adds a registration link to the login page, allowing end-users to register their own accounts.

Configurable States for Workflow Components

Each component of the registration workflow can be assigned one of three states:

• Required: The end-user must complete this step to proceed with registration.

• Optional: The end-user can choose to skip this step.

• Hidden: This step will not be visible to the end-user.

Self-Registration Process Overview

The self-registration process involves five steps designed to enhance security and personalize account setup. Each step can be assigned one of the three states mentioned above.

Step 1: Email Verification

End-users must verify their email addresses using a Time-Based One-Time Password (TOTP) sent to their registered email. This step is required by default.

Step 2: Terms of Service Agreement

After verifying their email, end-users can review and accept the Terms of Service. This step can be marked as required, optional, or hidden.

Step 3: Profile Completion

End-users can provide additional information for their profiles, such as their name, gender, date of birth, and address details. This step can be assigned as required, optional, or hidden.

Step 4: Phone Number Verification

For added security, end-users can verify their phone numbers using TOTP. This step can be set as required, optional, or hidden.

Step 5: Username and Password Creation

End-users can create a unique username and a strong password that meets specified security criteria. This step can also be marked as required, optional, or hidden.

Identity Mapping

Steps to configure the Registration Workflow Editor:

1. Navigate to the Identity Hub.

2. Access the Identity Self-Service Portal Builder:

   • Select Identity Self-Service Portal Builder from the main menu.

3. Open the Registration settings:

   • Click on the Workflow Editor tab.

4. Configure Registration Steps:

   • Add, edit, or remove registration steps in the workflow.

5. Set Step Properties:

   • For each step, specify the following:

     • Component Type: Choose from available registration components (e.g., Email, Phone Number, Terms and Conditions).

     • Display Mode: Set visibility options for each step (e.g., required, optional, hidden).

6. Save Configuration:

   • Click the Save button to apply changes to the registration workflow.

Steps to Enable User Self-Registration:

1. Navigate to the Identity Hub.

2. Access the Identity Self-Service Portal Builder:

   • Select Identity Self-Service Portal Builder from the main menu.

3. Open the Registration Tab:

   • Click on the Registration tab.

4. Enable User Registration:

   • Toggle the User Registration option to the preferred state.

Once you enable this setting, a Register link will appear on the login page of the selected Identity Self-Service Portal, allowing users to create their accounts.

The Identity Self Service Portal Builder enables you to customize Identity Self Service Portal User Self-Service Portal

The User Self-Service Portal gives you full control over your account management. Whether you need to log in, register, recover your account, or manage your privacy settings, this portal offers all the essential features. Below are the main functionalities, each with links to more detailed instructions for ease of use.

Choose Your Onboarding Configuration

TF Platform-hosted Self Service Portal

This option offers a fully managed solution where users can authenticate, authorize, and manage their profiles through a TF Platform-hosted web form, customized with your brand’s name, colors, and icon. The form is generated using the Identity Hub API, ensuring robust data validation, compliance with global regulations, and seamless localization. TF Platform handles the complete identity lifecycle, including authentication, authorization, consent management, session management, and profile management.

Recommended for: Teams that want an out-of-the-box solution with minimal integration effort, where TF Platform manages all aspects of identity and access management (IAM).

API-Driven Self Service Portal

With this approach, you use the Identity Self Service API to build and maintain a fully customized identity management experience. Your application manages all key components—authentication, authorization, consent, session, and profile management—tailored to your specific business needs. You’ll have full control over the integration of various authentication methods (e.g., multi-factor authentication, biometrics), localization, and compliance requirements. Regular updates are required to meet evolving security and regulatory standards.

Recommended for: Organizations with the technical capacity to manage the complexities of a custom IAM solution, offering full control over authentication, authorization, and user experience. This is ideal for teams that require greater flexibility and customization for security and identity management processes.

Post-Registration Configuration Options:

1. Access the Identity Self-Service Portal: Navigate to the Identity Self Service Portal through the Access Manager.

2. Single Sign-On (SSO) into the Application: Use SSO to sign into the application where the user will continue their onboarding process.

OAuth 2.0 Authorization Code Flow with PKCE

This document outlines the OAuth 2.0 Authorization Code Flow with PKCE, detailing the steps, endpoints, request payloads, and responses involved in initiating and completing user authentication without a client secret.

1. User Initiates OAuth Flow

Action: User Redirect to Authorization Server

Purpose: The user initiates the OAuth flow by redirecting to the authorization server to request authorization.

Redirection URL Format:

https://auth.example.com/authorize?client_id=client123&redirect_uri=https://app.example.com/callback&response_type=code&scope=openid profile email&code_challenge=challengeValue&code_challenge_method=S256

• Parameters:

  • client_id: The ID of the client application (e.g., client123).

  • redirect_uri: The URI where the authorization server will send the user after authorization.

  • response_type: The type of response desired (e.g., code).

  • scope: The scopes requested (e.g., openid profile email).

  • code_challenge: A transformed value of the code_verifier (see step 3).

  • code_challenge_method: Method used to derive the code_challenge (typically S256).

2. Authorization Server Redirects to Authentication Server

Action: Redirect to Authentication Server

Purpose: After validating the initial request, the authorization server redirects the user to the authentication server to initiate authentication if the session cookie is present. If the session cookie is not present, all authentication steps must be completed before proceeding.

Redirection URL:

https://auth.example.com/authentication/start?client_id=client123&redirect_uri=https://app.example.com/callback&response_type=code&scope=openid profile email&code_challenge=challengeValue&code_challenge_method=S256

3. Initiate Authentication

Endpoint: POST /authentication/start

Purpose: Starts the authentication process, retrieves available authentication methods, and returns a session cookie.

Request Payload:

{
  "identifier": "user@example.com",
  "client_id": "client123",
  "redirect_uri": "https://app.example.com/callback",
  "response_type": "code",
  "scope": "openid profile email",
  "code_challenge": "challengeValue",
  "code_challenge_method": "S256"
}

Response:

{
  "session_id": "auth_session_123456",
  "available_methods": ["password", "sms", "email", "sso", "passkey", "whatsapp"],
  "required_steps": 2,
  "next_step": 1
}

Session Cookie: Upon successful initiation, the server sets a session cookie in the user's browser to track the authentication session. This cookie should be sent with subsequent requests to maintain the session context.

4. Check Authentication Status

Endpoint: GET /authentication/status

Purpose: Checks the current status of the authentication session based on the session cookie.

Query Parameters:

• session_id: The ID of the authentication session (e.g., auth_session_123456).

Response:

{
  "session_id": "auth_session_123456",
  "status": "pending",
  "completed_steps": 0,
  "remaining_steps": 2,
  "next_step": 1
}

5. Perform Authentication Step

Endpoint: POST /authentication/authenticate

Purpose: Processes the specified authentication step based on the selected method.

Request Payloads for Different Authentication Methods:

• Password Authentication:

  Endpoint: POST /authentication/authenticate

  Request Payload:

  Copy

  {
    "session_id": "auth_session_123456",
    "method": "password",
    "username": "user@example.com",
    "password": "securepassword123",
    "client_id": "client123",
    "redirect_uri": "https://app.example.com/callback",
    "response_type": "code",
    "scope": "openid profile email",
    "code_challenge": "challengeValue",
    "code_challenge_method": "S256"
  }

• SMS Authentication:

  Endpoint: POST /authentication/authenticate

  Request Payload:

  Copy

  {
    "session_id": "auth_session_123456",
    "method": "sms",
    "phone_number": "+1234567890",
    "client_id": "client123",
    "redirect_uri": "https://app.example.com/callback",
    "response_type": "code",
    "scope": "openid profile email",
    "code_challenge": "challengeValue",
    "code_challenge_method": "S256"
  }

• Email Authentication:

  Endpoint: POST /authentication/authenticate

  Request Payload:

  Copy

  {
    "session_id": "auth_session_123456",
    "method": "email",
    "email": "user@example.com",
    "client_id": "client123",
    "redirect_uri": "https://app.example.com/callback",
    "response_type": "code",
    "scope": "openid profile email",
    "code_challenge": "challengeValue",
    "code_challenge_method": "S256"
  }

• SSO Authentication:

  Endpoint: POST /authentication/authenticate

  Request Payload:

  Copy

  {
    "session_id": "auth_session_123456",
    "method": "sso",
    "provider": "google",
    "client_id": "client123",
    "redirect_uri": "https://app.example.com/callback",
    "response_type": "code",
    "scope": "openid profile email",
    "code_challenge": "challengeValue",
    "code_challenge_method": "S256"
  }

• Passkey Authentication:

  Endpoint: POST /authentication/authenticate

  Request Payload:

  Copy

  {
    "session_id": "auth_session_123456",
    "method": "passkey",
    "challenge": "randomChallenge123",
    "response": {
      "id": "credentialId",
      "rawId": "base64EncodedRawId",
      "type": "public-key",
      "response": {
        "clientDataJSON": "base64EncodedClientData",
        "authenticatorData": "base64EncodedAuthData",
        "signature": "base64EncodedSignature",
        "userHandle": "base64EncodedUserHandle"
      }
    },
    "client_id": "client123",
    "redirect_uri": "https://app.example.com/callback",
    "response_type": "code",
    "scope": "openid profile email",
    "code_challenge": "challengeValue",
    "code_challenge_method": "S256"
  }

• WhatsApp Authentication:

  Endpoint: POST /authentication/authenticate

  Request Payload:

  Copy

  {
    "session_id": "auth_session_123456",
    "method": "whatsapp",
    "phone_number": "+1234567890",
    "client_id": "client123",
    "redirect_uri": "https://app.example.com/callback",
    "response_type": "code",
    "scope": "openid profile email",
    "code_challenge": "challengeValue",
    "code_challenge_method": "S256"
  }

Response:

{
  "session_id": "auth_session_123456",
  "status": "success",
  "completed_steps": 1,
  "remaining_steps": 1,
  "next_step": 2
}

6. Verify OTP (for SMS, Email, or WhatsApp)

Endpoint: POST /authentication/verify-otp

Purpose: Verifies the one-time password (OTP) received via SMS, email, or WhatsApp.

Request Payload:

{
  "session_id": "auth_session_123456",
  "otp": "123456",
  "client_id": "client123",
  "redirect_uri": "https://app.example.com/callback",
  "response_type": "code",
  "scope": "openid profile email",
  "code_challenge": "challengeValue",
  "code_challenge_method": "S256"
}

Response:

{
  "session_id": "auth_session_123456",
  "status": "success",
  "completed_steps": 2,
  "remaining_steps": 0,
  "next_step": null
}

7. Complete Authentication

Endpoint: POST /authentication/complete

Purpose: Confirms the completion of all required authentication steps.

Request Payload:

{
  "session_id": "auth_session_123456",
  "client_id": "client123",
  "redirect_uri": "https://app.example.com/callback",
  "response_type": "code",
  "scope": "openid profile email",
  "code_challenge": "challengeValue",
  "code_challenge_method": "S256"
}

Response:

{
  "session_id": "auth_session_123456",
  "status": "completed"
}

8. Redirect Back to Authorization Server

Endpoint: GET /authorize

Purpose: Redirects the user back to the authorization server to obtain an authorization code.

Query Parameters:

• client_id: The ID of the client application (e.g., client123).

• redirect_uri: The URI where the authorization server will send the authorization code.

• response_type: The type of response desired (e.g., code).

• scope: The scopes requested (e.g., openid profile email).

• state: A unique state value to maintain state between the request and callback.

• code_challenge: The previously used code challenge.

• code_challenge_method: The method used to create the code challenge.