<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: Avi Dalal</title>
    <description>The latest articles on DEV Community by Avi Dalal (@avi413).</description>
    <link>https://dev.to/avi413</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F677390%2Fcd780fb7-3c32-4699-bfcd-75b029a2d836.jpg</url>
      <title>DEV Community: Avi Dalal</title>
      <link>https://dev.to/avi413</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/avi413"/>
    <language>en</language>
    <item>
      <title>Safeguarding Third-Party Integrations: Secure HTTP Calls in AEM as a Cloud</title>
      <dc:creator>Avi Dalal</dc:creator>
      <pubDate>Wed, 21 Jun 2023 18:16:38 +0000</pubDate>
      <link>https://dev.to/avi413/safeguarding-third-party-integrations-secure-http-calls-in-aem-as-a-cloud-27f6</link>
      <guid>https://dev.to/avi413/safeguarding-third-party-integrations-secure-http-calls-in-aem-as-a-cloud-27f6</guid>
      <description>&lt;p&gt;&lt;strong&gt;Introduction:&lt;/strong&gt;&lt;br&gt;
In today's digital landscape, integrating with third-party systems is crucial for delivering seamless and personalized experiences. However, ensuring the security of these integrations is paramount. In this blog post, we will explore a robust solution that allows Adobe Experience Manager (AEM) as a Cloud users to make secure third-party HTTP calls using certificates, safeguarding sensitive data and maintaining the integrity of their AEM deployments.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Section 1: The Challenge of Secure Third-Party Integrations&lt;/strong&gt;&lt;br&gt;
Integrating third-party systems into AEM as a Cloud brings numerous benefits, but it also introduces security concerns. Unsecured HTTP calls can expose sensitive data and compromise the integrity of the entire system. Therefore, a comprehensive security mechanism is crucial to protect against potential vulnerabilities.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Section 2: Introducing the Solution: Creating Service Users and Keystores&lt;/strong&gt;&lt;br&gt;
To establish secure integrations, we need to start by creating a service user in AEM as a Cloud. The service user acts as a bridge between AEM and the third-party API. Follow these steps to create the service user:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Create the file in the following directory structure:&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;path:&lt;br&gt;
&lt;code&gt;../ui.config/src/main/content/jcr_root/apps/[your-project-name]/osgiconfig/config&lt;br&gt;
&lt;/code&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Name the file with the following convention:&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;code&gt;org.apache.sling.jcr.repoinit.RepositoryInitializer~[generic-name].cfg.json&lt;br&gt;
&lt;/code&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Open the file and add the necessary configurations. For example, you can include the OSGi configuration JSON object that we discussed earlier:
&lt;/li&gt;
&lt;/ul&gt;
&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;{
    "scripts": [
        "create path (sling:OrderedFolder) /content/dam/[folder-name]",
        "create path (nt:unstructured) /content/dam/[folder-name]/jcr:content",
        "set properties on /content/dam/[folder-name]/jcr:content\n  set cq:conf{String} to /conf/[folder-name]\n  set jcr:title{String} to \"[folder-name]\"\nend",
        "create service user [your-service-user-name]\n set ACL for [your-service-user-name]\n allow jcr:read on /content \nend"
    ]
}

&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;


&lt;p&gt;In the above code, &lt;strong&gt;replace [folder-name]&lt;/strong&gt; with a generic folder name and &lt;strong&gt;[your-service-user-name]&lt;/strong&gt; with a generic service user name.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;add config file to map the user service&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;code&gt;user.mapping=["[project-name].core:[your-service-user-name]\=[[your-service-user-name]]"]&lt;br&gt;
&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;name the file somthing like that: &lt;/p&gt;

&lt;p&gt;&lt;code&gt;org.apache.sling.serviceusermapping.impl.ServiceUserMapperImpl.amended-[project-name-service-user-name].config&lt;br&gt;
&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Section 3: Storing Certificates in Keystores&lt;/strong&gt;&lt;br&gt;
Once the service user is created, we need to store the certificates in keystores within AEM as a Cloud. To accomplish this, follow these steps:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Extract the necessary information, list the aliases in a PFX keystore, it will prompt for the keystore password. Run the following command in a command prompt or terminal:
&lt;/li&gt;
&lt;/ul&gt;
&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;keytool -v -list -keystore certificatename.pfx
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;


