API de identidad desatendida: Flujo Código de autorización y credenciales para clientes públicos

Un componente clave de este flujo es el código JavaScript del lado del cliente que envía la solicitud de autorización, realiza el intercambio de códigos y procesa el token de acceso. Este es un ejemplo de JavaScript que utiliza una aplicación conectada.

var clientId = "<Connected App Client ID>";
var baseURL = "<Experience Cloud Domain>";
var redirectURL = "<Experience Cloud Domain>/services/apexrest/code/extraction"
      
// Performs the code exchange
function doCodeExchange(authorizeResponse) {
   //Perform Code Exchange
   //Get Access Token
   var client = new XMLHttpRequest();
   client.open("POST", authorizeResponse.sfdc_community_url + "/services/oauth2/token", true);
   client.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
   client.send("code=" + authorizeResponse.code + "&grant_type=authorization_code&client_id=" + clientId + "&redirect_uri=" + redirectURL);
   client.onreadystatechange = function() {
       if(this.readyState == 3) {
           response = JSON.parse(client.response);
           getUserInfo(response.access_token, response.sfdc_community_url)
       }
   }
}

// Gets User Info
function getUserInfo(accessToken, userInfoBaseURL) {
   var client = new XMLHttpRequest();
   client.open("GET", userInfoBaseURL + "/services/oauth2/userinfo", true);
   client.setRequestHeader("Content-Type", "application/json");
   client.setRequestHeader("Authorization", "Bearer " + accessToken);
   client.send();
   client.onreadystatechange = function() {
       if(this.readyState == 3) {
           response = JSON.parse(client.response);
           response.access_token = accessToken;
           document.getElementById("json").textContent = JSON.stringify(response, undefined, 2);
           document.getElementById("results").style.display="block";
       }
   }
}

//Starts the Login Process
function startLogin() {
   var username = document.getElementById('user_name').value;
   var password = document.getElementById('password').value;
  
   var encodedUNP = btoa(username + ':' + password);
   var client = new XMLHttpRequest();
  
   client.open("POST", baseURL + "/services/oauth2/authorize", true);
   client.setRequestHeader("Auth-Request-Type", "Named-User");
   client.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
   client.setRequestHeader("Authorization", "Basic " + encodedUNP);
   client.send("response_type=code_credentials&client_id=" + clientId + "&redirect_uri=" + redirectURL);
   client.onreadystatechange = function() {
       if(this.readyState == 3) {
           response = JSON.parse(client.response);
           doCodeExchange(response);
       }
   }
   return false;
}    

Otro componente clave es el controlador de devolución de llamada del lado del servidor que extrae el código desde el redireccionamiento 302 y lo devuelve a la aplicación. En este ejemplo, el gestor es una clase de Apex expuesta como un extremo de REST público y está activado Uso compartido de recursos de origen cruzado (CORS) para ofrecer protección de secuencias de comandos de sitio cruzadas. Para simplificar el desarrollo, utilice el extremo de eco de OAuth 2.0 para obtener el código de autorización.

@RestResource(urlMapping='/code/extraction')
global class CodeExtractorAPI {
  
   @HttpGet
   global static CodeResponse doGet() {
       RestRequest req = RestContext.request;
       RestResponse res = RestContext.response;
       try {
           res.statusCode = 200;
           return new CodeResponse(req.params.get('code'), req.params.get('sfdc_community_url'), req.params.get('sfdc_community_id'), req.params.get('state'));
       } catch (Exception e) {
           res.statusCode = 500;
           return new CodeResponse('Could not parse auth code redirect URI');
       }
      
   }
  
   // Response Wrapper
   global class CodeResponse {
       String code;
       String sfdc_community_url;
       String sfdc_community_id;
       String state;
       Boolean success;
       String errMsg;
      
       public CodeResponse(String code, String sfdc_community_url, String sfdc_community_id, String state) {
           this.code = code;
           this.sfdc_community_url = sfdc_community_url;
           this.sfdc_community_id = sfdc_community_id;
           this.state = state;
           this.success = true;
       }
      
        public CodeResponse(String errMsg) {
           this.success = false;
           this.errMsg = this.errMsg;
       }       
   }
}

El usuario final abre la aplicación externa e inicia sesión

