Custom Authenticator and Login Module in hybrid applications
This is a continuation of Custom Authenticator and Login Module.
Creating client-side authentication components
The application consists of two main div elements:
The AppDiv element is used to display the application content.
The AuthDiv element is used for authentication forms.
When authentication is required, the application hides AppDiv and shows AuthDiv. When authentication is complete, it does the opposite.
Buttons are used to call the getSecretData procedure and to log out.
AuthDiv is styled with display:none because it must not be displayed before the server requests the authentication.
Use WL.Client.createChallengeHandler to create a challenge handler object. Supply a realm name as a parameter.
The isCustomResponse function of the challenge handler is called each time a response is received from the server.
It is used to detect whether the response contains data that is related to this challenge handler. It must return true or false.
If isCustomResponse returns true, the framework calls the handleChallenge function. This function is used to perform required actions, such as hide application screen and show login screen.
In addition to the methods that the developer must implement, the challenge handler contains functionality that the developer might want to use:
- submitLoginForm to send collected credentials to a specific URL. The developer can also specify request parameters, headers, and callback.
- submitSuccess to notify the framework that the authentication finished successfully. The framework then automatically issues the original request that triggered the authentication.
- submitFailure to notify the framework that the authentication completed with a failure. The framework then disposes of the original request that triggered the authentication
Note: Attach each of these functions to its object. For example: myChallengeHandler.submitSucces()
If the challenge JSON block contains the authStatus property, return true, otherwise return false.
If the authStatus property equals “required”, show the login form, clean up the password input field, and display the error message if applicable.
if authStatus equals “complete”, hide the login screen, return to the application, and notify the framework that authentication completed successfully.
Clicking the login button triggers the function that collects the user name and password from HTML input fields and submits them to server. You can set request headers here and specify callback functions.
Clicking the cancel button hides AuthDiv, shows AppDiv and notifies the framework that authentication failed.
The submitLoginFormCallback function checks the response for the containing server challenge once again. If the challenge is found, the handleChallenge function is called again.
Click to download the Studio project.