Article summary

Summary

This development article discusses how to create a login component for the Experience Manager sample Toy Store site. 

A special thank you to Ankur for contributing in the content and  Ranta & Navin Kaushal, top AEM community members, for testing this article to ensure it works.

Digital Marketing Solution(s) Adobe Experience Manager 6.3
Audience Developer
Required Skills Java, HTML, JavaScript
Version 6.3
Video

Ask the AEM Community Experts - AEM Secure Websites

Video on Community Channel 

Prerequisites

To follow along with this Experience Manager development article, you need to build the Experience Manager Toy Site located here: Creating your First Adobe Experience Manager 6.3 website.

As an alternative, you can install the following package.

Download

Finished Solution

The following package contains the complete solution that is created as a result of following this article. 

Download

Introduction

You can develop a login component for the Adobe Experience Manager Toy Store site. That is, using a login component, you can restrict unauthorized users from accessing it. A login component better secures your site and ensures that only registered users can access it. In addition, the login component should have Remember Me functionality to remember user name.(Using cookies).

This development article walks you through how to build a Login component for the sample Toy Store site. The login component is created by using HTL. For more information, see HTML Template Language.

Login
An AEM login page for the Toy Site

When the user enters a valid username and password, the login component redirects to the main Toy Store page. 

store
The Experience Manager Toy Store site

Download Bootstrap Library files

The Login component that is developed in this article uses JavaScript files that belong to Bootstrap. The Bootstrap files provide a nice style for the login component. As a first step, go to the following URL and and download the bootstrap files.

http://getbootstrap.com/getting-started/#download

 

Note:

You can watch an Ask the AEM Community Experts session on AEM and Bootstrap

The next step is to extract the downloaded files to your local file system, as shown here. 

Boot
Bootstrap files extracted on the local file system

Create an Experience Manager client library folder

The next step is to place the Bootstrap JS files into an Experience Manager ClientLib folder. Create a clientlib folder named boot-foundation located at this JCR location /etc/clientlibs, as shown in the following illustration. 

Clientlib
An Experience Manager ClientLibs folder that contains the BootStrap JS and CSS files

To create an Experience Manager ClientLibs folder, perform these tasks: 

1. Right-click /etc/clientlibs then select New, Node.

2. Make sure that the node type is cq:ClientLibraryFolder and the name of the node is boot-foundation.

3. Right click on clientlibs and select Properties. Add the two properties specified here: 

  • dependencies (String[]) - cq.jquery
  • categories (String[]) - summit.boot.foundation

4. On your file system, navigate to the folder where the Bootstrap JS files are located. Upload the bootstrap.min.js file to the clientlib. Also upload the CSS files. (Place the JS file in the JS folder and CSS files in the CS folder). 

5. Add a TXT file to the clientlibs folder named js.txt. Add this content to the file.

 

#base=js 
bootstrap.min.js

6. Add a TXT file to the clientlibs node named css.txt. Add this content to the file.

#base=css
bootstrap.min.css
bootstrap-theme.min.css
bootstrap.min.css.map

Note:

Once successfully integrated, you can choose any bootstrap ootb component from http://getbootstrap.com/components/ and use it in Experience Manager. It can save a lot of coding effort for front-end developers.

 

Create Login component using HTL

Create an Experience Manager login component by performing these tasks using CRXDE Lite:

1. Right click on /apps/summit_toys/components and then select New, Component.

2. Enter the following information into the Create Component dialog box:

  • Label: The name of the component to create. Enter login.
  • Title: The title that is assigned to the component. Enter login.
  • Description: The description that is assigned to the template. Enter login.
  • Super Resource Type: Enter foundation/components/parbase.
  • Group: The group in the side rail or side kick where the component appears. Enter Summit Toys

3. Allowed parents: Enter */parsys.

4. Click Ok.

Add a dialog to the AEM Touch UI component

Perform these tasks to create the AEM Touch UI dialog for the login component:

1. Select /apps/summit_toys/components/login.

2. Right click and select Create, Create Node.