&lt;p&gt;Replace certificatename.pfx with the actual filename of your PFX file. Enter the password for the PFX file when prompted.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
You can access the trust store by going to Tools -&amp;gt; Security -&amp;gt; Users&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--WjmtS0Qr--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7kckjrc1xeputgnsiqxa.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--WjmtS0Qr--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7kckjrc1xeputgnsiqxa.png" alt="Image description" width="800" height="592"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;the complete guide of uploading the pfx : &lt;a href="https://developer.adobe.com/events/docs/guides/using/aem/deprecated/aem_keystore_setup_6.4/"&gt;here&lt;/a&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;create a class to get the keystore
&lt;/li&gt;
&lt;/ul&gt;
&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;package [your-project-name].core.utils;

import java.io.IOException;
import java.security.KeyPair;
import java.security.KeyStore;

import javax.security.auth.login.LoginException;

import org.apache.sling.api.SlingIOException;
import org.apache.sling.api.resource.ResourceResolver;
import org.osgi.service.component.annotations.Component;
import org.osgi.service.component.annotations.Reference;

import com.adobe.granite.keystore.KeyStoreNotInitialisedException;
import com.adobe.granite.keystore.KeyStoreService;

@Component(service = PrivateKeyCertificate.class)
public class PrivateKeyCertificate {

    @Reference
    private KeyStoreService keyStoreService;

    public KeyStore getKeyStore(ResourceResolver resourceResolver) throws SlingIOException, SecurityException, KeyStoreNotInitialisedException, LoginException, org.apache.sling.api.resource.LoginException, IOException {
        KeyStore keyStore = keyStoreService.getKeyStore(null, "[service-user-name]");
        return keyStore;
    }
}

&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;


&lt;ul&gt;
&lt;li&gt;With the extracted alias and password, use the following code snippet to generate the SSL socket factory:
&lt;/li&gt;
&lt;/ul&gt;
&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;import javax.net.ssl.KeyManager;
import javax.net.ssl.KeyManagerFactory;
import javax.net.ssl.SSLContext;
import javax.net.ssl.SSLSocketFactory;
import java.security.KeyStore;
import java.security.KeyStoreException;
import java.security.NoSuchAlgorithmException;
import java.security.KeyManagementException;
import java.security.UnrecoverableKeyException;

public class SSLFactoryUtil {

    public static SSLSocketFactory setKeyStoreSSLFactories(KeyStore keyStore, String keystoreType, char[] keyStorePassword) throws KeyStoreException, NoSuchAlgorithmException, KeyManagementException, UnrecoverableKeyException {

        KeyManagerFactory keyFactory = KeyManagerFactory.getInstance(KeyManagerFactory.getDefaultAlgorithm());

        keyFactory.init(keyStore, keyStorePassword);

        KeyManager[] keyManagers = keyFactory.getKeyManagers();

        SSLContext sslContext = SSLContext.getInstance("SSL");

        sslContext.init(keyManagers, null, null);
        SSLContext.setDefault(sslContext);

        return sslContext.getSocketFactory();
    }
}

&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;


&lt;p&gt;Replace &lt;strong&gt;[your-project-name]&lt;/strong&gt; with the appropriate name for your project or module. Customize the code according to your specific requirements.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Section 4: Applying Secure HTTP Calls in AEM as a Cloud&lt;/strong&gt;&lt;br&gt;
Now that we have the necessary components, let's utilize them to establish secure HTTP calls in AEM as a Cloud. Use the following code snippet as an example:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;import [your-project-name].core.utils.PrivateKeyCertificate;
import javax.inject.Inject;
import org.apache.sling.api.SlingHttpServletRequest;
import org.apache.sling.api.SlingHttpServletResponse;
import org.apache.sling.api.resource.ResourceResolver;
import javax.net.ssl.SSLSocketFactory;
import javax.net.ssl.HttpsURLConnection;
import java.io.InputStream;
import java.net.URL;

public class YourServlet {

    @Inject
    PrivateKeyCertificate privateKeyCertificate;

    protected void doGet(SlingHttpServletRequest request, SlingHttpServletResponse response) {
        try {
            ResourceResolver resourceResolver = request.getResourceResolver();
            KeyStore keyStore = privateKeyCertificate.getKeyStore(resourceResolver);
            char[] keyStorePassword = "your_keystore_password".toCharArray(); // Replace with your keystore password
            SSLSocketFactory sslSocketFactory = SSLFactoryUtil.setKeyStoreSSLFactories(keyStore, "JKS", keyStorePassword);

            // URL of the target resource
            URL targetUrl = new URL("https://www.example.com");

            // Open HTTPS connection
            HttpsURLConnection connection = (HttpsURLConnection) targetUrl.openConnection();
            connection.setSSLSocketFactory(sslSocketFactory);

            try (InputStream is = connection.getInputStream()) {
                // Process the input stream
            }

            // Rest of your servlet code...
        } catch (Exception e) {
            // Handle exception
        }
    }
}

