Configure External Client App Access

To configure access to your canvas app, configure the policies and profiles for the corresponding external client app.

This task assumes that you completed the steps at Use an External Client App.

Note

In Lightning Experience, from Setup, enter External Client Apps in the Quick Find box, then select External Client App Manager.
In the External Client App list, click Edit Policies in the dropdown menu next to the Hello World app.
In the App Policies section, select the System Administrator profile from the Available Profiles list and move the selection to the Selected Profiles list. Repeat this step for the profiles you want to select.

In this example, we assume that your profile is System Administrator.
In the OAuth Policies section, click the Permitted Users dropdown menu and select Admin approved users are pre-authorized. Click OK on the pop-up message that appears.

We select Admin approved users are pre-authorized so users don’t see the canvas app until we give them permission. If we select All users can self-authorize, all users in the org can authorize the app after they sign in. Save your settings.
From Setup, enter Canvas App Previewer in the Quick Find box, then select Canvas App Previewer. You can use the Canvas App Previewer to test your canvas app before you publish it.
From the Canvas App Previewer list, click Hello World.

The app launches, and the message Hello User.FullName appears. The canvas app works in this context because when you click the app name in the message previewer, the signed request is sent to the endpoint https://localhost:8443/examples/hello-world/index.jsp.

After you configure access, make your canvas app available in a Lightning component. You can add the component to a Lightning record page so permitted users can use it there.

Embed the canvas app in a Lightning component.

Open the Developer Console.
Click File | New | Lightning Component.
Enter myCanvasApp in the Name field.

Copy and paste this code.

1<!-- myCanvasApp.cmp -->
2<aura:component implements="flexipage:availableForRecordHome,force:hasRecordId" access="global" >
3    <aura:attribute name="canvasParameters" type="string" />
4    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
5
6
7    <aura:if isTrue="{!v.canvasParameters}">
8        <force:canvasApp developerName="Hello_World" 
9            height="400px" width="750px"
10            parameters="{!v.canvasParameters}"/>
11    </aura:if>
12</aura:component>

To verify the developerName value of your canvas app, in Setup, go to External Client App Manager and click on your app name. Then click the Settings tab and verify the API Name.

In the controller file, copy and paste this code.

1({
2    doInit : function(cmp, evt, helper) {
3        var recordId = cmp.get("v.recordId");
4        cmp.set("v.canvasParameters", JSON.stringify({
5            recordId: recordId
6        }));
7    }
8})

Save your changes.

Display the Lightning component on a record.
1. Navigate to the record page you want to customize, for example, a contact record page.
2. Click the gear icon and select Edit Page.
3. Find the myCanvasApp custom component and drag it to where you want it on the Lightning page. Save your changes.
4. Activate the page. Click Assign as Org Default, and then click Next.

Users with the profiles you selected in the App Policies section can now view and use the canvas app on contact record pages.

See Also

Lightning Component Code Examples