AEMM: How to create custom authentication

There are cases where we need to use custom login screen other than the login UI provided by AEMM. In such cases we need to use generic auth method in AEMM with custom UI hosted in our own server. Below given the approach.

We need to have our own API authentication mechanism running to achieve the functionality. In this case our system exposes an API which gives status as success or failure while authenticating in JSON format

Click on image to see it big

Step 1:
Create a login form which accepts user credentials

<form onsubmit="loginfunctioncall();"> 
Username: <input type="text" /> 
Password: <input type="text" /> 
<input type="submit" /> </form>

Step 2:
Add a post method which takes the response and  collects user info. This info is processed to respective format as our API requires.
Do a post call and get response.
Process the response(JSON format) back from POST and check the authentication is success
If authentication is success, redirect the user to app home screen, else alert user with an error message


<script>
function login() {

//process response and if authentication is success, set the success to true
var success = true;
var authToken = 'AUTH_TOKEN_BASED_ON_USER_LOGIN';
if (success && authToken) {
window.location = appData.redirectUri + '?authToken=' + authToken;  } else {
window.location = appData.redirectUri + '?error="Internal Error"';  } }
</script>