&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Customize the code to fit your specific requirements, including the project name, keystore password, target URL, and processing of the input stream.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Conclusion: Advancing Integrations with Enhanced Security&lt;/strong&gt;&lt;br&gt;
In this blog post, we explored a comprehensive solution for making secure third-party HTTP calls from AEM as a Cloud using certificates. By following the step-by-step instructions, AEM users can strengthen the security of their integrations, protecting sensitive data and maintaining the trust of their users. Secure integrations are vital in today's digital landscape, and by implementing this solution, organizations can confidently connect with third-party systems while ensuring data confidentiality and integrity.&lt;/p&gt;

&lt;p&gt;We hope this blog post equips you with the knowledge and tools to secure your AEM as a Cloud integrations. If you have any questions or would like to share your experiences, feel free to leave a comment below. Secure integrations await!&lt;/p&gt;

</description>
    </item>
    <item>
      <title>Dynamic Navigation in AEM using Sling Models and HTL</title>
      <dc:creator>Avi Dalal</dc:creator>
      <pubDate>Sat, 11 Mar 2023 21:38:44 +0000</pubDate>
      <link>https://dev.to/avi413/dynamic-navigation-in-aem-using-sling-models-and-htl-2794</link>
      <guid>https://dev.to/avi413/dynamic-navigation-in-aem-using-sling-models-and-htl-2794</guid>
      <description>&lt;p&gt;Navigation is an important part of any website or application, allowing users to easily navigate between pages and access the content they're interested in. However, creating and maintaining a navigation menu can be a challenging task, especially for larger websites with many pages. In this article, we'll explore how to create a dynamic navigation menu in AEM using Sling Models and HTL.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;What is Sling Models?&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Sling Models is a powerful framework for creating Java-based models that map to AEM content. With Sling Models, you can easily create POJOs (Plain Old Java Objects) that represent AEM content and expose them as adaptable services to other components and templates.&lt;/p&gt;

&lt;p&gt;Sling Models makes it easy to work with AEM content in a type-safe and efficient way, without having to deal with the complexities of the underlying JCR (Java Content Repository) API.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;What is HTL?&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;HTL (HTML Template Language) is the recommended templating language for AEM, providing a lightweight and efficient way to generate HTML output from Sling Models and other data sources. HTL is easy to learn and use, and provides a number of powerful features for creating dynamic and responsive web pages.&lt;/p&gt;

&lt;p&gt;Building a Dynamic Navigation Menu with Sling Models and HTL&lt;/p&gt;

&lt;p&gt;To build a dynamic navigation menu in AEM, we'll need to follow a few key steps:&lt;/p&gt;

&lt;p&gt;Create a Sling Model to represent the navigation data&lt;br&gt;
Build an HTL template to display the navigation menu&lt;br&gt;
Include the navigation menu in your page using the Sling Model and HTL template&lt;br&gt;
Let's take a closer look at each step in turn.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Step 1: Create a Sling Model for the Navigation Data&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;The first step in building a dynamic navigation menu is to create a Sling Model that maps to the navigation data in AEM. In this example, we'll create a NavigationModel class that retrieves the current page and its siblings, and builds a list of NavigationItem objects that represent each page in the navigation menu.&lt;/p&gt;

&lt;p&gt;Here's an example implementation of the NavigationModel class:&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;

@Model(adaptables = Resource.class)
public class NavigationModel {

    @Inject
    private PageManager pageManager;

    private List&amp;lt;NavigationItem&amp;gt; items;

    @PostConstruct
    protected void init() {
        Page currentPage = pageManager.getContainingPage(context.resource());
        if (currentPage != null) {
            items = buildNavigation(currentPage);
        }
    }

    public List&amp;lt;NavigationItem&amp;gt; getItems() {
        return items;
    }