3. Enter the following values:

  • Name: cq:dialog
  • Type: nt:unstructured

4. Add the following properties to the cq:dialog node.

  • jcr:title (String) - Login
    sling:resourceType (Stgring) - cq/gui/components/authoring/dialog

5. Click on the following node: /apps/summit_toys/components/login/cq:dialog.

6. Right click and select Create, Create Node. Enter the following values:

  • Name: content
  • Type: nt:unstructured

7. Add the following property to the content node.

  • sling:resourceType (String) - granite/ui/components/foundation/container

8. Click on the following node: /apps/summit_toys/components/login/cq:dialog/content.

9. Right click and select Create, Create Node. Enter the following values:

  • Name: layout
  • Type: nt:unstructured

10. Add the following properties to the layout node.

  • sling:resourceType (String) - granite/ui/components/foundation/layouts/tabs
  • type (String) -nav

11. Click on the following node: /apps/summit_toys/components/login/cq:dialog/content.

12. Right click and select Create, Create Node. Enter the following values:

  • Name: items
  • Type: nt:unstructured

13. Click on the following node: /apps/summit_toys/components/login/cq:dialog/content/items.

14. Right click and select Create, Create Node. Enter the following values:

  • Name: herotext
  • Type: nt:unstructured

15. Add the following properties to the herotext node (this node represents the tab).

  • jcr:title (String) - Hero Text Properties
  • sling:resourceType (String) - granite/ui/components/foundation/section

16. Click on the following node: /apps/summit_toys/components/login/cq:dialog/content/items/herotext.

17. Right click and select Create, Create Node. Enter the following values:

  • Name: layout
  • Type: nt:unstructured

18. Add the following property to the layout node.

  • sling:resourceType (String) - granite/ui/components/foundation/layouts/fixedcolumns

19. Click on the following node:  /apps/myHTL/components/content/helloworld/cq:dialog/content/items/herotext.

20. Right click and select Create, Create Node. Enter the following values:

  • Name: items
  • Type: nt:unstructured

21. Click on the following node: /apps/summit_toys/components/login/cq:dialog/content/items/herotext/items.

22. Right click and select Create, Create Node. Enter the following values:

  • Name: columns
  • Type: nt:unstructured

23. Click on the following node: /apps/summit_toys/components/login/cq:dialog/content/items/herotext/items/column.

24. Add the following property to the columns node.

  • sling:resourceType (String) - granite/ui/components/foundation/container

25. Click on the following node: /apps/summit_toys/components/login/cq:dialog/content/items/herotext/items/column.

26. Right click and select Create, Create Node. Enter the following values:

  • Name: items
  • Type: nt:unstructured

27. Click on the following node: /apps/summit_toys/components/login/cq:dialog/content/items/herotext/items/column/items.

28. Right click and select Create, Create Node. Enter the following values:

  • Name: title
  • Type: nt:unstructured

29. Click on the following node: /apps/summit_toys/components/login/cq:dialog/content/items/herotext/items/column/items/title.

30. Add the following properties to the title node:

  • fieldLabel (String) - Enter Page Title
  • fieldTitle (String) - Title
  • name (String) - ./title
  • sling:resourceType (String) - granite/ui/components/foundation/form/textfield

31. Click on the following node: /apps/summit_toys/components/login/cq:dialog/content/items/herotext/items/column/items.

32. Right click and select Create, Create Node. Enter the following values:

  • Name: subheading
  • Type: nt:unstructured

33. Click on the following node: /apps/summit_toys/components/login/cq:dialog/content/items/herotext/
items/column/items/subheading.

34. Add the following property to the subheading node.

  • fieldLabel (String) - Enter Page Title Sub Heading
  • name (String) - ./subheading
  • sling:resourceType (String) - granite/ui/components/foundation/form/textfield

35. Click on the following node: /apps/summit_toys/components/login/cq:dialog/content/items/herotext/items/column/items.

36. Right click and select Create, Create Node. Enter the following values:

  • Name: alt
  • Type: nt:unstructured

37. Click on the following node: /apps/summit_toys/components/login/cq:dialog/content/items/herotext/
items/column/items/alt.

