Salesforce Developer Learning

Lightning Out:

Lightning Components on external websites – Lightning Out

Steps to follow the Lightning components to display in your local host by using Lightning out, without logging into sales force.

Step 1:

Create below Lightning application in your Salesforce instance and name it as TestApp

<aura:application access="Global" extends="ltng:outApp">

<aura:dependency resource="c:Currencyconvert"/>

</aura:application>

Here Currencyconvert is Lightning component, you can use any component that you have in your instance.

Step 2:

Now NodeJs and OpenSSL you must install in your pc, see below

Download and install nodejs application latest version from the following URL.

https://nodejs.org/en/

Set nodejs path in your system Environment variables.

Copy & Paste the path from program files where nodejs is installed.

Test nodejs application is installed correctly or not!

Open your command prompt -> type Node

It will take your inputs and executes, like show below

Use twice Cntrl+C to exit.

Download & install OpenSSL from the following URL.

https://slproweb.com/products/Win32OpenSSL.html

Even If you have 64-bit operating system also, still the above link Win32OpenSSL works.

After installation it will create one folder in C drive, then add the path of the bin folder in your environment variables.

Test now, open command prompt and they OpenSSL, It should jump to OpenSSL like shown below.

Cntrl+C – to exit

Step 3:-

Create connected app and Auth. Provider in your salesforce instance.

Connected App:-

To create Connected App in “service provider Salesforce instance”, Navigate to “Setup | Build | Create | Apps | Connected Apps” and click on New.

Provide All information except “Callback URL”(use some dummy url bcz it’s required). We will come back again on this step later to provide Callback URL.

See the below screen shot for reference.

Once you save this Connected app, it will provide “Consumer Key” and “Consumer Secret”, we need this information in next step.

Create Authorization Provider:-

Create Authorization Provider in “Authentication provider Salesforce instance”.

Navigate to “Setup | Administer | Security Controls | Auth. Providers | Create New”.

Select “Salesforce” as provider Type.

We need to provide “Consumer Key” and “Consumer Secret” created in previous step.

Authorize Endpoint URL should be something like

“https://AuthenticationProviderinstance/services/oauth2/authorize”

And Token Endpoint URL “https://AuthenticationProviderinstance/services/oauth2/token“.

Click on “Automatically create a registration handler template”, it will generate one apex class. Then Select User who should be used to execute this Apex class when user tries to login.

Once you save “Auth. Provider” in previous step, it will provide you list of URL as shown in above image. Copy Callback URL and edit Connected App we just created and set this URL.

Update Auto generated Registration Handler Apex class

Replace content of Apex class by below code,

global class AutocreatedRegHandler1525398009718 implements Auth.RegistrationHandler{
    class RegHandlerException extends Exception {}
    global User createUser(Id portalId, Auth.UserData data){
        try{
            User u = [SELECT ID FROM User Where Other_Salesforce_Org_Username__c = : data.username];
            return u;
        } catch (Exception e){
            throw new RegHandlerException('Cannot find this user. For help, contact your administrator.');
        }
    }

    global void updateUser(Id userId, Id portalId, Auth.UserData data){

    }
}

Note: Create required fields used in above class.

Add Salesforce button on Login Page

Note: Auth. Provider we are using for to create OpenSSL certificate.

Step 4:

Create Salesforce CORS in your salesforce instance with URL: https://localhost:8081

Setup | Security controls| CORS

Step 5:

Download source code from github repository from the following blog.

https://github.com/JitendraZaa/Lightning-Out-Demo

Modify the html code that you have downloaded from the above URL.

Goto Viewsà Main.html à Open in your notepad

Just modify the following content

(Provide your org URL in above line)

var appName = "c:TestApp"; (Lightning app that you have created in first step)

$Lightning.createComponent("c: Currencyconvert", {type: type, subjectId: subjectId}, "lexcontainer");

(Use your component in above line)

Goto Clientà Js àOAuth.Js à Open in your notepad

clientId = ‘provide your consumer key here’,

loginUrl = 'https://login.salesforce.com/',

redirectURI = "http://localhost:8080/oauthcallback.html",

proxyURL = 'http://localhost:8080/proxy/' ;

Create Main.js file in the above Js folder which is missing

getLoggedUserInfo();

addAPICount();

var $apiEle = $("apiCount");

function getLoggedUserInfo()

{

var url = $.cookie("idURL");

client.ajex(url,

function(data){

$("#loggedInUser").html(data.display_name);

function (error){

console.log(error);

'GET',

'',

true

);

}

function addAPICount()

{

if(!$apiCount)

{

$apiEle = $("apiCount");

}

$apiEle.text(parseInt($apiEle.text())+1);

}

You don’t need to modify any other files in that folder, if you wish to modify any UI context, you can modify Index.html file in Views folder.

Step 6:

Download openssl.exe:-

Just download the file from the following URL, and paste it into the Lightning out folder. It will avoid the “No_Oauth_State: State was not sent back” error. (No need to install it)

http://originaldll.com/file/openssl.exe/32113.html