> ## Documentation Index
> Fetch the complete documentation index at: https://translations.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.
> Configuración de Auth0 para el escenario de arquitectura con SPA + API
# Configuración de Auth0 (SPA + API)
En esta sección revisaremos toda la configuración que debemos aplicar en el [Auth0 Dashboard](https://manage.auth0.com/#).
## Crear la API
Vaya a la [sección APIs](https://manage.auth0.com/#/apis) del Dashboard y haga clic en el botón **Create API**.
Se le pedirá que proporcione los siguientes datos para su API:
* **Nombre**: un nombre descriptivo para la API. No afecta a ninguna funcionalidad.
* **Identificador**: un identificador único para la API. Recomendamos usar una URL, pero tenga en cuenta que no es necesario que sea una URL de acceso público; Auth0 no realizará llamadas a su API. Este valor no se puede modificar después.
* **Algoritmo de firma**: el algoritmo con el que se firman los tokens. Los valores disponibles son `HS256` y `RS256`. Al seleccionar `RS256`, el token se firmará con la clave privada del inquilino. Para obtener más información sobre los algoritmos de firma, consulte [Algoritmos de firma](/es/docs/get-started/applications/signing-algorithms).
Complete la información requerida y haga clic en el botón **Create**.
## Configura los alcances
Una vez creada la aplicación, tendrás que configurar los alcances que pueden solicitar las aplicaciones durante la autorización.
En la configuración de tu API, ve a la pestaña permiso. En esta sección puedes agregar los alcances para nuestro caso de uso: `read:timesheets`, `create:timesheets`, `delete:timesheets` y `approve:timesheets`.
## Crear la aplicación
Hay cuatro tipos de aplicaciones en Auth0:
* **Aplicación nativa** (utilizada por aplicaciones móviles o de escritorio),
* **Aplicación web de una sola página**,
* **Aplicación web tradicional** y
* **Aplicación Machine to Machine** (utilizada por CLI, daemons o servicios que se ejecutan en su backend).
Para este escenario, queremos crear una nueva aplicación para nuestra SPA, por lo que usaremos Single-Page Application como tipo de aplicación.
Para crear una nueva aplicación, vaya al [Dashboard](https://manage.auth0.com/#) y haga clic en la opción de menú [Applications](https://manage.auth0.com/#/applications) del lado izquierdo. Haga clic en el botón **+ Create Application**.
Asigne un nombre a su aplicación (usaremos `Timesheets SPA`) y seleccione `Single-Page Web App` como tipo.
Haga clic en **Create**.
Eso es todo por ahora. Cuando terminemos con la implementación de la SPA, volveremos al Dashboard y a la configuración de esta aplicación para hacer algunos cambios.
## Configurar la Authorization Extension
Debe asegurarse de que la Authorization Extension esté instalada en su inquilino. Puede consultar la [documentación de Authorization Extension](/es/docs/customize/extensions/authorization-extension) para obtener más información sobre cómo hacerlo.
### Definir permisos
Ahora definirá los permisos requeridos, de acuerdo con los alcances que ya definió: `read:timesheets`, `create:timesheets`, `delete:timesheets` y `approve:timesheets`.
En Authorization Extension, haga clic en la pestaña **Permisos** y, a continuación, en el botón **Crear permiso**.
En el cuadro de diálogo, complete los datos de cada permiso.
Asegúrese de que el nombre del permiso sea exactamente el mismo que el del alcance correspondiente:
Continúe creando los permisos para todos los alcances restantes:
### Definir roles
A continuación, configuraremos los dos roles: employee y manager.
Ve a la pestaña **Roles**, haz clic en el botón **Create Role** y selecciona la aplicación **Timesheets SPA**.
Configura **Name** y **Description** con el valor `Employee` y selecciona los permisos `delete:timesheets`, `create:timesheets` y `read:timesheets`. Haz clic en **Save**.
A continuación, sigue el mismo proceso para crear un rol `Manager` y asegúrate de haber seleccionado todos los permisos.
### Asignar usuarios a roles
Debe asignar todos los usuarios al rol `Manager` o al rol `Employee`.
Puede hacerlo yendo a la pestaña **Users** de Authorization Extension y seleccionando un usuario.
En la pantalla de información del usuario, vaya a la pestaña **Roles**. Haga clic en **Add Role to User** y seleccione el rol correspondiente.
### Configurar Authorization Extension
También deberá asegurarse de que la Rule de Authorization Extension esté publicada.
Para ello, haga clic en el avatar de su usuario en la esquina superior derecha de Authorization Extension y seleccione **Configuration**.
Asegúrese de que **permiso** esté habilitado y, a continuación, haga clic en **Publicar Rule**.
### Crear una Rule para validar los alcances del token
El paso final de este proceso es crear una Rule para comprobar si los alcances contenidos en un Token de acceso son válidos en función de los permisos asignados al usuario. Cualquier alcance que no sea válido para un usuario debe eliminarse del Token de acceso.
En tu Auth0 Dashboard, ve a la pestaña **Rules**. Deberías ver la Rule creada por la Authorization Extension. Haz clic en el botón **Create Rule** y selecciona la plantilla **Empty Rule**. Puedes asignarle un nombre a la Rule, como **Access Token Scopes**, y luego especificar el siguiente código para la Rule:
```javascript lines theme={null}
function (user, context, callback) {
var permissions = user.permissions || [];
var requestedScopes = context.request.body.scope || context.request.query.scope;
var filteredScopes = requestedScopes.split(' ').filter( function(x) {
return x.indexOf(':') < 0;
});
var allScopes = filteredScopes.concat(permissions);
context.accessToken.scope = allScopes.join(' ');
callback(null, user, context);
}
```
El código anterior garantizará que todos los Tokens de acceso solo contengan los alcances con el formato correcto (por ejemplo, `action:area` o `delete:timesheets`) que sean válidos de acuerdo con los permisos del usuario. Cuando haya terminado, puede hacer clic en el botón **Guardar**.
Las Rules se ejecutan en el orden en que aparecen en la página Rules, así que asegúrese de que la nueva Rule que creó esté ubicada debajo de la Rule de Authorization Extension para que se ejecute después de la Rule de Authorization Extension.