    private List&amp;lt;NavigationItem&amp;gt; buildNavigation(Page currentPage) {
        List&amp;lt;NavigationItem&amp;gt; navigationItems = new ArrayList&amp;lt;&amp;gt;();
        Iterator&amp;lt;Page&amp;gt; siblings = currentPage.listChildren();
        while (siblings.hasNext()) {
            Page sibling = siblings.next();
            if (sibling.isVisible()) {
                navigationItems.add(new NavigationItem(sibling));
            }
        }
        return navigationItems;
    }

    public static class NavigationItem {
        private String title;
        private String url;
        private boolean isActive;
        private List&amp;lt;NavigationItem&amp;gt; children;

        public NavigationItem(Page page) {
            this.title = page.getTitle();
            this.url = page.getPath() + ".html";
            this.isActive = page.isSelf(currentPage);
            if (page.listChildren().hasNext()) {
                this.children = buildNavigation(page);
            }
        }

        // Getters for title, url, isActive, and children
    }
}



&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;

&lt;p&gt;In this code, we create a Sling Model called `NavigationModel that uses the @Model annotation to mark the class as a Sling Model. We inject a PageManager object to retrieve the current page and its siblings, and use the @PostConstruct annotation to initialize the items list with the results of the buildNavigation method.&lt;/p&gt;

&lt;p&gt;The buildNavigation method iterates over the siblings of the current page, creates a NavigationItem object for each visible sibling, and adds it to the navigationItems list. If the sibling page has children, the method recursively calls itself to build a nested navigation menu.&lt;/p&gt;

&lt;p&gt;The NavigationItem class represents a single item in the navigation menu, and includes properties for the item's title, URL, whether it is currently active, and any child navigation items.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Step 2: Build an HTL Template to Display the Navigation Menu&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;With our Sling Model in place, we can now create an HTL template that displays the navigation menu. The template will use the data-sly-use attribute to include the NavigationModel Sling Model, and will iterate over the items list to generate the HTML for each navigation item.&lt;/p&gt;

&lt;p&gt;Here's an example HTL template for the navigation menu:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fw36i06bu4aej95hco98e.jpg" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fw36i06bu4aej95hco98e.jpg" alt="Image description"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;In this code, we use the data-sly-use attribute to include the NavigationModel Sling Model, and create a navigation variable that maps to the Sling Model instance. We then use the data-sly-repeat attribute to iterate over the items list, and generate HTML for each navigation item.&lt;/p&gt;

&lt;p&gt;The data-sly-if attribute is used to check if the current navigation item has any child navigation items, and if so, generate a nested ul element for the child items.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Step 3: Include the Navigation Menu in Your Page&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;With our Sling Model and HTL template in place, we can now include the navigation menu in our page. To do this, we'll need to create a new component that includes the HTL template and exposes the NavigationModel Sling Model as an adaptable service.&lt;/p&gt;

&lt;p&gt;Here's an example implementation of the navigation component:&lt;/p&gt;

&lt;p&gt;&lt;code&gt;/apps/myproject/components/navigation&lt;br&gt;
    - navigation.html&lt;br&gt;
    - NavigationModel.java&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;In this code, we create a new AEM component called navigation under the /apps/myproject/components directory. The component includes two files: navigation.html, which contains the HTL template, and NavigationModel.java, which contains the Sling Model implementation.&lt;/p&gt;

&lt;p&gt;To include the navigation menu in a page, we can simply drag-and-drop the navigation component onto the page in AEM's edit mode. The component will render the navigation menu using the HTL template and the NavigationModel Sling ModelOnce we have added the navigation component to our page, we can preview the page to see the navigation menu in action. The menu will dynamically display the current page and its siblings, along with any child navigation items.&lt;/p&gt;

&lt;p&gt;If we need to customize the behavior or appearance of the navigation menu, we can modify the NavigationModel Sling Model or the HTL template as needed. For example, we might add support for multi-level navigation menus, or modify the HTML structure of the menu to better match our design.&lt;/p&gt;

&lt;p&gt;By using a Sling Model and an HTL template, we can create a dynamic and flexible navigation menu that is easy to customize and maintain. The Sling Model separates the logic for building the navigation menu from the presentation layer, while the HTL template provides a flexible and powerful way to generate HTML output based on the Sling Model data.&lt;/p&gt;

&lt;p&gt;Overall, this approach can help us create more maintainable and reusable components in AEM, and can simplify the process of building complex UI elements like navigation menus.&lt;/p&gt;

</description>
      <category>aem</category>
      <category>webdev</category>
      <category>javascript</category>
      <category>tutorial</category>
    </item>
  </channel>
</rss>
