Headless Identity Implementation Guide
jBuilding a Native Single Sign-On Experience JavaScript Examples
Use these high-level examples to understand how to create a native single sign-on (SSO)
experience for a single-page app. This configuration uses a redirect-based flow to make it seem
like your app natively integrates with an SSO provider. It isn’t technically headless, but the
user experience is the same as the headless flows.
Constructing an Authorization URL
A key part of this configuration is the sso-provider parameter. You use this parameter to identify the SSO provider configured in Salesforce, whether it’s an authentication provider or a SAML identity provider. During the redirect-based flow, Salesforce checks for this parameter and redirects to the SSO provider so the user can log in.
To use the sso-provider parameter with a redirect-based flow, you must first construct an authorization URL. This example constructs the URL and redirects the browser to the Experience Cloud site.
1//Setup the Authorization URL
2 redirectURL = expDomain + _authorizationURI;
3
4 //Add Params to the Authorization URL
5 redirectURL = redirectURL + '?client_id=' + _this.clientId;
6 redirectURL = redirectURL + '&redirect_uri=' + _this.ssoCallbackURL;
7 redirectURL = redirectURL + '&state=' + storeState(state);
8 redirectURL = redirectURL + '&response_type=code';
9
10 //Specificy the SSO Provider
11 redirectURL = redirectURL + '&sso_provider=' + ssoProviderDevName;
12
13 //Add Scopes
14 if (scopes!= null) {
15 redirectURL = redirectURL + '&scopes=' + scopes;
16 }
17
18 //Add Code Challenge
19 requestBody = requestBody + "&code_challenge=" + generateCodeChallenge();
20
21 //Redirect the Browser
22 window.location.href = redirectURL;Token Exchange
The app must process the redirect to get the authorization code.
1// Get URL Params from the callback URL
2 queryString = window.location.search;
3 urlParams = new URLSearchParams(queryString);
4 console.log('Loading Callback Params: ' + urlParams);
5
6 //Create the Code Response from the URL params
7 codeResponse = new Object;
8 codeResponse.code = urlParams.get('code');
9 codeResponse.state = urlParams.get('state');
10 codeResponse.sfdc_community_url = urlParams.get('sfdc_community_url');
11
12 // Call the common token exhcange method.
13 tokenExchange(codeResponse, getCodeChallenge(), authorizationType.SSOLogin, null);In the last line, this example calls a token exchange function. Here’s an example of this function.
1function tokenExchange(response, codeChallenge, authorizeType, uniqueVisitorId) {
2 // Get Values from Code Response
3 code = response.code;
4 stateIdentifier = response.state;
5 baseURL = response.sfdc_community_url;
6
7 state = null;
8 // validate state if it was present
9 if (stateIdentifier != null) {
10 state = getState(stateIdentifier, true);
11 if (state == null) {
12 onError("A state param was sent back but no state was found");
13 return;
14 }
15 }
16
17 // Create Client
18 client = new XMLHttpRequest();
19 client.open("POST", expDomain + tokenURI, true);
20 client.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
21
22 // Build Request Body
23 requestBody = "code=" + code + "&grant_type=authorization_code&client_id=" + _this.clientId + "&redirect_uri=" + _this.callbackURL;
24
25 // Add PKCE
26 requestBody = requestBody + "&code_verifier=" + generateCodeVerifier();
27
28 // Send Request
29 client.send(requestBody);
30 client.onreadystatechange = function() {
31 if(this.readyState == 4) {
32 if (this.status == 200) {
33 //Access Tokens have been returned
34 console.log("Code and Credntial Flow, token response: ");
35 console.log(JSON.parse(client.response));
36 } else {
37 onError("An error occured during token exchange for " + authorizeType, client.response)
38 }
39 }
40 }
41 }