Su usuario abre su aplicación externa para iniciar sesión. En su aplicación, su formulario de inicio de sesión aparece mostrando campos de nombre de usuario y contraseña y un botón de inicio de sesión. Salesforce no proporciona este formulario de inicio de sesión. Su aspecto y comportamiento dependen de usted. Su usuario ingresa su nombre de usuario y contraseña y hace clic en el botón de inicio de sesión.

La aplicación externa genera valores de code_verifier y code_challenge (opcional)

Si está utilizando la extensión Proof Key for Code Exchange (PKCE), la aplicación genera valores utilizados para verificar el código de autorización.

Su flujo incluye este paso solo si está utilizando la extensión Proof Key for Code Exchange (PKCE). Como mejor práctica de seguridad, recomendamos encarecidamente el uso de la extensión PKCE cuando implemente el flujo Código de autorización y credenciales, especialmente para aplicaciones de una sola página. Para obtener más información sobre PKCE, consulte la especificación RFC 7636: Clave de prueba para el intercambio de códigos por clientes públicos de OAuth proporcionado por Internet Engineering Task Force (IETF).

La especificación de la extensión PKCE definida en RFC 7636 también incluye un parámetro code_challenge_method opcional que puede enviar en la solicitud de autorización. Salesforce no tendrá en cuenta cualquier valor que se envíe en este parámetro, y establecerá SHA256 de forma predeterminada.

La aplicación externa realiza una solicitud desatendida de un código de autorización

Desde el navegador, su aplicación personalizada, a través de JavaScript, envía una código solicitud de autorización desatendida al extremo de autorización de la API de inicio de sesión desatendido de Salesforce. Si no está utilizando la detección de usuarios desatendida, utilice el método GET o POST para esta solicitud. Si está utilizando la detección de usuarios desatendida, solo se admiten solicitudes POST.

function startLogin() {
   var username = document.getElementById('user_name').value;
   var password = document.getElementById('password').value;
   var encodedUNP = btoa(username + ':' + password);
   var client = new XMLHttpRequest();
   client.open("POST", baseURL + "/services/oauth2/authorize", true);
   client.setRequestHeader("Auth-Request-Type", "Named-User");
   client.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
   client.setRequestHeader("Authorization", "Basic " + encodedUNP);
   client.send("response_type=code_credentials&client_id=" + clientId + "&redirect_uri=" + redirectURL);
   client.onreadystatechange = function() {
       if(this.readyState == 3) {
           console.log("here");
           console.log(client.response);
           response = JSON.parse(client.response);
           if (response.success) {
               getUserInfo(response.access_token, baseURL);
           }
       }
   }
   return false;
}    

Para solicitudes GET y POST, debe incluir el encabezado Auth-Request-Type: Named-User:

GET /services/oauth2/authorize? HTTP 1.1
Host: MyDomainName.my.site.com
Auth-Request-Type: Named-User
Authorization: Basic <encoded username:password>

response_type=code_credentials&
redirect_uri=https://www.MyExperienceCloudSite.my.site.com/services/apexrest/code/extraction&
client_id=******&
code_challenge=Y29kZ*******

Si está utilizando una solicitud POST, puede incluir las credenciales de usuario con codificación Base64 en un encabezado de autorización o puede ponerlas en el cuerpo de la solicitud.

Si está utilizando la detección de usuarios desatendida, no envía un nombre de usuario y una contraseña. En su lugar, envía un identificador en el parámetro login_hint, datos personalizados opcionales y una contraseña. Incluya el identificador, los datos personalizados y la contraseña en el cuerpo de una solicitud POST. No utilice una solicitud GET.

Opcionalmente, para conectar este flujo al flujo de invitados desatendido, puede incluir un encabezado Uvid-Hint con un token de acceso basado en JWT que contenga un valor UVID, que es un identificador exclusivo universal (UUID) de versión 4 generado y completamente gestionado por su aplicación. Para obtener un token de acceso con un UVID, debe activar su aplicación cliente externa o aplicación conectada para emitir tokens de acceso basados en JWT e implementar el flujo de invitados desatendido en su aplicación.

Si implementa el flujo de usuarios invitados en su aplicación, puede opcionalmente utilizar este encabezado para pasar en un token de acceso basado en Token web de JSON (JWT) que contenga un Id. de visitante exclusivo (UVID) vinculado a la identidad de un usuario invitado. Al pasar el UVID a un flujo de usuario nombrado, puede llevar información contextual desde una sesión de usuario invitado, como las preferencias de cookies del usuario, a una sesión de usuario nombrada.

