Integrate Identity Cloud hosted pages into your apps
Overview
Who is this article for?
This is part one of a step-by-step guide for anyone who wishes to use hosted pages (more on that later in the article) in their mobile or web app, with the help of the ForgeRock SDKs.
The goal is to give you practical advice on theming, show how the SDKs help the integration, and provide some best practices along the way.
Prior knowledge configuring ForgeRock® Identity Cloud is helpful, but not assumed.
What are hosted pages?
Hosted pages are an Identity Cloud capability that let you centrally host parts of the user interface (UI) of your mobile or web application. Use the pages to enable any user journey, such as registration, self-service, authentication, or authorization.
Leveraging the power of Intelligent Access and Use centralized login for access journeys lets you:
-
Seamlessly and quickly integrate multiple web and mobile applications with Identity Cloud—a consistent omnichannel experience.
-
Maximize your flexibility to change the self-service and authentication behavior of a journey without disrupting the end-user experience.
-
Use a WYSIWYG editor to brand and theme pages to match an organization’s color palette and UI standards.
The result: When your users start the login process within your application, the app seamlessly redirects the users to your Identity Cloud tenant for authentication. Based on the access journey you designed, a UI appears that contains all of your theming and branding.
Themes in the Identity Cloud admin portal
Change the realm theme
-
Log in to the Admin UI of your Identity Cloud tenant using an administrator account.
-
Navigate to Realm Settings > Theme.
-
Using the WYSIWYG editor, select colors for the elements that display on the screen. You can customize the default look and feel for sign-in, registration, and profile pages.
-
You can add a company logo using the Logo tab on the editor:
-
Set a small logo for sign-in and registration pages.
-
Set a larger logo for user profile navigation.
(Base64-encoded string, or self-hosted logo URL).
-
-
Use the Theme Logo tab to change the small logo or logo mark.
You can also adjust the full-size logo or profile page logo that appears when a customer or admin completes authentication.
-
Use the Theme Styles tab to change the look and feel of the UI on your hosted page.
Test your theme configuration
-
Log out of the Admin UI.
-
In a new tab, access the default login journey of your tenant:
https://[TENANT-ADDRESS]/am/XUI/?realm=alpha&authIndexType=service&authIndexValue=Login
-
Use a user (non-admin) account to authenticate.
-
The appearance of the login and self-service profile pages depends on your theming configuration. Notice the logo at the top of the page, as well as the custom color of the buttons and the links.
Themes and realms
Identity Cloud tools let you set theming and branding for your authentication, registration, and self-service journeys.
Themes apply to the selected realm, and are active for all journeys under that realm.
You can use two realms per tenant: alpha
and bravo
.
Therefore, you can apply two different themes to each tenant by setting a custom theme for each of the available realms.