angularjs1

Liferay and AngularJS Made Simple: Connecting AngularJS to a Backend with REST and JSON

Introduction

Liferay is the leading Open Source Enterprise Portal. One may asked what an enterprise portal is and this question is very valid as it has been asked on every single Liferay project that I have worked. This blog post is not about defining what an enterprise portal is but it wouldn’t be a crime if we provided a brief definition:

An enterprise portal is a web application which provides services required by an enterprise such as: user management, authentication and authorisation services, ability to connect to third party applications and provide a single point of access to multiple applications, hence the “portal”.

The above is my own definition and it could be extended to encompass web content management, content management system (CMS) and single sign on (SSO). This post is about Liferay and the use of its web content management system (WCMS) to create single page applications using AngularJS. The motivation to create portlets using AngularJS instead of Java is as:

  • Portlet development using Java is very expensive
  • Not many Java developers with portlet experience
  • Java portlets development requires heavy duty tools such as build tools, IDE and JVM
  • Portlet developers need to be familiar with the Portlet API, lifecycle and framework

We will focus on Liferay available RESTful web services API but do remember that you can create your own custom web services using Liferay service builder SDK.

Liferay RESTFul API and Security

Liferay ReSTFul and SOAP API implement the same security as the core library:

  • API can be secured so that only authenticated users can access them (AUTHENTICATION)
  • API can be secured so that only users with the right roles can executed certain API calls (AUTHORIZATION)

When creating your own custom API, Liferay Services Builder will create the necessary permission for the web services API.
For a list of API available in Liferay, point your browser to the following

http://<your-server-address>:<your-server-port>/api/jsonws

Liferay will provide a means of testing the services calls when the above URL is loaded. Most services execution will require authentication or a secured token to be passed on with the calls. This level of a security is required in an enterprise environment. It is possible to stop Liferay from checking for the secured token in portal-ext.properties as

Auth.token.check.enabled=false

Software developments should promote code reuse, therefore by separating the business logic from the portlet code, developers can share the business logic with third party applications.

Why Use AngularJS to Create Web Applications (Not Portlets)?

This is not a tutorial on AngularJS. Developers should use the same approach for developing any AngularJS application to developing Liferay web applications.
AngularJS is a popular JavaScript framework promoting Object Oriented Development (OOD) and Model View Controller (MVC) to the JavaScript community. Java developers are already custom with the methodology through the use of Spring MVC and JSF for front end developments. Developers familiar with Google Web toolkit (GWT) should find themselves in familiar territory. Now to answer the question of why use AngularJS to create web applications on Liferay?
AngularJS is JavaScript and therefore can be executed in the browser without recompilation and redeployment. Liferay Web Content Management System (WCMS) provides an HTML editor and content versioning. Liferay JSONWS API runs on the same server and can be accessed through the JavaScript written in the WCMS. AngularJS modules can be written in a third party editor such Notepad++ and uploaded to Liferay Content Management System (CMS). The Liferay CMS provides a link to the latest version of the file which can be referenced in the HTML/ JavaScript code. By creating the web services in Java through Liferay Services Builder, the java developer can focus on the business logic – including testing. The front end developer can utilise his skills in HTML and JavaScript to develop the user interfaces and any necessary interactions with the backend through the ReSTFul services. There is a clear separation of work and accountability. The learning curve for the Java developers to create the services will be minimal. To preview the live code, the frontend developer only has to save the content (WCMS) and refresh the page to see the latest changes.
Here is a quick example:

 

 <div ng-app="" ng-controller="companiesController">  
   <ul>  
    <li ng-repeat="x in data">{{'title: ' +x.title + ', group Id: ' + x.groupId }}</li>  
   </ul>  
 </div>  
 <script>  
   function companiesController($scope,$http) {  
    $http.post("http://localhost:8080/api/jsonws/assetentry/get-company-entries/company-id/10157/start/0/end/5?p_auth=cbSXanJ2")  
    .success(function(response) {$scope.data = response;});  
   }  
   companiesController.$inject = ['$scope', '$http'];  
 </script><script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>  

You can copy the above in a new web content article and see the result displayed on the page. Make sure to change red bold values to your system specific:

  • Company id: for ease of testing, you can retrieve that value from the control panel
  • P_auth: this value can be looked up programmatically as it will change every time the user logs into the portal

Traditionally, the simple code above would require a JavaServer page or JSF application which is slow for rapid prototyping. In software testing, portlets controller are one of the most complex components to test. By creating a clear separation between components, testers and automated tools can test each components individually. The sample code pulls information from Liferay REST web services and displays a list of registered companies on the page.

