Como puedo arreglar "AADSTS9002326: Cross-origin token redemption is permitted only for the 'Single-Page Application' client-type

Question

Estoy creando una web para crear una tarea en planner mediante una solicitud HTTP pero me esta arrojando el siguiente error

"error_description": "AADSTS9002326: Cross-origin token redemption is permitted only for the 'Single-Page Application' client-type.

Este es el procedimiento que estoy aplicando

En base a esta documentación estoy creando la solicitud para crear la tarea en Planner

https://learn.microsoft.com/en-us/graph/api/planner-post-tasks?view=graph-rest-1.0&tabs=http

menciona que necesitaremos un token

y para obtenerlo estoy aplicando lo siguente

https://learn.microsoft.com/en-us/graph/auth-v2-service?tabs=http

y al momento de hacer la petición me lanza el error antes mencionado

Answer 1

El error "AADSTS9002326: Cross-origin token redemption is permitted only for the 'Single-Page Application' client-type" generalmente indica que estás intentando usar un tipo de aplicación (como un cliente web tradicional) que no es compatible con el flujo de autorización CORS (Cross-Origin Resource Sharing) requerido para redimir tokens desde un origen diferente.

Para resolver este problema, aquí te presento los pasos que puedes seguir:

1. Verificar el tipo de aplicación

Asegúrate de que tu aplicación está registrada correctamente en Azure:

• Si tu aplicación es una Single-Page Application (SPA) (por ejemplo, utilizando React, Angular o Vue), debes asegurarte de que la configuración en Azure AD esté establecida como tal.
• Si no es una SPA, como por ejemplo un servidor backend típico, necesitarás utilizar un flujo de autorización que no requiere CORS, como el flujo de credenciales del cliente (Client Credentials Flow).

2. Usar el flujo de permisos de cliente (Client Credentials Flow)

Si tu aplicación no es una SPA, debes usar el flujo de credenciales del cliente para obtener el token de acceso. Esto es útil para aplicaciones backend que necesitan autenticar y hacer solicitudes en nombre de sí mismas.

Aquí está cómo puedes hacerlo:

Paso 1: Registra tu aplicación

1. En el portal de Azure, ve a Azure Active Directory > Registros de aplicaciones.
2. Registra una nueva aplicación o selecciona una existente.
3. En Autenticación, asegúrate de que tu aplicación tiene habilitados los permisos necesarios para interactuar con Microsoft Graph (por ejemplo, Group.ReadWrite.All para Planner).
4. En Certificados y secretos, genera un nuevo secreto de aplicación y almacénalo de forma segura.

Paso 2: Obtener un token de acceso

Usa el siguiente flujo en tu backend para obtener un token de acceso para Microsoft Graph:

http

POST https://login.microsoftonline.com/{tenant-id}/oauth2/v2.0/token

Con el siguiente cuerpo:

text

client_id={client-id}
client_secret={client-secret}
scope=https://graph.microsoft.com/.default
grant_type=client_credentials

Recuerda reemplazar {tenant-id}, {client-id} y {client-secret} con los valores de tu app. El scope debe ser https://graph.microsoft.com/.default para acceder a los permisos que has dado a la aplicación.

Paso 3: Usar el token para hacer una solicitud a Planner

Una vez que tengas el token de acceso, puedes hacer la solicitud a la API de Microsoft Graph para crear una tarea en Planner:

http

POST https://graph.microsoft.com/v1.0/planner/tasks

3. Asegúrate de tener los permisos correctos

Verifica que tu aplicación tenga los permisos de Graph API necesarios para crear tareas en Planner. Puedes hacerlo en la sección de API permissions de tu registro de aplicación en Azure.

4. Probar con Postman

Si aún tienes problemas, prueba realizar la llamada a la API con Postman, utilizando los pasos anteriores para obtener el token con la autenticación de cliente y luego haciendo la llamada a la API de Planner. Esto te ayudará a aislar el problema a tu código o configuración.El error "AADSTS9002326: Cross-origin token redemption is permitted only for the 'Single-Page Application' client-type" generalmente indica que estás intentando usar un tipo de aplicación (como un cliente web tradicional) que no es compatible con el flujo de autorización CORS (Cross-Origin Resource Sharing) requerido para redimir tokens desde un origen diferente.

Para resolver este problema, aquí te presento los pasos que puedes seguir:

1. Verificar el tipo de aplicación

Asegúrate de que tu aplicación está registrada correctamente en Azure:

• Si tu aplicación es una Single-Page Application (SPA) (por ejemplo, utilizando React, Angular o Vue), debes asegurarte de que la configuración en Azure AD esté establecida como tal.
• Si no es una SPA, como por ejemplo un servidor backend típico, necesitarás utilizar un flujo de autorización que no requiere CORS, como el flujo de credenciales del cliente (Client Credentials Flow).

2. Usar el flujo de permisos de cliente (Client Credentials Flow)

Si tu aplicación no es una SPA, debes usar el flujo de credenciales del cliente para obtener el token de acceso. Esto es útil para aplicaciones backend que necesitan autenticar y hacer solicitudes en nombre de sí mismas.

Aquí está cómo puedes hacerlo:

Paso 1: Registra tu aplicación

1. En el portal de Azure, ve a Azure Active Directory > Registros de aplicaciones.
2. Registra una nueva aplicación o selecciona una existente.
3. En Autenticación, asegúrate de que tu aplicación tiene habilitados los permisos necesarios para interactuar con Microsoft Graph (por ejemplo, Group.ReadWrite.All para Planner).
4. En Certificados y secretos, genera un nuevo secreto de aplicación y almacénalo de forma segura.

Paso 2: Obtener un token de acceso

Usa el siguiente flujo en tu backend para obtener un token de acceso para Microsoft Graph:

http

POST https://login.microsoftonline.com/{tenant-id}/oauth2/v2.0/token

Con el siguiente cuerpo:

text

client_id={client-id}
client_secret={client-secret}
scope=https://graph.microsoft.com/.default
grant_type=client_credentials

Recuerda reemplazar {tenant-id}, {client-id} y {client-secret} con los valores de tu app. El scope debe ser https://graph.microsoft.com/.default para acceder a los permisos que has dado a la aplicación.

Paso 3: Usar el token para hacer una solicitud a Planner

Una vez que tengas el token de acceso, puedes hacer la solicitud a la API de Microsoft Graph para crear una tarea en Planner:

http

POST https://graph.microsoft.com/v1.0/planner/tasks

3. Asegúrate de tener los permisos correctos

Verifica que tu aplicación tenga los permisos de Graph API necesarios para crear tareas en Planner. Puedes hacerlo en la sección de API permissions de tu registro de aplicación en Azure.

4. Probar con Postman

Si aún tienes problemas, prueba realizar la llamada a la API con Postman, utilizando los pasos anteriores para obtener el token con la autenticación de cliente y luego haciendo la llamada a la API de Planner. Esto te ayudará a aislar el problema a tu código o configuración.