Article summary

Summary

This development article discusses how to create a login component for the Experience Manager Weekend 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.4
Audience Developer
Required Skills Java, HTML, JavaScript
Version 6.4
Video

See end of article 

Prerequisites

To follow along with this Experience Manager development article, you need to build the Experience Manager Weekend site located here: Getting Started with AEM Sites Part 6 - Sling Models and Card Component.  

As an alternative, you can install the following package that represents the complete solution (you still need to set page properties and configure the CUG as discussed near the end of this article).

Download

Introduction

You can develop a login component for the Adobe Experience Manager Weekend 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 Weekend site. The login component is created by using HTL. For more information, see HTML Template Language.

loginPage
An AEM login page for the Toy Site

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

page
The Experience Manager Weekend page

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 /apps/wknd/clientlibs, as shown in the following illustration. 

clientlibs
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 /apps/wknd/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/wknd/components/content 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 component. Enter login.
  • Super Resource Type: Enter foundation/components/parbase.
  • Group: The group in the side rail or side kick where the component appears. Enter WKND.Content

3. 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/wknd/components/content/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/wknd/components/content/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/wknd/components/content/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/wknd/components/content/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/wknd/components/content/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/wknd/components/content/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/wknd/components/content/login/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/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. 

login
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 clientlibs folder

Next, add a JS file to the summit-toys clientlibs folder located at /apps/wknd/clientlibs/boot-foundation/js. 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/wknd/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/wknd/en.html";
}

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

 

Create a Login Page template

To create a new login page, you have to create a new editbale template that is used to create a new page. Perform these tasks: 

1. From the Start page, click the Tools icon (a hammer) and click on Templates.

2. Click on the wknd folder to open it.

3. Click the Create button to create a template.

4. In the Create Template wizard, select the WKDN Site Empty Page template type and click the Next button.

5. On the Template Details step, provide a title (specify LoginTemplate) for your template and click the Create button. Once your template has been created, click the Open button to open the template.

6. Drop only the Login component into this page. 

The following illustration shows the LoginTemplate template that was created.  

template
The LoginTemplate displaying only the login component

Create a Login Page

You can create an Experience Manager page that is based on the editable template. Perform these steps. 

1. Click on the Experience Manager logo on the top left corner of the screen to open the global navigation.

2. Click the compass icon to switch out of the Tools menu.

3. Click on the Sites icon to open the Sites console in the Touch UI environment.

4. Select the wknd folder in the First column.

5. Click the Create button and select Page. Click on the LoginTemplate to select it. Click the Next button.

6. Specify a title for your page and click the Create button. In this example, specify weekendLogin for the title.

7. Click the Create button and then open the page. You will see the page with the login component displayed.  

loginPage
The login page

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. 

pagelevs
The new login page is a sibling to the main page

Setup a closed user group

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 Weekend site. Ensure that you specify permissions for the user to access the Weekend. 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 WKND->English->Properties, as shown here.

PageCUG
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/wknd/weekendLogin.

pageCUG2
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 Weekend site. 

pageCUG3
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 Weekend 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/wknd/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 Weekend site. as shown in this video. 


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