También puede incluir el valor UVID sin formato en el cuerpo de la solicitud.

Nota Si tiene la configuración Requerir credenciales de usuario en el cuerpo POST para el flujo Código de autorización y credenciales activada en su aplicación cliente externa o aplicación conectada, puede enviar las credenciales de usuario solo en el cuerpo de solicitud. Con esta configuración activada, no puede utilizar el método GET para la solicitud del código de autorización. Solo puede utilizar el método POST.

Para ambos métodos GET y POST, incluya estos parámetros obligatorios en el cuerpo de la solicitud de autorización.

También puede incluir estos parámetros opcionales en la solicitud de autorización.

(Opcional) El controlador de detección de usuarios desatendida encuentra el usuario

Si está utilizando un controlador de detección de usuarios desatendida, el controlador acepta los parámetros login_hint y customdata, y encuentra el usuario asociado. El controlador confirma que la dirección de email o el número de teléfono del usuario está verificado.

Para obtener un controlador de ejemplo, consulte Auth.HeadlessUserDiscoveryHandler.

Salesforce valida las credenciales y devuelve un redireccionamiento 302 al controlador de devolución de llamadas del lado del servidor

La API de inicio de sesión desatendido de Salesforce recibe la solicitud de autorización. Valida las credenciales del usuario y devuelve un redireccionamiento HTTP 302 a una URL preconfigurada que contiene el código de autorización. Salesforce envía automáticamente la respuesta de redireccionamiento a la dirección URL de redireccionamiento, que apunta al controlador de devolución de llamadas en la parte del servidor, en el extremo /code/extraction en este ejemplo. Durante este proceso, el navegador no se redirige, todo sucede en segundo plano.

El controlador de devolución de llamadas del lado del servidor extrae el código y lo devuelve a la aplicación