Conclusion

Liferay has a rich set of features which allows developers to create enterprise components and applications. When working with ReSTFul services, Liferay Web Content Management editor can act as an Integrated Development Environment in the browser. AngularJS is approaching maturity and it is very popular with web developers. Liferay 7 (next release as of writing ) will be introducing single page portlets but this is already possible with AngularJS and ReSTFul web services API. Needless to say that you can use any web browser to create content in Liferay CMS and debug your code in real time using tools such as Firebug.

Liferay Tech Talk Live – Securing against online threats

ETAPIX will be presenting at Liferay Tech Talk on 05/02/2013 at Liferay UK User Group.

ETAPIX has been working with Liferay portal for over 4 years now on various projects including such clients as Nokia, Razorfish, RenCap and Robert Walters.

We will be presenting on how to secure your Liferay installation against online threats even if in theory, nothing is hacker-proof, we should make it almost impossible  in practice.

Feel free to talk to us on the day, we are a friendly bunch.

Java-risk-715144

Hacking Liferay – Securing against online vulnerabilities

This is a brief post on securing Liferay on Tomcat and MySQL.
Liferay CE is stable enterprise portal, as more companies
start to adopt it, therefore security becomes a very important aspect of the
deployment. I am not sure if Liferay has been officially tested by a 3rd
party security firm but based on my simple security test against OWASP  Top 10 vulnerabilities, I can say that it looks good in that aspect. Some of the recommendations are taken from their
respective sites while others are based on our testing. We tested the following
on Linux Ubuntu 12.04 LTS.
Here is what I did for a quick test (using default
installation of liferay-portal-tomcat-6.1.1-ce-ga2-20120731132656558) :
1-
Download the Zed Attack Proxy (ZAP) from OWASP
2-
Make ZAP is set to run the following attacks:
a.
Path traversal
b.
Remote file Inclusion
c.
URL Redirector Abuse
d.
Server Side Include
e.
Cross Site Scripting
f.
SQL Injection
g.
Directory Browsing
h.
Session ID in URL rewrite
i.
Secure page browser cache
j.
External redirect
k.
CRLF injection
l.
Parameter tampering
3-
Run Liferay with default settings
4-
Now sit back and watch Liferay logs go “CRAZY”
Passing the OSWAP Top 10 vulnerabilities doesn’t mean that
you are out of the water yet. This test just focuses on browser based
penetration tests.
Here some steps to have an even more secured Liferay
deployment on Tomcat.

Make sure Tomcat uses SSL
to serve Liferay content

Make sure that you do not run Tomcat as “root”
user
o
Tomcat user should not have remote access to the
server

Disable auto-deployment of web applications

Change the file permissions on the Tomcat folder;
all Tomcat files should be owned by “root” user with group Tomcat  and
whilst owner has read/write privileges, group only has read and world has no
permissions. The exceptions are the logs, temp and work directory that are
owned by the Tomcat user rather than root. This means that even if an attacker
compromises the Tomcat process, they can’t change the Tomcat configuration,
deploy new web applications or modify existing web applications. The Tomcat
process runs with a umask of 007 to maintain these permissions.

Enable
Tomcat Security Manager, this causes web application to be run in a sandbox

In Server.xml
do the following:
o
Disable the
shutdown port by setting its attribute to -1
o
Make
sure that Tomcat HTTP connectors only to designated IP address; by default the
connectors listen to all configured IP addresses
o
Configure
the “ciphers” attribute used for SSL connections. By default, Tomcat uses the
default ciphers for the JVM which contains weak export grade ciphers
There are more
Tomcat settings which is available online.
You also need to
make sure that you secure your Operating System and Network. Now that we have
some basic security in place for Tomcat, let’s now tackle the our database. In
this test, we used MySQL 5.
Here is some basic
MySQL security:

Set a
root password for MySQL

Remove
all anonymous accounts

Disable
non-local root access

Remove
all test databases and any access rules related to them

Reload privilege
tables to apply the changes

Enable
SSL connection for MySQL, the default connection
is unencrypted
Now to conclude, let’s
secure our Liferay instance. Liferay is configured through portal.properties
and you should override those settings in portal-ext.properties. Create the
file if it doesn’t exist:

Set web.server.host=MY-HOST-NAME
so that it is not dynamically set

Set the preferred
protocol to web.server.protocol=https

