Thursday, 9 March 2017

AEM Mobile with Login Functionality

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.

  • SAML 2.0 (Gigya, MFA/OKTA)
  • OAuth 2.0 (Facebook, Google id's)
  • Generic

AEM Mobile fetches authorization tokens from these identity providers, which you can use in your entitlement service to authorize users to content. AEM Mobile provides many APIs for Sign in procedures; For eg 'setAuthToken' 'isAuthenticated', 'launchSignInUI' etc.

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 Sig 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
  • 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

No comments:

Post a Comment