Table of Contents

Introduction

This userview element allows LDAP users to Activate/Deactivate their MFA.The User Profile MFA Menu in Joget provides an interface that allows authenticated users to manage their Multi-Factor Authentication (MFA) settings directly from the Userview. This menu is typically added as a UI menu after installing the User Profile MFA plugin.

Plugin Information

Plugins Available in the Bundle:

...

The user can see whether MFA is currently enabled or disabled for their account. If MFA is not yet configured, the menu provides a way for users to initiate setup. For example, using a QR code for an authenticator app like Google Authenticator or Microsoft Authenticator. If MFA is already enabled, the user may be allowed to disable it, depending on the admin policy.

Figure 1: Expected Outcome of the User Profile MFA Menu

...

1. You can obtain the jar file from the latest release at https://github.com/jogetoss/user-profile-mfa-menu/releases/tag/v7.0.0
2. Upload the plugin jar file in Joget by going to Settings → to Settings > Manage Plugins.
3. You can choose to import the demo app or create the app from scratch.

...

1. As an administrator in Joget Settings > Directory Manager, choose the Security Enhanced Directory Manager (e.g. SEDM) and select Time-based One-time Password (TOTP) Authenticator for the Multi Factor Authenticator property.
   
   Figure 2: Configuring Time-based One-Time Password (TOTP) Multi-Factor Authentication in Directory Manager Settings

2. Once the TOTP Authenticator has been enabled, users will be able to enable MFA individually in their custom user profile.

...

1. After installing the User Profile MFA Menu plugin (JAR), the menu becomes available in the UI Builder palette and can be dragged into the Userview for configuration.
   
   Figure 43: Configuring Custom User Profile MFA Menu in the UI menu
2. After launching the app, in the UI, click on the Activate button in the Time-based One-time Password (TOTP) Authenticator.
   
   Figure 4: Activating the MFA (TOTP)
3. A pop-up dialog will appear showing the secret key and a barcode.
   
   Figure 5: Enabling TOTP Authentication

User Profile MFA Menu Properties

Configure User Profile MFA Menu

Image Added
Figure 6: User Profile MFA Properties

Performance & Offline 

Image Added
Figure 7: User Profile MFA Properties - Performance & Offline Settings

PWA Offline Settings

Note: PWA Offline support is dependent on the theme used.

Read Progressive Web Application (PWA) for more information.

Enforce MFA for all users

...

If you want to enforce Multi-Factor Authentication (MFA) for all users, please use the following script.

Navigate to UI > Settings > Theme > Advanced UI > Settings > Theme > Advanced > Custom JavaScript, add the following script to the UI settings as shown in the code block and screenshot below:

var currentUserUsername = "#currentUser.username#";

    $(document).ready(function () {
        if (
            currentUserUsername && 
            !currentUserTotpSecret && 
            !sessionStorage.getItem('mfaDialogShown')
           ) {
            var appId = 'customProfileMfa';  // 
you will need to change this
             var uiId = 'v';   // 
you will need to change this
             var menuId = 'user_profile_mfa'; 
// you will need to change this
            var dialog = new PopupDialog(`#request.baseURL#/web/userview/${appId}/${uiId}/_/${menuId}?embed=true`);
            dialog.show();

           
            sessionStorage.setItem('mfaDialogShown', 'true');

            
            setTimeout(function() {
                $("div.ui-widget-overlay.ui-front").attr("id", "specialTosOverlay");
                $("div#specialTosOverlay").off("click");
                $("button.ui-dialog-titlebar-close").attr("id", "specialTosClose");
                $("button#specialTosClose").remove();
            }, 500); 
        }
    });

Sample App

Related Documentation

• Multi-Factor Authentication using TOTP
• Security Enhanced Directory Manager