@RestResource(urlMapping='/code/extraction')
global class CodeExtractorAPI {
  
   @HttpGet
   global static CodeResponse doGet() {
       RestRequest req = RestContext.request;
       RestResponse res = RestContext.response;
       try {
           res.statusCode = 200;
           return new CodeResponse(req.params.get('code'), req.params.get('sfdc_community_url'), req.params.get('sfdc_community_id'), req.params.get('state'));
       } catch (Exception e) {
           res.statusCode = 500;
           return new CodeResponse('Could not parse auth code redirect URI');
       }
      
   }
The response wrapper sets the variables for the code response, including success and error indicators.
// Response Wrapper
   global class CodeResponse {
       String code;
       String sfdc_community_url;
       String sfdc_community_id;
       String state;
       Boolean success;
       String errMsg;
      
       public CodeResponse(String code, String sfdc_community_url, String sfdc_community_id, String state) {
           this.code = code;
           this.sfdc_community_url = sfdc_community_url;
           this.sfdc_community_id = sfdc_community_id;
           this.state = state;
           this.success = true;
       }
      
        public CodeResponse(String errMsg) {
           this.success = false;
           this.errMsg = this.errMsg;
       }       
   }

<?
header('Access-Control-Allow-Headers: *');
header('Access-Control-Allow-Origin: *');
header('Content-Type: application/json; charset=utf-8');
$out = [];
foreach ($_GET as $name => $value) {
   $out[$name] = $value;
}
echo json_encode($out);
?>

Después de extraer el código, el controlador de devolución de llamadas lo envía de nuevo al navegador.

La aplicación recibe la respuesta del código y realiza el intercambio de códigos

{"success":true,"state":"https://MyExperienceCloudSite.my.site.com/","sfdc_community_url":"https://MyExperienceCloudSite.my.site.com/vforcesite","sfdc_community_id":"0DBxxxxxxxxxxxx","errMsg":null,"code":"aPrxC1*******"}

El navegador solicita desatendidamente que intercambie el código para un token de acceso. En el ejemplo de JavaScript en la parte del cliente, la función doCodeExchange envía el código en una solicitud POST al extremo de tokens de Experience Cloud.

var clientId = "<Connected App Client ID>";
var baseURL = "<Experience Cloud Domain>";
var redirectURL = "<Experience Cloud Domain>/services/apexrest/code/extraction"
      
// Performs the code exchange
function doCodeExchange(authorizeResponse) {
   //Perform Code Exchange
   //Get Access Token
   var client = new XMLHttpRequest();
   client.open("POST", authorizeResponse.sfdc_community_url + "/services/oauth2/token", true);
   client.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
   client.send("code=" + authorizeResponse.code + "&grant_type=authorization_code&client_id=" + clientId + "&redirect_uri=" + redirectURL);
   client.onreadystatechange = function() {
       if(this.readyState == 3) {
           response = JSON.parse(client.response);
           getUserInfo(response.access_token, response.sfdc_community_url)
       }
   }
} 

Para la solicitud de token de acceso, solo puede utilizar una solicitud POST: No se admiten las solicitudes GET. Debe incluir un encabezado Content-Type. Incluya estos parámetros obligatorios en el cuerpo de la solicitud.

También puede incluir estos parámetros opcionales en la solicitud de token.

Salesforce otorga un token de acceso

{
"access_token":"*******************",
"sfdc_community_url":"https://MyDomainName.my.site.com",
"sfdc_community_id":"0DBxxxxxxxxxxxx",
"signature":"ts6wm/svX3jXlCGR4uu+SbA04M6qhD1SAgVTEwZ59P4=",
"scope":"openid api",
"id_token":"XXXXXX",
"instance_url":"https://yourInstance.salesforce.com",
"id":"https://yourInstance.salesforce.com/id/00Dxxxxxxxxxxxx/005xxxxxxxxxxxx",
"token_type":"Bearer",
"issued_at":"1667600739962"
}

La respuesta del token de acceso contiene estos parámetros obligatorios.

La respuesta del token de acceso también puede incluir estos parámetros.

La aplicación procesa la respuesta del token y crea la sesión de usuario

El navegador almacena la información de la respuesta del token y crea la sesión de usuario. En este punto, el usuario ha iniciado sesión y el JavaScript del lado del cliente llama al extremo de información de usuario de Salesforce para confirmar que el inicio de sesión se realizó correctamente, como se muestra en este fragmento.

Nota Asegúrese de completar una revisión de seguridad completa de el almacenamiento de su token de acceso. Nunca almacene el token de acceso en el almacenamiento local del navegador y evite almacenarlo en una cookie si es posible.

// Gets User Info
function getUserInfo(accessToken, userInfoBaseURL) {
   var client = new XMLHttpRequest();
   client.open("GET", userInfoBaseURL + "/services/oauth2/userinfo", true);
   client.setRequestHeader("Content-Type", "application/json");
   client.setRequestHeader("Authorization", "Bearer " + accessToken);
   client.send();
   client.onreadystatechange = function() {
       if(this.readyState == 3) {
           response = JSON.parse(client.response);
           response.access_token = accessToken;
           document.getElementById("json").textContent = JSON.stringify(response, undefined, 2);
           document.getElementById("results").style.display="block";
       }
   }
}

El usuario final inicia sesión y realiza una acción en la aplicación

El usuario final ahora inició sesión. Realiza una acción en su aplicación que requiere acceso a datos de Salesforce. Por ejemplo, hace clic en un botón para ver su historial de reserva de viajes, que se almacena en Salesforce.

Nota Cuando configura su aplicación cliente externa o aplicación conectada para el flujo Código de autorización y credenciales, establece la política Usuarios permitidos en Usuarios aprobados por el administrador se han autorizado previamente y configura qué perfiles o conjuntos de permisos pueden acceder a la aplicación. Con esta política, los usuarios acceden a la aplicación sin autorizarla, de modo que no obtienen una pantalla de autorización solicitándoles permitir a la aplicación acceder a sus datos.

La aplicación externa realiza una llamada autenticada a un extremo de Salesforce

Para acceder a los datos de Salesforce del usuario, su aplicación utiliza el token de acceso para realizar una llamada autenticada a un extremo de Salesforce protegido, como una API de Salesforce.

El usuario final puede acceder a datos de Salesforce

El usuario puede ahora acceder a datos de Salesforce protegidos en su aplicación. Por ejemplo, puede ver su historial de reserva de viajes. Desde la perspectiva del usuario final, el proceso completo desde el inicio de sesión hasta el acceso a sus datos se produjo sin requerir nunca salir de la aplicación.