38. Add the following property to this node.

  • fieldLabel (String) - Text Alt
  • name (String) - ./alt
  • sling:resourceType (String) - granite/ui/components/foundation/form/textfield

39. Click on the following node: /apps/summit_toys/components/login/cq:dialog/content/items/herotext/items/column/items.

40. Right click and select Create, Create Node. Enter the following values:

  • Name: file
  • Type: nt:unstructured

41. Click on the following node: /apps/summit_toys/components/login/cq:dialog/content/items/herotext/
items/column/items/file.

42. Add the following property to this node.

  • fieldLabel (String) - logo
  • name (String) - ./file
  • sling:resourceType (String) - granite/ui/components/foundation/form/textfield

Add code to the Login component

Ensure that the extension of the component is .HTML. It should appear as shown in the following illustration. 

Component
The Login component displayed in the AEM JCR

Add the following code to the login.html file. 

<sly data-sly-use.clientlib="/libs/granite/sightly/templates/clientlib.html" data-sly-call="${clientlib.all @ categories='summit.boot.foundation,summit.login'}"/>
 
<form class="form-signin">
      <img src="${properties.file}" alt="${properties.alt}" class="img-rounded">
         
<h2 class="form-signin-heading">${properties.title || "Please Enter Title"}</h2>
 
 
<h4 class="form-signin-heading"><small>${properties.subheading || "Please enter sub heading"}</small></h4>
 
        <label for="inputEmail" class="sr-only">User Name</label>
        <input type="TEXT" id="userId" class="form-control" placeholder="User Name" required autofocus>
        <label for="inputPassword" class="sr-only">Password</label>
        <input type="password" id="inputPassword" class="form-control" placeholder="Password" required>

<div class="checkbox">
          <label>
            <input type="checkbox" value="remember-me" id="rememberMe"> Remember me
          </label>
        </div>

        <button class="btn btn-lg btn-primary btn-block" id="loginButton" >Sign in</button>

<div id="errordiv"></div>

        <span><input type="hidden" id="url" value= "${pageProperties.homePagePath}/j_security_check" /></span>
      </form>

Note:

In above code, there is a hidden field (URL) that consists of an URL (that includes /j_security_check) that invokes the default Experience Manager login Servlet.  For more information, see this Ask the AEM Community Experts session: http://bit.ly/ATACEFeb15.

Modify the summit-toys clientlibs folder

Next, add a JS file to the summit-toys clientlibs folder located at /etc/clientlibs/summit-toys. Name the JS file login.js. This JS file defines the functionality of the Login component.

The following code represents this file. 

$(function() {
checkCookie();
 
$("#inputPassword").keyup(function(event){
if(event.keyCode == 13){
$("#loginButton").click();
}
})
 
$("#loginButton").click(function(e){
 
e.preventDefault();
if($('#rememberCheckbox').is(":checked")) {
user = $("#userId").val();
if (user != "" && user != null) {
setCookie("usr_c",user,30);
}
}
 
var valid = validateForm();
if(valid){
$.ajax({type: "POST",
url: $('#url').val(),
data: { j_username: $("#userId").val(), j_password: $("#inputPassword").val(),j_validate: "true" },
success:function(data,textStatus,jqXHR ){;
window.location.href=getRedirectPath();
},
error: function(XMLHttpRequest, textStatus, errorThrown) {
$("#errordiv").val("Invalid User Name or Password");
}});
} else{
$("#errordiv").val("Invalid User Name or Password");
}
});
});
 
//Function to redirect to homepage after login
var getRedirectPath = function () {
return "/content/summit-toys/en.html";
}
 
// Function for setting cookies at login page
var setCookie = function (cname,cvalue,exdays) {
var d = new Date();
d.setTime(d.getTime() + (exdays*24*60*60*1000));
var expires = "expires=" + d.toGMTString();
document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}
 
