In the last section, we required a connected app and authentication from Salesforce to render the Lightning Component. Authentication is needed if you want the application to securely fetch data from Salesforce using the user credentials.
However, let's say you want a non-secure component to be hosted on your site. An example could be a simple web to read from or a contact information collection form, and you do not want your users to log in.
For this scenario, the Lightning Out application will implement a special interface named ltng:allowGuestAccess and you will also need to create a Salesforce community that is published for the public.
Let's take a step-by-step walkthrough of how to take components outside Salesforce for unauthenticated users:
- Create a Lightning Out dependency app that implements ltng:allowGuestAccess. The simple code modification to our YouTube Lightning Out application will be as follows. The name of the app is youtubesearchOutApp:
<aura:application access="GLOBAL" extends="ltng:outApp" implements="ltng:allowGuestAccess">
<aura:dependency resource="youtubesearch"/>
</aura:application>
- Create a Salesforce community, as shown, by going to Setup | Communities | All Communities | New Community. Choose the Customer Service template, as shown here:
- Make the community accessible by the public, as shown in the following screenshot, using the General settings. Notice the Public Access checkbox:
- Publish the community using the Publish button on the extreme right. Note down the community domain and the URL from the Setup menu, as shown in the following screenshot. For example, in our case, the community URL is https://sandbox-testcomm-developer-edition.cs92.force.com:
- Modify the previous Node application index.html to use the new community URL, as shown in the following code. Notice that we don't need all the webpack setup and JS bundler anymore as we no longer need to do OAuth and the application will render without asking for the credentials:
<!DOCTYPE html>
<html>
<body>
<h1>Lightning Out Youtube Search Component Demo</h1>
<script src="https://<yourCommunityDomain/communityURL>/Lightning/Lightning.out.js"></script>
<!--<script src="app.bundle.js/app.bundle.js"></script>-->
<div id="youtubeApp" />
</body>
<script >
$Lightning.use("c:youtubesearchOutApp", function() {
$Lightning.createComponent("c:youtubesearch", {},
"youtubeApp",
function(cmp) {
// do some stuff
});
},"<communityURL>/");
</script>
</html>
- Note that you will need a CORS for the Heroku URL, as shown in the following screenshot:
I have created a public website with the YouTube search component, which will allow you to play with the application without authentication at https://afternoon-mesa-67389.herokuapp.com/.