I was going through the Hybris 6.3 version and trying to understand the new feature and suddenly it struck me, why Hybris is not using the bootstrap framework for UI which is much easier to implement. So, I started exploring how the Hybris storefront can use bootstrap without any issue since bootstrap is just Javascript and CSS. When we have an existing storefront up and running, I figured out building a parallel web application to the storefront and implementing bootstrap in that would be a workable solution.

Below are the steps I followed to create a new web application alongside existing storefront with bootstrap UI using Hybris security and the same login feature used for all cockpits and HMC. Please note that I did this on Hybris 6.3 version and you may have different configuration settings for earlier versions.

Step 1: Create the “yempty” extension

The yempty extension is basically an empty extension with minimal implementations of the following extension modules[1]: For our current example, we are going to use only the “web” Module only.

core

hmc

web

Steps:

Open a command prompt Navigate to the <HYBRIS_BIN_DIR> /platform directory Run the <HYBRIS_BIN_DIR> /platform/setantenv.bat or . ./setantenv.sh file. Don’t close the command prompt as the settings are transient and are lost if the command prompt is closed Run “ant extgen” in <HYBRIS_BIN_DIR>/platform directory. This internally runs ant in the Extgen directory Extgen prompts you to specify values for the technical aspects of an extension. Extgen comes with default values for all these technical aspects. These default values are defined in the project.properties file in the extgen directory. The default value is displayed in brackets ([ and ]), such as: Press [Enter] to use the default value [training] You can simply use the default value by pressing Enter

Provide the values as prompted by Extgen

The extension’s name

The extension’s Java package

The extension template to use

Upon precisely giving the values, Extgen:

Copies the extension template to a temporary directory

Modifies the extension template to reflect the specified values

Copies the new extension from the temporary directory to the directory specified by the extgen.extension.path property in the project.properties file

After the copy process is completed, the extension is ready to be referenced in the localextensions.xml.

Step 2: Add the js and css for bootstrap

Download latest bootstrap js and css http://getbootstrap.com/getting-started/#download

Copy the js and css to static folder as shown below

Step 3: update the “training-spring-security-config.xml”

Please copy paste the below piece of code or if you already have then update accordingly

Click to Copy <?xml version=”1.0″ encoding=”UTF-8″?>

<!–

[y] hybris PlatformCopyright (c) 2017 SAP SE or an SAP affiliate company. All rights reserved.This software is the confidential and proprietary information of SAP

(“Confidential Information”). You shall not disclose such Confidential

Information and shall use it only in accordance with the terms of the

license agreement you entered into with SAP.

–>

<beans xmlns=”http://www.springframework.org/schema/beans”

xmlns:security=”http://www.springframework.org/schema/security”

xmlns:xsi=”http://www.w3.org/2001/XMLSchema-instance” xmlns:aop=”http://www.springframework.org/schema/aop”

xmlns:util=”http://www.springframework.org/schema/util”

xsi:schemaLocation=”http://www.springframework.org/schema/beans

http://www.springframework.org/schema/beans/spring-beans.xsd

http://www.springframework.org/schema/security

http://www.springframework.org/schema/security/spring-security.xsd

http://www.springframework.org/schema/util

http://www.springframework.org/schema/util/spring-util.xsd

http://www.springframework.org/schema/aop

http://www.springframework.org/schema/aop/spring-aop.xsd”

default-autowire=”byName”><security:http pattern=”/error.jsp” security=”none” />

<security:http pattern=”/404.jsp” security=”none” />

<security:http pattern=”/static/” security=”none” /><security:http use-expressions=”false” disable-url-rewriting=”false”>

<security:session-management session-authentication-strategy-ref=”fixation” />

<security:anonymous key=”anonymous” username=”anonymousUser” granted-authority=”ROLE_ANONYMOUS” />

<security:intercept-url pattern=”/j_spring_security_check” access=”IS_AUTHENTICATED_ANONYMOUSLY” requires-channel=”https” />

<security:intercept-url pattern=”/login.jsp” access=”IS_AUTHENTICATED_ANONYMOUSLY” requires-channel=”https” />

<security:intercept-url pattern=”/com” access=”IS_AUTHENTICATED_REMEMBERED” requires-channel=”https” />

<security:remember-me services-ref=”rememberMeServices” key=”adminweb”/>

<security:logout logout-success-url=”/login.jsp” logout-url=”/j_spring_security_logout”/>

<security:form-login

always-use-default-target=”false”

login-page=”/login.jsp”

username-parameter=”j_username”

password-parameter=”j_password”

login-processing-url=”/j_spring_security_check”

authentication-failure-url=”/login.jsp?login_error=1″

authentication-success-handler-ref=”authenticationSuccessHandler”/> — > Please provide you authentication success Handler here

<security:port-mappings><security:port-mapping http=”#{configurationService.configuration.getProperty(‘tomcat.http.port’)}”

https=”#{configurationService.configuration.getProperty(‘tomcat.ssl.port’)}”/>

<security:port-mapping http=”80″ https=”443″/>

</security:port-mappings>

<security:access-denied-handler error-page=”/login.jsp”/>

<security:csrf disabled=”true”/>

<security:headers disabled=”true”>

<security:frame-options disabled=”true”/>

</security:headers>

</security:http><bean id=”authenticationSuccessHandler”

class=”class reference authentication success Handler here” /> <bean id=”fixation” class=”de.hybris.platform.servicelayer.security.spring.HybrisSessionFixationProtectionStrategy” /> <security:authentication-manager alias=”rememberMeAuthenticationManager”>

<security:authentication-provider ref=”coreAuthenticationProvider” />

</security:authentication-manager> <bean id=”rememberMeServices” class=”de.hybris.platform.spring.security.CoreRememberMeService”>

<property name=”key” value=”cockpit” />

<property name=”cookieName” value=”LoginToken” />

<!– avoiding hard reference to tenant-scoped ‘coreUserDetailsService’ –>

<lookup-method name=”lookupUserDetailsService” bean=”coreUserDetailsService” />

</bean> <!– Below piece of code define to whom you allow to login , below say only Employee–>

<alias name=”defaultCorePreAuthenticationChecks” alias=”corePreAuthenticationChecks”/>

<bean id=”defaultCorePreAuthenticationChecks” class=”de.hybris.platform.spring.security.RejectUserPreAuthenticationChecks”>

<property name=”allowedUserGroups”>

<list>

<value>Admingroup</value>

<value>Employeegroup</value>

</list>

</property>

<property name=”allowedUserTypes”>

<list>

<value>Employee</value>

</list>

</property>

</bean> <bean id=”coreAuthenticationProvider” class=”de.hybris.platform.spring.security.CoreAuthenticationProvider”>

<property name=”preAuthenticationChecks” ref=”corePreAuthenticationChecks” />

<property name=”userDetailsService” ref=”coreUserDetailsService” />

</bean> <bean id=”coreUserDetailsService” class=”de.hybris.platform.spring.security.CoreUserDetailsService”/> </beans>

Step 4: update the web.xml

Step 5: Clean, compile and start the server

ant clean all

./hybrisserver.sh or hybrisserver.bat to start the server

Now use https://localhost:9002/<extensionname> to get the login page