Me encontré con un problema en el que mi solicitud AJAX falla con el código de error 401 - No autorizado, al intentar obtener un token OAuth2 (Okta).
La pestaña de vista previa muestra un error de la siguiente manera:
Browser requests to the token endpoint must use Proof Key for Code Exchange¿Significa esto que no puedo usar el tipo de concesión client_credentials para las solicitudes del lado del cliente?
Aquí está mi solicitud de AJAX:
$.ajax({ url: dataParsed.TokenServiceEndpoint, type: "POST", contentType: "application/x-www-form-urlencoded", datatype: "application/json", headers: { "Authorization": "Basic " + btoa(dataParsed.TokenServiceUser + ":" + dataParsed.TokenServicePassword) }, data: { "grant_type": "client_credentials" } }Una solicitud similar funciona con cartero, pero no estoy seguro de cuál es la diferencia entre los dos o cómo hacer que funcione a través de ajax.
Aquí está la solicitud exportada de Postman:
Content-Type: application/x-www-form-urlencoded Authorization: Basic ************* User-Agent: PostmanRuntime/7.29.0 Accept: */* Postman-Token: fd2c4617-a4bb-4d28-88bd-1aa84c2a7404 Host: ***** Accept-Encoding: gzip, deflate, br Connection: keep-alive Content-Length: 29 Cookie: JSESSIONID=3B62F82EE85BC8574756101635CC3B14 grant_type=client_credentials HTTP/1.1 200 OK Date: Fri, 18 Mar 2022 14:41:42 GMT Server: nginx Content-Type: application/json x-okta-request-id: YjSaJqln-TB3pOn9kgwmsQAABSw x-xss-protection: 0 p3p: CP="HONK" x-rate-limit-limit: 20000 x-rate-limit-remaining: 19971 x-rate-limit-reset: 1647614537 cache-control: no-cache, no-store pragma: no-cache expires: 0 expect-ct: report-uri="*****", max-age=0 x-content-type-options: nosniff Strict-Transport-Security: max-age=315360000; includeSubDomains X-Robots-Tag: noindex,nofollow set-cookie: sid=""; Expires=Thu, 01-Jan-1970 00:00:10 GMT; Path=/ set-cookie: autolaunch_triggered=""; Expires=Thu, 01-Jan-1970 00:00:10 GMT; Path=/ set-cookie: JSESSIONID=AA2D48FFC46A8AC0E1D139D038CE98AB; Path=/; Secure; HttpOnly Keep-Alive: timeout=5, max=100 Connection: Keep-Alive Transfer-Encoding: chunkedRastree su solicitud con Fiddler, también las credenciales del cliente del lado del cliente no son compatibles con Okta desde el navegador, tiene que estar en el nivel del servidor. Compruebe esto: https://support.okta.com/help/s/article/Browser-requests-to-the-token-endpoint-must-use-Proof-Key-for-Code-Exchange?language=en_US
La razón por la que dije rastrear con Fiddler es para que pueda confirmar si el encabezado de origen se envía o no cuando usa cartero vs desde ajax y, por lo tanto, confirme que se encuentra con el problema mencionado en el enlace que pegué.
La concesión de credenciales de cliente está destinada a la comunicación de servidor a servidor. Le permite a su cliente autenticarse en el Servidor de autorización para obtener un token de acceso. Esto significa que necesita un cliente confidencial para usar este flujo con éxito, un cliente que tenga un secreto y pueda autenticarse usando ese secreto. Un cliente de navegador (por ejemplo, un SPA) no puede guardar secretos: cualquiera puede leer el secreto de su código. Es por eso que Okta no le permite usar las credenciales del cliente directamente desde el navegador. La respuesta de error le dice que los clientes del navegador deben usar PKCE, y dado que PKCE solo es posible en un flujo de código de autorización, esto significa implícitamente que Okta solo permite el flujo de código de autorización desde un cliente del navegador.
Postman no es un navegador, por eso funciona la solicitud de postman. También funcionará si lo ejecuta desde curl.
En general, no debería tener que usar las credenciales de cliente de su navegador. Si lo necesita solo con fines de desarrollo o para averiguar cosas, puede ejecutar el flujo desde el cartero y pegar el token en su código de interfaz. En un código de producción, debe usar el flujo de código de autorización. Sin embargo, debe recordar que este flujo requiere la interacción del usuario.