Headless Identity Implementation Guide
jHeadless Registration JavaScript Examples
Use these high-level examples to understand how to implement headless registration for
a single-page app.
Authorization Request
The authorization request for headless registration
is similar to the request for headless login, but instead of passing the username and password
in the header, you pass in the request identifier and OTP. The request also contains a few
additional headers that aren’t required for headless login. Here’s an
example.
1// Make a POST Request to Authorize
2 client = new XMLHttpRequest();
3 client.open("POST", expDomain + authorizationURI, true);
4 client.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
5
6 //Headers for registration variation of the Code and Credentials flow
7 client.setRequestHeader("Auth-Request-Type", "user-registration");
8 client.setRequestHeader("Auth-Verification-Type", verificationMethod);
9 //Request identifier is returned from the /init/registration endpoint, and requestCredential is the OTP sent in the email or SMS.
10 client.setRequestHeader("Authorization", "Basic " + btoa(requestIdentifier + ':' + requestCredential));
11
12 //Request Body
13 requestBody = "response_type=code_credentials&client_id=" + clientId + "&redirect_uri=" + callbackURL;
14
15 // Add State
16 if (state != null) {
17 requestBody = requestBody + '&state=' + storeState(state);
18 }
19
20 // Add Scopes
21 if (scopes != null) {
22 requestBody = requestBody + '&scope=' + scopes;
23 }
24
25 // PKCE Enabled
26 requestBody = requestBody + "&code_challenge=" + generateCodeChallenge();
27
28 // Send the Authorization Request
29 client.send(requestBody);
30
31 // Handle the Authorization Response
32 client.onreadystatechange = function() {
33 if(this.readyState == 4) {
34 if (this.status == 200) {
35 //Auth Code has been returned, perform token exchange
36 tokenExchange(JSON.parse(client.response), null, authorizeType, uniqueVisitorId);
37 } else {
38 onError("An Error Occured during Authorize", client.response);
39 }
40 }
41 }Salesforce validates the request identifier and OTP and registers the user by calling the headless registration handler. When the user is created, Salesforce returns an authorization code response. You use a callback endpoint to extract the code and other parameters and return them to your app.
Token Exchange
When your app receives the authorization code, it exchanges the code for an access token. This part of the flow is identical to the token exchange in headless login.
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 }The result is an access token that you can use to request user information and establish the user’s session.