// Function for getting cookies at login page
var getCookie = function (cname) {
var name = cname + "=";
var decodedCookie = decodeURIComponent(document.cookie);
var ca = decodedCookie.split(';');
for(var i = 0; i < ca.length; i++) {
var c = ca[i];
while (c.charAt(0) == ' ') {
c = c.substring(1);
}
if (c.indexOf(name) == 0) {
return c.substring(name.length, c.length);
}
}
return "";
}
 
// Function for checking cookies at login page
var checkCookie = function () {
var user=getCookie("usr_c");
if (user != "") {
$("#userId").val(user);
}
}
 
// Function for validating Login form
var validateForm = function() {
var valid = false;
if(($("#userId").val().length >0) || ($("#inputPassword").val().length >0)){
valid = true;
}
return valid;
}

In this example, notice this line of code: 

//Function to redirect to homepage after login
var getRedirectPath = function () {
return "/content/summit-toys/en.html";
}

This JavaScript function returns the page to display when the authententication is successful.

 

Create a Login page for the Toy Store site

Create a template and a page component. 

Create a Login template

Create the Login template for the Toys Site by performing these tasks:

1. Navigate to the /apps/summit_toys/templates directory.

2. Right click on templates and create a template named login.

3. Set a sling resource type: summit_toys/components/content/login.

4. Set the allowed Paths value to: /content/summit-toys(/.*)?.

Create a Login page component

Create the Login page component by performing these steps:

1. Navigate to /apps/summit_toys/components/content and create a component called login.

2. Create the property sling:resourceSuperType that points to summit_toys/components/structure/contentpage.

3. Rename the login.jsp file to login.html.

4. Enter the following code.

<div class="wrapper row3">
  <main class="hoc container clear"> 
    <!-- main body -->
   <main class="hoc clear"> 
    <div data-sly-resource="${'log' @ resourceType='/apps/summit_toys/components/login'}"></div>
  </main>

</div>

Create the Login page

Create a Login page based on the Login template by using the AEM Touch UI. Make sure this page is a sibling to the main EN page, as shown here: 

loginLoc
The Login Page that belongs to the Toy Store site

Note:

The reason why the the login page has to be a sibling of en is because everything under en will be protected. You can access the login page without having to login. 

Perform these tasks:

1. Click the Adobe Experience Manager in the upper left corner.

2. Navigate to Sites and select Summit Toys.

3. Click Create, Page.

4. Select the Login template, as shown here.

LogTemplate
The Login Template

 5. Click Next.

6. Create a page with the following values:

  • Name: newlog
  • Title: NewLog

7. Once the new page.

Login
The login page

Specify the Closed User Group that can access the site

Specify the Closed User Group, whose member can access the site. Add some users to the CUG that can be used to login to the Toy Store site. Ensure that you specify permissions for the user to access the Toy Store. For information about setting up a closed user group and adding users, see Creating a Closed User Group.

Perform these tasks:

1. Click the Adobe Experience Manager in the upper left corner.

2. Navigate to Sites and select Summit Toys->English->Properties, as shown here.

Sites
Accessing Page properties

3. Under the Authentication Requirement section, click the Enable checkbox. In the Login Page field, specify the location of the Login page that you created. For example, /content/summit-toys/newlog.

Authen2
The Advanced tab of the page properties

4. Under the Permissions tab, select Edit Closed User Group from the top menu and specify the CUG whose members are allowed to login to the Toy Store site. 

ToyCUG
The Closed User Group that can access the Toy Store site

Test the Login Component on a Publisher instance

To test the login functionality, deploy the package to an Experience Manager Production instance. On the Production instance, setup the same Closed User Group and add members to the CUG that can access the Toy Store Site. Also make sure the EN page has the same Page properties as you set on Author.

After you perform these tasks, attempt to access the site by using the following URL: 

http://localhost:4503/content/summit-toys/en.html

You will see a page direct to the login page. Log into the site using a member that belongs to the CUG that you configured. You will now see the Toy Store site. 

See also

Join the AEM community at: Adobe Experience Manager Community

This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License  Twitter™ and Facebook posts are not covered under the terms of Creative Commons.

Legal Notices   |   Online Privacy Policy