Add Login and Logout Capabilities to an Application

VB Studio applications provide built-in options for you to implement login and logout for your users.

Customize Application Login

By default, any application you build in VB Studio includes a login screen—unless you enabled anonymous access, which allows users to access your app without signing in. The default login screen points to the Sign-In page that Oracle Cloud's access plane provides for token-based authentication:
Description of default-login-page.png follows
Description of the illustration default-login-page.png

If you want to customize this sign-in page (you'll need rights to register applications in IDCS), you can use the Branding feature to change the company name and the login text, as well as upload logos to replace the defaults. The position of the text and images, and the colors and fonts remain the same. For anything beyond what the branding feature supports, you'll need to use the Authentication REST API that IDCS provides to help you develop your own sign-in page.

Enable Application Logout

You can enable a logout function for your application by adding the built-in Logout action to any page component, for example, a button or a menu item.

Web applications in VB Studio come with a default shell that displays a Sign Out option under the logged-in user's Avatar, but you'll need to add the Logout action to the component to actually trigger a logout:
Description of webapp-shell.png follows
Description of the illustration webapp-shell.png

Note:

The Sign Out option doesn't appear for apps enabled as PWAs, but you can enable the same functionality for these apps by calling the Logout action from any page component.
To enable logout for a web app's default Sign Out option:
  1. Open your application in the Navigator, then open the app's shell-header fragment under Fragments.
  2. Click the Structure view and select Menu under Menu Button.
  3. In the component's Properties pane, click the Events tab and click avatarMenuActionChain.
    Description of webapp-shell-menu-addojaction.png follows
    Description of the illustration webapp-shell-menu-addojaction.png

  4. In the Action Chain editor, drag and drop the If action from the Actions palette onto the canvas. In the action's Properties pane, click the first field under Condition and select menuId under Input Parameters, leave the second field as equals, then enter signout in the third field.
    Description of webapp-shell-buildojaction.png follows
    Description of the illustration webapp-shell-buildojaction.png

  5. Drag and drop the Logout action onto the Add Action area of the If action.

    If are using an external identity provider, enter the provider's logout endpoint in the Logout URL field in the action's Properties pane, something like https:***/oam/server/logout?end_url=https://****/oamwebsso/logout-success.jsp. If you are using IDCS for authentication, you don't need to specify the logout URL.

When you are done, run your app to check whether you're being logged out of all active sessions (in the same browser) associated with the same identity domain.

Note:

The logout action won't work when you preview the app in Live mode (to avoid logging you out during development). You'll need to deploy (share or publish) your app to make sure logout works as expected.

Redirect URL After Logout

A post-logout URL always points back to the deployed app (because the server runtime logout code isn't aware of changes made in the IDCS client app). One option is to use the IDCS logout directly (instead of the VB Studio logout URL) and specify your post-logout URL in a query parameter, for example:

https://servicename-cloudaccount.builder.ocp.oraclecloud.com/mycompany/logout.html?postlogouturl=https://servicename-cloudaccount.ocp.oraclecloud.com%3A443%2Fic%2Fbuilder%2Frt%2F<AppName>%2F<Version>%2FwebApps%2F<WebAppName>%2F