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:
Follow the instructions here for setting up a connected app. Make sure that you also select the 'Access and manage your data (api)' OAuth scope since we will be querying user data from the org. When configuring your connected app, use the URL
https://<yourherokuapp>.herokuapp.com/server_callback for the call back.
There are also four critical additional customizations you need to make:
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:
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
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. ;)
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.