Mientras implementaba oAuth para la integración de terceros, me topé con cierta información que no se actualizó durante bastante tiempo. Aquí estoy tratando de capturar mi experiencia y cómo funciona

Nota: Este artículo no hablará en detalle sobre oAuth y cómo funciona. Se centra principalmente en cómo configurarlos e implementarlos en la aplicación de reacción. Si desea leer sobre oAuth, lea aquí. Proporciona información muy clara.

El flujo:

A grandes rasgos, el flujo funciona como se describe arriba.

Entonces, ¿cuál es el problema?

Por lo general, cuando intentas obtener el código y el code_verifier directamente de un sitio web de terceros, puedes encontrarte con un problema de CORS. Esto es lo que se espera.

¿Cómo resolverlos?

1. Consulte con un proveedor externo: si pueden incluir su sitio web en la lista blanca, fantástico. No necesitas ningún backend

2. Si la lista blanca no funciona, es posible que necesites un backend que funcione como proxy_inverso. En nuestro caso, utilizamos una configuración mecanografiada simple que representa nuestra llamada y la usamos como backend para el proxy inverso. También puedes lograrlo con la configuración de tu backend.

¿Por qué está llegando a CORS?

Porque lo más probable es que, si usa PKCE, deba enviar el encabezado de autenticación junto con su solicitud para obtener el token. Enviar autenticación está prohibido en la interfaz de usuario por razones de seguridad.

CORs es una función integrada en los navegadores para mayor seguridad. Evita que cualquier sitio web aleatorio utilice sus cookies autenticadas para enviar una solicitud de API al sitio web de su banco y hacer cosas como retirar dinero en secreto.

¿Qué biblioteca utilicé para hacerlo fácilmente en reaccionar?

https://github.com/authts/react-oidc-context
? Éste. Esto proporciona configuración como contexto y también admite webstoragestatestore, lo cual es bueno tener.

¿Tienes más preguntas?

Responder aquí. Con mucho gusto me encantaría ayudar si puedo :)

Feliz codificación...