If you
want Liferay to be only accessible from certain IP addresses, set
main.servlet.hosts.allowed=,,

To make
Liferay only accessible through HTTPS, set main.servlet.https.required=true

Secure the
Axis servlet as follow:
o
axis.servlet.hosts.allowed=127.0.0.1,SERVER_IP
axis.servlet.https.required=true

Secure
the JSON Tunnel Servlet as follow:
o
json.servlet.hosts.allowed=
json.servlet.https.required=true

Secure Liferay Tunnel Servlet as follow:
o
tunnel.servlet.hosts.allowed=127.0.0.1,SERVER_IP
tunnel.servlet.https.required=true

Secure Spring Remoting Servlet
o
spring.remoting.servlet.hosts.allowed=127.0.0.1,SERVER_IP
spring.remoting.servlet.https.required=true

Securing the Webdav Servlet
o
webdav.servlet.hosts.allowed=
webdav.servlet.https.required=true

Make sure you have configured the Admin
portlet by overriding all the default values

The IFrame Portlet, when used in a high
security environment, should have the following properties set
o
iframe.password.token.role=

JAAS security need to have properties set:
o
To stop user from passing in encrypted
password: portal.jaas.strict.password=true

Passwords: Choose a strong password
encryption algorithm to encrypt passwords by setting the following:
o
passwords.encryption.algorithm=
I am sure that many
other security settings are left out so feel free to share in the comments. I
hope this helps someone to secure their Liferay environment.

Develop Your Own Google with Apache Lucene (Java Nutch Solr)

Apache Lucene is Open Source API that allows a Java developer (.Net libraries available) to write indexing and full-text search capable applications. I have been writing applications based on Lucene for the last 3 years and some of the applications have been deployed at large corporations. I know there are other libraries available to developers who wish to write indexing engine but this blog will solely focus on Apache Lucene. I will not compare it to other API.

Lucene is a very mature API and can be found in NetBeans IDE, Liferay, JackRabbit among others. IBM has written a very good document about the Lucene architecture, therefore I will not delve into it here.

Lucene, alone, is pretty much useless as any other API. Let’s now introduce Nutch. Nutch is a web crawler built-on top of Lucene to provide file crawling capabilities. Nutch was designed to handle large amount of data from the internet (http). Due to its plugin architecture, it was later extended to provide local network crawling such as FTP, databases and Microsoft Windows Shares (I am the author of the protocol-smb plugin and co-author of the index-extra plugin found on the Nutch site). We had extended Nutch and turned it into an Enterprise Search application but most of the source codes were locked behind closed doors (company politics).Anyway, Nutch has evolved to become but still very complex in its inner working. The initial Nutch was developed to process data in a batch but there are ways to turn it real-time but that’s for another day. Ok, so Nutch is good for crawling and indexing of data but it does not handle search directly. There is a web application available with Nutch but it is quite poor so let’s now introduce the Solr.

Solr is a powerful web-based search server built-on top of Lucene. The application was developed by CNET Networks and donated to the Apache Foundation. I believe, not too sure so I might need some references here, Solr was powering the search feature on their site but it is definitely used internally by the company. Late 2009, Lucid Imaginations receives $7.5 million in funding to provide commercial services built around Solr (and Lucene possibly?). Here is a very good presentation about Solr. Solr is a very good indexing engine. The keyword here is “indexing engine”. It does not have any support for crawling data therefore requiring the developer to create applications that will feed it the data to index. I do believe that it is a good feature of the application as it gives the ability to integrate with various systems as long as they can post data over HTTP.

Nutch is a good crawler but it does not provide an enterprise-grade search interface to its data. Solr, in the other hand, is powerful indexer and has an enterprise grade search interface but it does not know how to gather data in its own. I am sure by now it has become obvious how we can integrate them both together.

We want Nutch to gather the data, by-pass its indexing cycle and feed the data directly to Solr. Lucid Imagination has a good tutorial about it here.

After reading the tutorial from Lucid Imagination, you will notice that Nutch is run by executing some bash files. This is something I strongly disagree with. If Nutch is based on Java (an OS independent language), why do we need to execute some UNIX/LINUX shell script. Also, the fact we need to install CygWin on MS Windows platform to be able to run is a big negative for me. I wrote a simple Java application that will launch Nutch and send the indexing to Solr but as you can see in the source code, you still need a UNIX like environment to run successfully. You can write a platform independent version by looking up Nutch API and calling the methods directly.

