Vue.js Vs React

Click here to see vue.js Vs React.

Get properties in AEM sling servlet

Usecase: I had a situation to fetch properties from node/page/cloud configurations from sling servlet. 

Issue: In wcmusepojo we can get these cloud configuarations using getInheritedPageProperties(). But inheritedPageProperties variable is not accessible in osgi service or sling servlet.

Solution:
To get properties of a node/page/cloud configurations from sling servlet do the following.

• Pass the node path from ajax to servlet.
• Create a system user to read the properties.

Below is sample servlet code.

/**
* Author: Kishore Polsani
*/
@Component(name = "com.kishore.aem.GetProperties", label = "Get Properties", immediate = true, metatype = true)
@Service
@Properties({ @Property(name = "service.description", value = "Get Properties"),
            @Property(name = "sling.servlet.paths", value = "/services/aemquickstart/getproperties", propertyPrivate = true),
            @Property(name = "service.vendor", value = "AEMQuickstart")
         })
    public class GetProperties extends SlingAllMethodsServlet implements Serializable {
        private static final long serialVersionUID = 1L;
        private Logger log = LoggerFactory.getLogger(GetProperties.class);
        
        @Reference
        protected SlingRepository repository;
        @Reference
        private ResourceResolverFactory resolverFactory;
        
        @Override
        protected void doGet(SlingHttpServletRequest request, SlingHttpServletResponse response) throws ServletException
                    {
                  
            try {
                Map<String, Object> param = new HashMap<String, Object>();  
                param.put(ResourceResolverFactory.SUBSERVICE, "readService");
                ResourceResolver resourceResolver=null;
                resourceResolver = resolverFactory.getServiceResourceResolver(param);
                /* Get this path from ajax call request*/
                Resource pageResource = resourceResolver.getResource("/etc/cloudservices/salesforce/kishore/jcr:content");
                Node configNode = pageResource.adaptTo(Node.class);
                configNode.getProperty("accesstoken");
                log.info("Access token from cloud config"+configNode.getProperty("accesstoken"));
                Session session = resourceResolver.adaptTo(Session.class);
                session.save();
            } catch (AccessDeniedException e) {
                log.error(e.getMessage());
            } catch (PathNotFoundException e) {
                log.error(e.getMessage());
            } catch (ItemExistsException e) {
                log.error(e.getMessage());
            } catch (ReferentialIntegrityException e) {
                log.error(e.getMessage());
            } catch (ConstraintViolationException e) {
                log.error(e.getMessage());
            } catch (InvalidItemStateException e) {
                log.error(e.getMessage());
            } catch (VersionException e) {
                log.error(e.getMessage());
            } catch (LockException e) {
                log.error(e.getMessage());
            } catch (NoSuchNodeTypeException e) {
                log.error(e.getMessage());
            } catch (LoginException e) {
                log.error(e.getMessage());
            } catch (RepositoryException e) {
                log.error(e.getMessage());
            }
        }   
}

Check this post to get properties in different way: Registering a Servlet for every Page in AEM

Creating RTE in Multifield

Discusses how to develop an AEM HTML Template Language (HTL - formerly known as Sightly) component that uses the WCMUsePojo class and uses a Multifield (granite/ui/components/foundation/form/multifield) in the component dialog. This article also covers using the Experience Manager Uber 6.3 JAR.

HTL is the AEM template language that can be used to replace use of JSP when developing an AEM component. HTL helps you to separate your design from your application logic. For more information, see Introduction to the HTML Template Language.

Read More

Integrate AEM with React JS library

Introduction

React is a Javascript library developed solely for the purpose of UI designing. It was developed in Facebook to facilitate the implementation of reusable, interactive and stateful UI components. Facebook use this library in production. 

It carefully notes down the differences in in-memory cache and use these differences to update the DOM in browser, which is what gives him the boost. This is the Virtual DOM feature.

Validate JWT token and Secret Key

What is JSON Web Token?

JSON Web Token (JWT) is an open standard (RFC 7519) that defines a compact and self-contained way for securely transmitting information between parties as a JSON object. This information can be verified and trusted because it is digitally signed. JWTs can be signed using a secret (with the HMAC algorithm) or a public/private key pair using RSA.

When should you use JSON Web Tokens?

Here are some scenarios where JSON Web Tokens are useful:

• Authentication: This is the most common scenario for using JWT. Once the user is logged in, each subsequent request will include the JWT, allowing the user to access routes, services, and resources that are permitted with that token. Single Sign On is a feature that widely uses JWT nowadays, because of its small overhead and its ability to be easily used across different domains.
• Information Exchange: JSON Web Tokens are a good way of securely transmitting information between parties. Because JWTs can be signed—for example, using public/private key pairs—you can be sure the senders are who they say they are. Additionally, as the signature is calculated using the header and the payload, you can also verify that the content hasn't been tampered with.

Click here to learn more about JWT.

Sample Java code to validate JWT token and secret key.

Add below maven dependency to your pom.xml

Install NodeJs

What is NodeJS

• Node.js is an open source server framework
• Node.js is free
• Node.js runs on various platforms (Windows, Linux, Unix, Mac OS X, etc.)
• Node.js uses JavaScript on the server

Click here to check Why Node.js

What is npm?

npm makes it easy for JavaScript developers to share and reuse code, and it makes it easy to update the code that you're sharing.

Click here to learn more on npm.

Install npm

Click here to download and install the npm on your machine.

Test if nodeJs is installed correctly, run below command.

npm -v

or 

npm --version

npm version

Start npm run start, if you get below error 

npm ERR! path C:\Users\Kishore\package.json
npm ERR! code ENOENT
npm ERR! errno -4058
npm ERR! syscall open
npm ERR! enoent ENOENT: no such file or directory, open 'C:\Users\Kishore\package.json'
npm ERR! enoent This is related to npm not being able to find a file.
npm ERR! enoent

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\Kishore\AppData\Roaming\npm-cache\_logs\2017-08-19T14_53_13_265Z-debug.log

You can avoid above error by following below

• running the npm command from bin folder
• set environment variables (~\bin)