Introduction
In this article we’re going to show you how easy it is to configure your MMFA service to enable theming in IBM Verify. This article covers the MMFA configuration on ISAM with the resultant theme appearing IBM Verify.
Why Theme?
We've had many customers ask for a white label version IBM Verify, unfortunately this isn't option under the IBM+Apple partnership. We wanted to enable custom themes be shown in IBM Verify without having customers having write their own MMFA mobile app. Whilst the “default” theme in IBM Verify is pleasing and subtle in color palette, there may be instances where customers will want to provide a more engaging and meaningful multi-factor authentication experience to their users.
Getting Started
IBM Verify supports a theming manager which assigns the colors to various visual elements throughout the app. When a user scans the QR code to register their device, the backend server provides a JSON structure which the theming manager in IBM Verify will interpret and apply to these visual elements.
IBM Verify Theme Elements
Sample JSON Theme Payload
"theme" : {
"backgroundColor": "#000000",
"navigationItemColor": "#ffffff",
"topBannerBackgroundColor": "#408bfc",
"topBannerTextColor": "#ffffff",
"titleHeaderTextColor": "#ffffff",
"headerTextColor": "#ffffff",
"subHeaderTextColor": "#ffffff",
"otpProgressBackgroundColor": "#0062ff",
"otpProgressEndColor": "#da1e28",
"otpProgressColor": "#373d42",
"otpTextColor": "#ffffff",
"otpSubtextColor": "#30b0ff",
"tabTextColor": "#ffffff",
"tabHighlightColor": "#0062ff",
"bottomBannerTextColor": "#ffffff",
"bottomBannerBackgroundColor": "#408bfc",
"errorBannerBackgroundColor": "#da1e28",
"errorBannerTextColor": "#ffffff",
"settingsHeaderTextColor": "#50565b",
"settingsFooterTextColor": "#50565b",
"tableCellTextColor": "#ffffff",
"tableCellSeparatorColor": "#3d3d3d",
"tableCellBackgroundColor": "#171717",
"removeButtonTextColor": "#ffffff",
"removeButtonBackgroundColor": "#da1e28",
"removeButtonPressedBackgroundColor": "#ba1b23",
"transactionTitleTextColor": "#ffffff",
"transactionAccountNameTextColor": "#ffffff",
"transactionIdTextColor": "#ffffff",
"actionButtonIconColor": "#ffffff",
"approveButtonBackgroundColor": "#0062ff",
"denyButtonBackgroundColor": "#da1e28",
"dimBackgroundColor": "#000000",
"popupGripBarColor": "#3d3d3d",
"popupBackgroundColor": "#171717",
"popupHeaderTextColor": "#ffffff",
"popupBodyTextColor": "#ffffff",
"popupCloseButtonBackgroundColor": "#3d3d3d",
"popupCloseButtonIconColor": "#ffffff",
"popupSeparatorColor": "#3d3d3d",
"imageData": "iVBORw0KGgo..."
}
Configuring ISAM
To add theming, you will need to launch the ISAM administration console. The following steps will guide you through the process:
- Open the browser and navigate to your administration console.
- Click “Secure Access Control” > “Templates Files”
- Edit the json file which is located in the folder mmfa/user.mgmt/mmfa/metadata/AuthenticatorClient
- Copy your JSON theme data into the file and “Save”
- Deploy the pending changes
- Using IBM Verify, register your account and follow the prompt to enrol
Troubleshooting
To ensure themes are consistent and readable the Theme Manager enforces a contrast ratio of at 1.5 between text elements and their corresponding background elements. If any text-background element violates the contrast ratio, the entire theme is discarded, and the default IBM Verify theme for the account is used.
Wrapping Up
Theming an account in IBM Verify is a great way to personalise a brand experience to your end user without going to the effort of writing and supporting your own MMFA mobile application. Theming is available on both iOS and Android versions of IBM Verify.
Acknowledgements
Special thanks goes to Adam Dorogi-Kaposi who co-authored this article.