Well, I hope that this entry help you understand how to use Nutch and Solr built-on top of Apache Lucene. If you need any clarification, leave comments and I will try to gave ASAP if time permits.

package com.etapix.nutchsolr;

import java.io.BufferedReader;
import java.io.File;
import java.io.FileFilter;
import java.io.InputStream;
import java.io.InputStreamReader;
import java.util.logging.Level;
import java.util.logging.Logger;

/**
 *
 * @author Armel Nene
 */
public class Indexer {

    public static void main(String args[]) {
        if (args.length < 3) {
            System.out.println("Usage:" +
                    "ncrawlName        -   This will be used to store crawler files in CrawlName directory" +
                    "nurlFolder        -   The path to the folder containing the URL to crawl" +
                    "nsolrUrl          -   The URL to the Solr server");
            return;
        }
        String crawlerName = args[0];
        String urlFolder = args[1];
        String solrUrl = args[2];
        String inject = "bash bin/nutch2.sh inject " + crawlerName + "/crawldb " + urlFolder;
        String generate = "bash bin/nutch2.sh generate " + crawlerName + "/crawldb " + crawlerName + "/segments -topN 10 -numFetchers 5";
        String export = crawlerName + "/segments/";

        String invertLinks = "bash bin/nutch2.sh invertlinks " + crawlerName + "/linkdb -dir " + crawlerName + "/segments";
        String indexSolr = "bash bin/nutch2.sh solrindex " + solrUrl + " " + crawlerName + "/crawldb " + crawlerName + "/linkdb " + crawlerName + "/segments/*";
        try {
            System.out.println("Injecting URLs in crawldb");
//            int state = 0;
            InputStream in = Runtime.getRuntime().exec(inject).getInputStream();
            System.out.println(convertStreamToString(in));


//            state = Runtime.getRuntime().exec(inject).waitFor();
//            System.out.println("process completed: " + state);

            for (int i = 0; i < 3; i++) {
                System.out.println("Generating segments");
                in = Runtime.getRuntime().exec(generate).getInputStream();
                System.out.println(convertStreamToString(in));

                System.out.println("Setting environment variable $SEGMENT");
//            String segs = convertStreamToString(Runtime.getRuntime().exec("ls -tr " + crawlerName + "/segments|tail -1").getInputStream());

                String segments = export + lastFileModified(export).getName();
                System.out.println("$segments: " + segments);
//            in = Runtime.getRuntime().exec(export + segs).getInputStream();
            System.out.println(convertStreamToString(in));

                String fetch = "bash bin/nutch2.sh fetch " + segments + " -noParsing";
                String parse = "bash bin/nutch2.sh parse " + segments;
                String update = "bash bin/nutch2.sh updatedb " + crawlerName + "/crawldb " + segments + " -filter -normalize";

                System.out.println("fetch segments");
                in = Runtime.getRuntime().exec(fetch).getInputStream();
                System.out.println(convertStreamToString(in));

                System.out.println("Parse segments");
                in = Runtime.getRuntime().exec(parse).getInputStream();
                System.out.println(convertStreamToString(in));

                System.out.println("Update crawldb");
                in = Runtime.getRuntime().exec(update).getInputStream();
                System.out.println(convertStreamToString(in));
            }
            System.out.println("Inverting links");
            in = Runtime.getRuntime().exec(invertLinks).getInputStream();
            System.out.println(convertStreamToString(in));

            System.out.println("Indexing contents to Solr " + solrUrl);
            in = Runtime.getRuntime().exec(indexSolr).getInputStream();
            System.out.println(convertStreamToString(in));

        } catch (Exception ex) {
            Logger.getLogger(Indexer.class.getName()).log(Level.SEVERE, null, ex);
        }
    }

    public static String convertStreamToString(InputStream is) {
        /*
         * To convert the InputStream to String we use the BufferedReader.readLine()
         * method. We iterate until the BufferedReader return null which means
         * there's no more data to read. Each line will appended to a StringBuilder
         * and returned as String.
         */
        BufferedReader reader = new BufferedReader(new InputStreamReader(is));
        StringBuilder sb = new StringBuilder();

        String line = null;
        System.out.println("Now converting inputstream to text");
        try {
            while ((line = reader.readLine()) != null) {
                sb.append(line + "n");
            }
        } catch (Exception e) {
            e.printStackTrace();
        } finally {
            try {
                is.close();
            } catch (Exception e) {
                e.printStackTrace();
            }
        }
        System.out.println("Finish converting to text");
        return sb.toString();
    }

