This is a simple reference implementation of Salesforce Embedded Log In, which leverages Salesforce Identity for Customers & Partners (our CIAM) to allow customers to delegate the rote but difficult work of secure authentication and user data storage / retrieval in pursuit of a 360 degree view of their customer.
You can check out the official reference implementation (written in PHP) here. You'll also want to refer to the Salesforce External Identity Implementation Guide to set up this org or complete the Identity for Customers Trailhead module.
This off-shoot and argulably more fancy example, if and when it ever works, has been built with Node, Express, and EJS.
Because I'm going to be using this for demos of the tech to customers, I've done one other little thing that'll be handy for the Solution Engineers at Salesforce. Rather than rely on a bunch of front-end code to represent the target integrated website, I've built a little bit of demo magic: the app takes a screenshot URL and uses that as the backdrop of the UX. This makes setting up a real implementation that is also quite convincing super easy.
You will need:
- A Heroku account
- A Salesforce developer org with a Connected App and Lightning Community set up for Embedded Login
- A little bit of imagination
Follow the instructions here for setting up a connected app. When configuring your connected app, be sure to use the URL https://<yourherokuapp>.herokuapp.com/server_callback for the call back.
There are also three critical additional customizations you need to make:
- Make sure your custom profile for the external user has API access enabled.
- Add a custom attribute to the profile for the contact associated with the user record using the attribute name
ContactID. - In this specific example, the code assumes there are three custom objects associated with the Contact: Wishes (Wish__c), Searches (Searches__c), and the external object Bookings (Bookings__x, referencing a field called
CustomerIdon the Contact). Your profile will need read for all of these.
Once you've done that, you'll need to define a set of environment variables in your Heroku app:
- The Consumer Key for your Salesforce Connected App is set as the environment variable
APP_ID - The Connected App Consumer Secret is set as the environment variable
APP_SECRET - The environment variable
COMMUNITY_URLwith... well, you can probably guess. Don't include the /s/. OAUTH_CALLBACK_URLis your Heroku app's fully-qualified callback URL. Just change the base URL.HOSTED_APP_URL_PRODis your Heroku app's base URL without a trailing slash.BG_FAKEis replaced with a picture of your chosen existing website for the background.
You'll also need to take the sfdc_authmagic.js file and upload it as public static content to your Salesforce org. The fully-qualified URL should be then filled into the final environment STATIC_ASSET_URL. This is a temporary measure until a prod bug is fixed.
You can modify the template code in index.ejs and profile.ejs to tweak things as desired.
Both the back-end route handler for profile and the front end template profile.ejs have been customized for my first specific demo, but you can easily replace this code to pull whatever contact-related data you want from Salesforce for the load of the profile. The back-end code uses jsforce (though with the way I'm using it, it should be called bruteforce.)
Just make sure your user profile has read-write to the appropriate related records, and if you're using an External Object, like I am, make sure each field is accessible to the External user. ;)
- Fix logout
- Refactor to remove bespoke Embedded Login js file once the prod issue is patched
- Add session management or cooking on the server side to allow more than one person to demo at a time, haha.
Big thanks to Ben Richards for teaching me that good builds can do more than decks ever could, and Salesforce Identity guru Chuck Mortimore for helping with the prod issues.