Custom authentication Using Generic Identity Provider in AEM Mobile
AEM Mobile supports different ways of Sign in in to the application. Below are the three methods which can be integrated for AEM Mobile login functionality.
Here we are going to understand the Generic identity provider implementation and it supports two types of login. First one is using a separate HTML form which is hosted in internet and second method using Sign-in in experience in an AEM Mobile article itself.
Generic Identity Provider Implementation.
When users tap on Sign In button from the AEM Mobile app menu, the users are redirected to the provided sign-in UI. The Sign In HTML will have login functionality written, so that the code calls the DB and verify the user information and if it is a successful login, the user is redirected to app Home page with additional authToken Parameters. The authToken can be any String which holds multiple values related to User like user id, user location, user preferences etc.
The token can be a JSON file(Stringify this before passing to AEM Mobile as authToken) as given below. In AEM Mobile app, we can retrieve this authToken and read values, and use this values if required to set some additional features. For eg. say we need to set articles based on Geo of 'LA', so that only LA user will be able to see this content after login. We can send the authToken with below JSON and check in app for geo location. If it matches the geo 'LA' then display the article.
{
"UserArray":[{
"UserName":"user1",
"userGeo":"LA",
"userAge":"23",
"userLastLogIn":"04-04"
}
]
}
Steps involved in setting up Generic Identity Provider.
Step 1: Create Login HTML
Create HTML Page with login functionality. Below given a sample HTML form page.
<html>
<head>
</head>
<body>
<form method="post" onsubmit="login();">
<input type="text" name="username">
<input type="password" id="password">
<input type="submit" value="Login" />
<script>
//You code which will call login functionality and verify the submitted user credentials by invoking DB.
// If login is success set the authToken and redirect the user from Login UI page to app home page.
//A sample code is available in next page of the blog. Parameters involved in Sign In and Login Scripts
</script>
</body>
</html>
Step 2: Host the Login HTML in you internet site.
We can place the login HTML to any internet facing site, so that we will have a new login URL like www.yourdomain.com/login.html. Ensure this is accessible through app.
Step 3: Configure the Identity Provider
Once the Login UI is ready and hosted, get the URL. Go to Master Settings of On-Demand portal > Identity Providers tab
Identity Provider Name: Generic
Identity Provider Type: Generic
In the next 'Generic setup' screen, provide below details.
Authentication URL *: The URL Where you have hosted the login UI.
Default Session Expiry : You can leave this blank (Number of seconds that a successful sign-in is valid)
Save the configuration.
Step 4: Enable Custom Authentication in On-Demand portal
Step 5: Build the app(not a preflight app) sign it, and test it as described here.
Read : Parameters involved in Sign In and Login Scripts
Various options in AEM integrated with AEM Mobile On-Demand Portal
Add/MAP user to AEM Mobile project
Create Article/Banner from AEM and publish it to AEM Mobile
Integrate AEM with AEM Mobile
Create an APP in AEM And Mapping with AEM Mobile On-Demand
AEM Mobile Interview questions for developers
Adjusting Home Navigation Menu from AEM Mobile On-Demand portal
AEM Mobile supports different ways of Sign in in to the application. Below are the three methods which can be integrated for AEM Mobile login functionality.
- SAML 2.0 (Gigya, MFA/OKTA)
- OAuth 2.0 (Facebook, Google id's)
- Generic
Here we are going to understand the Generic identity provider implementation and it supports two types of login. First one is using a separate HTML form which is hosted in internet and second method using Sign-in in experience in an AEM Mobile article itself.
Generic Identity Provider Implementation.
 |
| Click on image to see it big |
When users tap on Sign In button from the AEM Mobile app menu, the users are redirected to the provided sign-in UI. The Sign In HTML will have login functionality written, so that the code calls the DB and verify the user information and if it is a successful login, the user is redirected to app Home page with additional authToken Parameters. The authToken can be any String which holds multiple values related to User like user id, user location, user preferences etc.
The token can be a JSON file(Stringify this before passing to AEM Mobile as authToken) as given below. In AEM Mobile app, we can retrieve this authToken and read values, and use this values if required to set some additional features. For eg. say we need to set articles based on Geo of 'LA', so that only LA user will be able to see this content after login. We can send the authToken with below JSON and check in app for geo location. If it matches the geo 'LA' then display the article.
{
"UserArray":[{
"UserName":"user1",
"userGeo":"LA",
"userAge":"23",
"userLastLogIn":"04-04"
}
]
}
Steps involved in setting up Generic Identity Provider.
Step 1: Create Login HTML
Create HTML Page with login functionality. Below given a sample HTML form page.
<html>
<head>
</head>
<body>
<form method="post" onsubmit="login();">
<input type="text" name="username">
<input type="password" id="password">
<input type="submit" value="Login" />
<script>
//You code which will call login functionality and verify the submitted user credentials by invoking DB.
// If login is success set the authToken and redirect the user from Login UI page to app home page.
//A sample code is available in next page of the blog. Parameters involved in Sign In and Login Scripts
</script>
</body>
</html>
Step 2: Host the Login HTML in you internet site.
We can place the login HTML to any internet facing site, so that we will have a new login URL like www.yourdomain.com/login.html. Ensure this is accessible through app.
Step 3: Configure the Identity Provider
Once the Login UI is ready and hosted, get the URL. Go to Master Settings of On-Demand portal > Identity Providers tab
Identity Provider Name: Generic
Identity Provider Type: Generic
In the next 'Generic setup' screen, provide below details.
Authentication URL *: The URL Where you have hosted the login UI.
Default Session Expiry : You can leave this blank (Number of seconds that a successful sign-in is valid)
Save the configuration.
Step 4: Enable Custom Authentication in On-Demand portal
- Go to project Settings in On-Demand Portal > Select the project to be edited, click on Edit and go to 'Access' tab.
- Enable the check box under section 'Custom Authentication'
- Select identity provider 'Generic'
- Add a bundle ID under section 'Entitlement & Authentication' (This ID will be sent when apps request entitlement or authentication information)
Step 5: Build the app(not a preflight app) sign it, and test it as described here.
Read : Parameters involved in Sign In and Login Scripts
Read More:
Add/MAP user to AEM Mobile project
Create Article/Banner from AEM and publish it to AEM Mobile
Integrate AEM with AEM Mobile
Create an APP in AEM And Mapping with AEM Mobile On-Demand
AEM Mobile Interview questions for developers
Adjusting Home Navigation Menu from AEM Mobile On-Demand portal
No comments:
Post a Comment
Note: only a member of this blog may post a comment.