> ## 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.
> Aprenda a añadir Login a su aplicación de una sola página (SPA) mediante el flujo implícito con Form Post.
# Añadir Login mediante el flujo implícito con Form Post
export const AuthCodeBlock = ({filename, icon, language, highlight, children}) => {
const [displayText, setDisplayText] = useState(children);
const [copyText, setCopyText] = useState(children);
const wrapperRef = React.useRef(null);
useEffect(() => {
let unsubscribe = null;
function init() {
if (!window.autorun || !window.rootStore) {
return;
}
unsubscribe = window.autorun(() => {
let processedChildrenForDisplay = children;
let processedChildrenForCopy = children;
for (const [key, value] of window.rootStore.variableStore.values.entries()) {
const escapedKey = key.replaceAll(/[.*+?^${}()|[\]\\]/g, (String.raw)`\$&`);
let displayValue = value;
if (key === "{yourClientSecret}" && value !== "{yourClientSecret}") {
displayValue = value.substring(0, 3) + "*****ENMASCARADO*****";
}
processedChildrenForDisplay = processedChildrenForDisplay.replaceAll(new RegExp(escapedKey, "g"), displayValue);
processedChildrenForCopy = processedChildrenForCopy.replaceAll(new RegExp(escapedKey, "g"), value);
}
setDisplayText(processedChildrenForDisplay);
setCopyText(processedChildrenForCopy);
});
}
if (window.rootStore) {
init();
} else {
window.addEventListener("adu:storeReady", init);
}
return () => {
window.removeEventListener("adu:storeReady", init);
unsubscribe?.();
};
}, [children]);
useEffect(() => {
if (!wrapperRef.current) return;
const originalWriteText = navigator.clipboard.writeText.bind(navigator.clipboard);
let isOverriding = false;
const handleClick = e => {
const button = e.target.closest('[data-testid="copy-code-button"]');
if (!button || !wrapperRef.current.contains(button)) return;
isOverriding = true;
navigator.clipboard.writeText = text => {
if (isOverriding) {
isOverriding = false;
navigator.clipboard.writeText = originalWriteText;
return originalWriteText(copyText);
}
return originalWriteText(text);
};
setTimeout(() => {
if (isOverriding) {
isOverriding = false;
navigator.clipboard.writeText = originalWriteText;
}
}, 100);
};
const wrapper = wrapperRef.current;
wrapper.addEventListener('click', handleClick, true);
return () => {
wrapper.removeEventListener('click', handleClick, true);
if (navigator.clipboard.writeText !== originalWriteText) {
navigator.clipboard.writeText = originalWriteText;
}
};
}, [copyText]);
return
{displayText}
;
};
Puede agregar Login a su aplicación de una sola página (SPA) mediante el flujo implícito con Form Post. Para saber cómo funciona el flujo y por qué debería usarlo, lea [flujo implícito con Form Post](/es/docs/get-started/authentication-and-authorization-flow/implicit-flow-with-form-post).
Use el flujo implícito con Form Post para casos de uso exclusivos de Login; si necesita solicitar tokens de acceso durante el inicio de sesión del usuario para poder llamar a su API, use el Flujo de código de autorización con PKCE. Para obtener más información, lea [Flujo de código de autorización con Proof Key for Code Exchange (PKCE](/es/docs/get-started/authentication-and-authorization-flow/authorization-code-flow-with-pkce)).
Para implementar el flujo implícito con Form Post, puede usar los siguientes recursos:
* [Express OpenID Connect SDK](https://www.npmjs.com/package/express-openid-connect): La forma más sencilla de implementar el flujo, que se encargará de la mayor parte del trabajo por usted. Si usa nuestro SDK de Javascript, asegúrese de implementar mitigaciones adecuadas para su arquitectura. Para obtener más información, lea [Referencia de Auth0.js](/es/docs/libraries/auth0js).
* [Authentication API](https://auth0.com/docs/api/authentication): Si prefiere crear su propia solución, siga leyendo para aprender a llamar directamente a nuestra API.
Después de iniciar sesión correctamente, su aplicación tendrá acceso al [token de ID](/es/docs/secure/tokens/id-tokens) del usuario. El token de ID contendrá información básica del perfil de usuario.
## Requisitos previos
Registra tu aplicación con Auth0. Para obtener más información, consulta [Registrar aplicaciones de página única](/es/docs/get-started/auth0-overview/create-applications/single-page-web-apps).
* Selecciona **Single-Page App** como **Application Type**.
* Agrega una **Allowed Callback URL** de `{https://yourApp/callback}`.
* Asegúrate de que los **tipos de concesión** de tu aplicación incluyan **Implicit**. Para obtener más información, consulta [Actualizar los tipos de concesión](/es/docs/get-started/applications/update-grant-types).
## Autorizar al usuario
Solicita la autorización del usuario y redirígelo a tu aplicación. Para iniciar el flujo, deberás obtener la autorización del usuario. Este paso puede incluir uno o más de los siguientes procesos:
* Autenticar al usuario;
* Redirigir al usuario a un Proveedor de identidad para gestionar la autenticación;
* Comprobar si hay sesiones activas de inicio de sesión único (SSO);
* Obtener el consentimiento del usuario para el nivel de permiso solicitado, a menos que ya lo haya otorgado previamente.
Para autorizar al usuario, tu aplicación debe dirigirlo a la URL de autorización.
### Ejemplo de URL de autorización
export const codeExample1 = `https://{yourDomain}/authorize?
response_type=YOUR_RESPONSE_TYPE&
response_mode=form_post&
client_id={yourClientId}&
redirect_uri={https://yourApp/callback}&
scope=SCOPE&
state=STATE&
nonce=NONCE`;
### Parámetros
| Nombre del parámetro | Descripción |
| -------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `response_type` | Indica el tipo de credencial que devolverá Auth0 (`code` o `token`). Para el Flujo implícito, el valor puede ser `id_token`, `token` o `id_token token`. En concreto, `id_token` devuelve un ID Token y `token` devuelve un Token de acceso. |
| `response_mode` | Especifica cómo deben devolverse los parámetros de respuesta. Por motivos de seguridad, el valor debe ser `form_post`. En este modo, los parámetros de respuesta se codifican como valores de un formulario HTML, se transmiten mediante el método HTTP POST y se codifican en el cuerpo con el formato `application/x-www-form-urlencoded`. |
| `client_id` | El ID de cliente de su aplicación. Puede encontrar este valor en la [configuración de la aplicación](https://manage.auth0.com/#/applications/\{yourClientId}/settings). |
| `redirect_uri` | La URL a la que Auth0 redirigirá el navegador después de que el usuario haya concedido la autorización. Debe especificar esta URL como una URL de devolución de llamada válida en la [configuración de la aplicación](https://manage.auth0.com/#/Applications/\{yourClientId}/settings).
**Advertencia:** Según la [especificación de OAuth 2.0](https://tools.ietf.org/html/rfc6749#section-3.1.2), Auth0 elimina todo lo que aparece después del hash y *no* tiene en cuenta ningún fragmento. |
| `scope` | Especifica los [alcances](/es/docs/get-started/apis/scopes) para los que desea solicitar autorización, que determinan qué claims (o atributos del usuario) desea recibir. Deben separarse con un espacio. Puede solicitar cualquiera de los [scopes estándar de OpenID Connect (OIDC)](https://openid.net/specs/openid-connect-core-1_0.html#StandardClaims) relacionados con el usuario, como `profile` y `email`, [claims personalizados](/es/docs/secure/tokens/json-web-tokens/json-web-token-claims#custom-claims) que sigan un [formato con espacio de nombres](/es/docs/secure/tokens/json-web-tokens/create-custom-claims), o cualquier scope compatible con la API de destino (por ejemplo, `read:contacts`). |
| `state` | (recomendado) Una cadena alfanumérica arbitraria y opaca que su aplicación agrega a la solicitud inicial y que Auth0 incluye al redirigir de vuelta a su aplicación. Para ver cómo usar este valor para prevenir ataques de Cross-site Request Forgery (CSRF), consulte [Mitigate CSRF Attacks With State Parameters](/es/docs/secure/attack-protection/state-parameters). |
| `nonce` | (obligatorio para `response_type` que contenga `id_token token`; en caso contrario, recomendado) Una cadena aleatoria criptográficamente segura que su aplicación agrega a la solicitud inicial y que Auth0 incluye dentro del ID Token, [utilizada para evitar ataques de repetición de tokens](/es/docs/get-started/authentication-and-authorization-flow/implicit-flow-with-form-post/mitigate-replay-attacks-when-using-the-implicit-flow). |
| `connection` | (opcional) Obliga al usuario a iniciar sesión con una conexión específica. Por ejemplo, puede pasar el valor `github` para enviar al usuario directamente a GitHub e iniciar sesión con su cuenta de GitHub. Si no se especifica, el usuario verá la pantalla de Auth0 Lock con todas las conexiones configuradas. Puede ver una lista de sus conexiones configuradas en la pestaña **Connections** de su aplicación. |
| `organization` | (opcional) ID de la organización que se usará al autenticar a un usuario. Si no se proporciona y su aplicación está configurada para **Display Organization Prompt**, el usuario podrá introducir el nombre de la organización al autenticarse. |
| `invitation` | (opcional) ID del ticket de invitación de la organización. Al [invitar a un miembro a una Organización](/es/docs/manage-users/organizations/configure-organizations/invite-members), su aplicación debe gestionar la aceptación de la invitación reenviando los pares clave-valor `invitation` y `organization` cuando el usuario la acepte. |
Como ejemplo, el fragmento HTML de su URL de autorización al agregar el inicio de sesión a su aplicación podría verse así:
export const codeExample2 = `
Iniciar sesión
`;
### Respuesta
Si todo sale bien, recibirás una respuesta `HTTP 302`. Las credenciales solicitadas se codifican en el cuerpo:
```json lines theme={null}
HTTP/1.1 302 Found
Content-Type: application/x-www-form-urlencoded
id_token=eyJ...acA&
state=xyzABC123
```
Ten en cuenta que los valores devueltos dependen de lo que hayas solicitado en `response_type`.
| Response Type | Components |
| --------------- | ----------------------------------------------------------------------- |
| id\_token | ID Token |
| token | Token de acceso (más los valores `expires_in` y `token_type`) |
| id\_token token | ID Token, Token de acceso (más los valores `expires_in` y `token_type`) |
Auth0 también devolverá cualquier valor de `state` que hayas incluido en tu llamada a la URL de autorización.
Valida tus tokens antes de guardarlos. Para saber cómo hacerlo, consulta [Validar ID Tokens](/es/docs/secure/tokens/id-tokens/validate-id-tokens) y [Validar tokens de acceso](/es/docs/secure/tokens/access-tokens/validate-access-tokens).
Los ID Token contienen información del usuario que debe decodificarse y extraerse.
## Casos de uso
### Solicitud de autenticación básica
Este ejemplo muestra la solicitud de autenticación más básica que puede realizar al autorizar al usuario en el paso 1. Muestra la pantalla de Login de Auth0 y permite al usuario iniciar sesión con cualquiera de sus conexiones configuradas:
export const codeExample3 = `https://{yourDomain}/authorize?
response_type=id_token&
response_mode=form_post&
client_id={yourClientId}&
redirect_uri={https://yourApp/callback}&
nonce=NONCE`;
Esto devolverá un token de ID, que puedes extraer de la URL de redirección.
### Solicitar el nombre y la foto de perfil del usuario
Además de la autenticación habitual del usuario, este ejemplo muestra cómo solicitar información adicional del usuario, como su nombre y su foto de perfil.
Para solicitar el nombre y la foto de perfil del usuario, debes agregar los alcances adecuados al autorizar al usuario:
export const codeExample4 = `https://{yourDomain}/authorize?
response_type=id_token token&
response_mode=form_post&
client_id={yourClientId}&
redirect_uri={https://yourApp/callback}&
scope=openid%20name%20picture&
state=STATE&
nonce=NONCE`;
Ahora, tu token de ID contendrá las claims `name` y `picture` solicitadas. Cuando decodifiques el token de ID, tendrá un aspecto similar a este:
```json lines theme={null}
{
"name": "jerrie@...",
"picture": "https://s.gravatar.com/avatar/6222081fd7dcea7dfb193788d138c457?s=480&r=pg&d=https%3A%2F%2Fcdn.auth0.com%2Favatars%2Fje.png",
"iss": "https://auth0pnp.auth0.com/",
"sub": "auth0|581...",
"aud": "xvt...",
"exp": 1478113129,
"iat": 1478077129
}
```
### Solicitar que el usuario inicie sesión con GitHub
Además del flujo habitual de autenticación del usuario, este ejemplo muestra cómo enviar a los usuarios directamente a un proveedor de identidad social, como GitHub. Para que este ejemplo funcione, debe ir a [Auth0 Dashboard > Authentication > Social](https://manage.auth0.com/#/connections/social) y configurar la conexión correspondiente. Puede obtener el nombre de la conexión en la pestaña **Settings**.
Para enviar a los usuarios directamente a la pantalla de inicio de sesión de GitHub, debe incluir el parámetro `connection` y establecer su valor con el nombre de la conexión (en este caso, `github`) al autorizar al usuario:
export const codeExample5 = `https://{yourDomain}/authorize?
response_type=id_token token&
response_mode=form_post&
client_id={yourClientId}&
redirect_uri={https://yourApp/callback}&
scope=openid%20name%20picture&
state=STATE&
nonce=NONCE&
connection=github`;
Ahora, tu ID Token contendrá un claim `sub` con el id único del usuario devuelto por GitHub. Cuando decodifiques el ID Token, tendrá un aspecto similar a:
```json lines theme={null}
{
"name": "Jerrie Pelser",
"nickname": "jerriep",
"picture": "https://avatars.githubusercontent.com/u/1006420?v=3",
"iss": "https://auth0pnp.auth0.com/",
"sub": "github|100...",
"aud": "xvt...",
"exp": 1478114742,
"iat": 1478078742
}
```
## Más información
* [Marco de autorización de OAuth 2.0](/es/docs/authenticate/protocols/oauth)
* [Protocolo OpenID Connect](/es/docs/authenticate/protocols/openid-connect-protocol)
* [Tokens](/es/docs/secure/tokens)
* [Mitigar ataques de repetición al usar el flujo implícito](/es/docs/get-started/authentication-and-authorization-flow/implicit-flow-with-form-post/mitigate-replay-attacks-when-using-the-implicit-flow)
* [Registrar aplicaciones web de una sola página](/es/docs/get-started/auth0-overview/create-applications/single-page-web-apps)
* [Actualizar los tipos de concesión](/es/docs/get-started/applications/update-grant-types)