    public static File lastFileModified(String dir) {
        File fl = new File(dir);
        File[] files = fl.listFiles(new FileFilter() {

            public boolean accept(File file) {
                return file.isDirectory();
            }
        });
        long lastMod = Long.MIN_VALUE;
        File choice = null;
        for (File file : files) {
            if (file.lastModified() > lastMod) {
                choice = file;
                lastMod = file.lastModified();
            }
        }
        return choice;
    }
}

netbeans-choose-server

Building Portlet 1.0 (JSR168) with GWT 1.7 on NetBeans 6.7

In this tutorial, I will build a Portlet 1.0 (JSR168) which I will then deploy on Liferay and OpenPortlet Container. Alternatively, the portlet should be able to run on any other JSR168 compliant portlet container. I like the “Hello World” tutorial that we are accustomed to but I wanted to do something different this time. I decided to build the a GWT 1.7 based portlet which also make use of the Google Visualization API for GWT.
In order to follow this tutorial, you will need the following:

This is not a tutorial about GWT or JSR168 Portlet but a focus on how to make them both work together to provide a nice UI. Prior knowledge of building and deploying portlet applications and developing GWT applications is required.
Once the development environment is ready, launch NetBeans and create a new web application project with Portlet and GWT support. Follow these steps in order to create web application with Portlet and GWT support.

  1. Create a new web project
  2. Give a project name and click next
  3. Choose your deployment portlet container and click next

  1. Add Google Web Toolkit (GWT) framework to your project

  1. Add Portlet Support to your project, chise any version and tick the boxes to create portlet and jsps. Fill in any required fields and click finish


NetBeans then generates all the required files in order to build the application. Initially, the two frameworks; Portlet and GWT are unaware of each other. Depending on your folder structure the following will be different. Here is a screenshot of my project structure in NetBeans.


My project is called LiferayHomePortlet as my Portlet Container is Liferay 5.2. My root package is com.etapix. This package will be used by GWT as the default package and will create the client and server packages as follow:

  • Com.etapix.client: this is package will have all my client side code including my xxxxEntryPoint.java class (xxxx being the name that you have chosen for your GWT)
  • Com.etapix.server: this package will not be used for the purpose of this tutorial

xxxx.gwt.xml (xxxx should be replaced with the name you are chosen will setting up the GWT framework for the project) was created in my root package “com.etapix”

NetBeans portlet generation feature has created, among other files, three jsps file under the WEB-INF/jsp folder

  • xxxxPortlet_edit.jsp
  • xxxxPortlet_help.jsp
  • xxxxPortlet_view.jsp

and the java class which will be used to render the portlet are allocated in com.etapix.liferay.portlet folder as LiferayHomePortlet.java.

In order for the portlet to display the chart from the GWT Visualization API, I have changed the generated code from portletEntrtyPoint.java. Once the changed to the GWT file was done, change the following file:

  • xxxxPortlet.java to include the following line in the “doView” method. Here is how you doView method should look like

    public void doView(RenderRequest request, RenderResponse response) throws PortletException, IOException {

    response.setContentType(“text/html”);

    PortletRequestDispatcher dispatcher =

    getPortletContext().getRequestDispatcher(“/WEB-INF/jsp/LiferayHomePortlet_view.jsp”);

    PrintWriter writer = response.getWriter();

    writer.println(“<script language=’javascript’ src='” + request.getContextPath() + “/com.etapix.portlet/com.etapix.portlet.nocache.js’></script>”);

    dispatcher.include(request, response);

    }

  • xxxxPortlet_view.jsp. This is what your code should look like

    <%@page contentType=”text/html”%>

    <%@page pageEncoding=”UTF-8″%>

    <%– Uncomment below lines to add portlet taglibs to jsp

    <%@ page import=”javax.portlet.*”%>

    <%@ taglib uri=”http://java.sun.com/portlet_2_0″ prefix=”portlet”%>

    <portlet:defineObjects />

    <%PortletPreferences prefs = renderRequest.getPreferences();%>

    –%>

    <div id=”gwt”></div>

Once the changes are completed, build your application and deploy it to your portlet container of your choice.

This is what it looks like in Liferay Portlet container

this is what it looks in OpenPortal Portlet Container.


This was my first blog tutorial as I am looking to provide more tutorials in the future. I hope you found this helpful. I have included the NetBeans project folder for your to play with.
download NetBeans project

Please support my blog and its advertisers by clicking on the interesting products/ services on the right (Google ads).  Cheers.