Hey Learner! This blog will help you learn the process of creating a login page in Salesforce Experience Cloud. It begins with enabling Experience Cloud in the Salesforce org and setting up an Experience site. The use of a custom Aura template is recommended for flexibility. Customization options are explored within Experience Builder, and the process of creating a user for the Experience site is explained, ensuring a seamless login experience.
What is Experience Cloud?
Salesforce Experience Cloud lets you create branded digital experiences to share information and collaborate with people who are key to your business processes, such as customers, partners, or employees. Whether you call it a portal, help forum, support community, or something else, an Experience Cloud site is a great place to connect with the important folks in your life.
Salesforce Communities (Community Cloud) is a social platform from Salesforce.com that is designed to connect and facilitate communication among an organization’s employees, partners, and customers.
You can use Communities to:
○ Drive more sales by connecting your employees with your suppliers, distributors, and resellers.
○ Deliver world-class service by giving your customers one place to get answers
○ Manage social listening, content, engagement, and workflow all in one place
Different types of communities in Salesforce
Customers Communities
Partners Communities and
Employees Communities
Customers Communities
Giving your customers a community where they can discuss their issues and engage in an open and honest way with your team is perhaps the most valuable aspect of creating a customer community. A customer community can act as an essential arm of your customer and user research processes. It gives you a central location where your customers can come to you, ask questions, and receive assistance from other customers who have solved similar problems.
Employees Communities
Employee communities are a great way for companies to build camaraderie. By providing a social platform, you allow your employees to get to know others within your company and improve communication in an organic way.
Using Salesforce communities for employee communication can be a powerful way to increase interaction and engagement among your teams. It can break down walls and help to create alignment between departments through open and public communication, data sharing, and stronger information distribution.
Partners Communities
A Partner Community is a Business-to-business community that needs access to sales data such as partner relationship management. A partner community enables partners to collaborate on leads or prospects and opportunities. It helps to increase sales through resellers, distributors, agencies, and brokers. It’s a space where partners can manage their business, learn best practices, get the support they need, and connect with Salesforce employees in a secure environment.
We have been closely connected to each other through various communities and use communities in our everyday work. One of the common examples would be Facebook communities and Reddit communities.
The main difference between these and Salesforce communities is that Salesforce communities are based on business-related purposes. Customers, Employees, and Partners, all get connected based on their business requirements, it’s more like enforcing a self-service where everyone in a business helps each other by giving feedback and interacting with each other.
Requirement of Login Page
"Whenever people worldwide visit portals or online communities, they should immediately think of a login option to access exclusive content or resources. Do you know how to create these login pages in Experience Cloud? Now, when someone arrives on our page, they'll find the login option right there – the login page."
Let's dive into the process of creating a login page from scratch in Salesforce Experience Cloud.
Before going to the login page, we will see how we can create an Experience cloud in Sandbox or any Developer org.
Go to Setup by clicking the settings icon on the upper right side.
In the quick find search “Digital Experience” or “mmu”.
Click on the Settings below Digital Experience and click on the “Enable Digital Experience” checkbox to enable Experience Cloud in your sandbox or any dev org and then click on the Save button.
Now you have enabled digital experience in your org.
Again go to Settings after refreshing the page and click on the “Allow using standard external profiles for self-registration, user creation, and login” checkbox.
Now, click on All Sites to first create an Experience cloud site. Now After clicking on All Sites, click on the New button to first create an Experience site.
After clicking you will have to select a prebuilt template where each template is used for a specific business process. As we have learned all things from scratch we will choose the “Built your own (Aura)” template. (Do not click on “Build you own (LWR)” as both run on different frameworks as AURA and LWC respectively).
You will be redirected to the Build your Own(Aura) template where you can see all the template features and what customization you can do (If you want to explore more about this template, you can take a break and review the written stuff). Now click on the “Get Started” button.
Type any Name as we have written “Partner” as an example and in the URL which is optional.
It will take 2-3 minutes to set up all the customizations in the Experience site by Salesforce.
Now, Go to the Workspaces for the site that you have created and go to administration. In Settings, you will see the Activate option just click on Activate. Hurry your site is activated and you can see this site using the URL.
Go to the Developer Console of your org(sandbox or dev) and click on File>>New>>Apex Class. Put any class name(Ex; LightningLoginFormController) and put this code.
LightningLoginFormController.cls
Allows users to log in to the current site and then takes them to the startUrl. If startUrl is not a relative path, it defaults to the site's designated index page. Configure the Site not to request a username and password if it is for unauthenticated users or users logging in with a third-party authentication provider.
global class LightningLoginFormController {
@AuraEnabled
public static String login(String username, String password, String startUrl) {
try{
ApexPages.PageReference lgn = Site.login(username, password, startUrl);
aura.redirect(lgn);
return null;
}
catch (Exception ex) {
return ex.getMessage();
}
}
@AuraEnabled
public static Boolean getIsUsernamePasswordEnabled() {
Auth.AuthConfiguration authConfig = getAuthConfig();
return authConfig.getUsernamePasswordEnabled();
}
@TestVisible
private static Auth.AuthConfiguration getAuthConfig() {
Id networkId = Network.getNetworkId();
Auth.AuthConfiguration authConfig = new Auth.AuthConfiguration(networkId, '');
return authConfig;
}
}Again go to File>>New>>Lightning Component give it a name (e.g. LoginForm) and click submit. Now paste the code written below.
LoginForm.cmp
<aura:component implements="forceCommunity:availableForAllPageTypes" controller="LightningLoginFormController" access="Global">
<aura:attribute name="isUsernamePasswordEnabled" type="Boolean" access="private"/>
<aura:handler name="init" value="{!this}" action="{!c.initialize}"/>
<div class="custom-login-container">
<div class="main">
<aura:renderIf isTrue="{!v.isUsernamePasswordEnabled}">
<div id="sfdc_username_container" class="sfdc">
<span class="user-icon">
<lightning:icon iconName="utility:user" size="x-small"/>
</span>
<div class="username-password-wrapper">
<ui:inputText aura:id="username" placeholder="{!$Label.c.LOGIN_USERNAME_PLACEHOLDER}" keyup="{!c.onKeyUp}" class="input sfdc_usernameinput sfdc" labelClass="assistiveText" />
</div>
</div>
<div id="sfdc_password_container" class="sfdc">
<span class="user-icon">
<lightning:icon iconName="utility:lock" size="x-small"/>
</span>
<div class="username-password-wrapper">
<ui:inputSecret aura:id="password" placeholder="{!$Label.c.LOGIN_PASSWORD_PLACEHOLDER}" keyup="{!c.onKeyUp}" class="input sfdc_passwordinput sfdc" labelClass="assistiveText" />
</div>
</div>
<div class="sfdc-login-container">
<ui:button aura:id="submitButton" label="{!$Label.c.LOGIN_BUTTON_LABEL}" press="{!c.handleLogin}" class="sfdc_button"/>
</div>
<div id="sfdc_forgot" class="sfdc-forgot-container">
<span class="left-link"><a href="{!$Label.c.LOGIN_FORGOT_PASSWORD_URL}">{!$Label.c.FORGOT_PASSWORD_BUTTON}</a></span>
<span class="right-link"><a href="{!$Label.c.LOGIN_SANDBOX_URL}">{!$Label.c.ARE_YOU_AN_EMPLOYEE_BUTTON}</a></span>
</div>
</aura:renderIf>
</div>
</div>
</aura:component>LoginForm.css
.THIS #sfdc_username_container{
padding-top: 2px;
padding-bottom: 8px;
background-color: white;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 5px;
margin-bottom: 10px;
display: flex !important;
align-items: center !important;
}
.THIS #sfdc_password_container{
padding-top: 2px;
padding-bottom: 8px;
background-color: white;
border: 0px solid white !important;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 5px;
margin-bottom: 10px;
display: flex !important;
align-items: center !important;
}
.THIS button.sfdc_button {
width: 130%;
margin-top: 15px;
margin-bottom: 5px;
margin-left: -40px !important;
color: #fff;
background-color: #2CBC6F !important;
border-color: #357ebd;
display: inline-block;
text-align: center;
vertical-align: middle;
background-image: none;
border: 1px solid transparent;
white-space: nowrap;
padding: 10px 12px;
font-size: 16px;
font-family: 'Open Sans', sans-serif;
font-weight: 300;
line-height: 1.42857143;
border-radius: 2px;
}
.THIS button:hover {
background-color: #28d177 !important;
border-color: #285e8e;
cursor: pointer;
}
.THIS input {
margin-bottom: 1px !important;
margin-left: 1px !important;
border: 0px solid transparent;
border-color: white !important;
width: 130% !important;
font-size: 18px;
}
.THIS span a {
color: white;
text-decoration: none;
}
.THIS span a:hover {
color: white;
text-decoration: none;
}
.THIS div.sfdc {
width: 130% !important;
max-width: 500px !important;
margin-bottom: 5px !important;
margin-left: -40px !important;
margin: 0 auto;
}
.THIS #sfdc_forgot {
width: 130% !important;
margin-left: -40px !important;
display: flex !important;
justify-content: space-between !important;
}
.THIS #sfdc_forgot .left-link {
flex: 1 !important;
text-align: left !important;
}
.THIS #sfdc_forgot .right-link {
flex: 1 !important;
text-align: right !important;
}
.THIS .user-icon {
padding: 5px !important;
margin-right: 1px !important;
}
.THIS .username-password-wrapper {
margin-top: 4px;
}
.THIS .main {
padding-top: 90px !important;
}LoginFormController.js
({
initialize: function(component, event, helper) {
component.set('v.isUsernamePasswordEnabled', helper.getIsUsernamePasswordEnabled(component, event, helper));
},
handleLogin: function (component, event, helpler) {
helpler.handleLogin(component, event, helpler);
},
})LoginFormHelper.js
({
handleLogin: function (component, event, helpler) {
let username = component.find("username").get("v.value");
let password = component.find("password").get("v.value");
let action = component.get("c.login");
let startUrl = component.get("v.startUrl");
startUrl = decodeURIComponent(startUrl);
action.setParams({ username: username, password: password, startUrl: startUrl });
action.setCallback(this, function (response) {
let state = response.getState();
if (state === "SUCCESS") {
let rtnValue = response.getReturnValue();
if (rtnValue != null) {
alert(rtnValue);
}
} else if (state === "ERROR") {
let errors = response.getError();
if (errors) {
alert(errors);
}
}
});
$A.enqueueAction(action);
},
getIsUsernamePasswordEnabled : function (component, event, helpler) {
let action = component.get("c.getIsUsernamePasswordEnabled");
action.setCallback(this, function(a){
component.set('v.isUsernamePasswordEnabled', true);
});
$A.enqueueAction(action);
}
})LoginForm.cmp-meta.xml
<?xml version="1.0" encoding="UTF-8"?>
<AuraDefinitionBundle xmlns="http://soap.sforce.com/2006/04/metadata">
<apiVersion>58.0</apiVersion>
<description>Sample Component for loginForm</description>
</AuraDefinitionBundle>Now go to the builder which is actually “Experience Builder” just like “Lightning App Builder” which we use in the sales cloud. Click on “Home” and then click on “Login”. After clicking on login you will be redirected to the login Page. Here the login components we are seeing are basically standard Salesforce components. The major drawback of standard components given by Salesforce is that we can not customize all the components according to our business requirements. So here we will drag and Drop our custom Aura component by going to the thunder icon but before that, we will remove all the components from the login page by clicking on the delete button when we click on any component.
Now click on Workspaces>>Administration>>Members and then add Partner Community User from “Available Profiles” to “Selected Profiles”.
Now go to Setup>>Profiles>>Partner Community User and click on Partner Community User(Not on Edit or Clone) click on “Enable Apex Classes Access” click on the edit button and add the “LightningLoginFormController” class and save it.
Now go to Experience Builder>>Settings>>General and click on Partner Profile link and click on “Enable Apex Class Access” and do the same above mentioned.
Now if you want to create a user for the Experience Cloud site, First go to the Account and click on New to create a new Account.
Now create a related Contact for that Account by clicking on the New Button and clicking on Enable as Partner(Account) and Enable Partner User(Contact). After Enabling a partner user you will be redirected to the User Menu where you will have to assign a profile(Partner Community) and create a user by filling in all the required fields. (Always assign a role to you(not the user) before creating an experience cloud user).
After that, the user will receive a mail to reset the password in the mail you have filled in when creating the user. Now the user will get access to the Experience site by clicking on the URL in any tab and filling in the username and password field.
Conclusion
By using the Custom login component, we can modify and customize everything on the login page as per the business requirements. This customization significantly enhances the usability and functionality of Login Pages, providing a more seamless user experience.
This can be achieved using LWC as well with better UI. You can refer to this blog for the same, EXPERIENCE CLOUD SITE LOGIN PAGE DEVELOPMENT FROM SCRATCH USING LWC
If you'd like to see the code and resources used in this project, you can access the repository on GitHub.To access the AVENOIRBLOGS repository, click here. Feel free to explore the code and use it as a reference for your own projects.
Happy Coding! You can leave a comment to help me understand how the blog helped you. If you need further assistance, please contact us. You can click "Reach Us" on the website and share the issue with me.
Reference
Blog Credit:
M. Gupta
Salesforce Developer
Avenoir Technologies Pvt. Ltd.
Reach us: team@avenoir.ai
Are you in need of Salesforce Developers?
👍