Un botón de inicio de sesión es lo primero que toca un usuario nuevo, así que debe encajar en tu diseño, funcionar con el teclado, leerse bien en árabe y renderizarse en el servidor sin parpadeos. @posty5/oauth-angular da a una aplicación Angular un botón Continuar con Posty5 listo con todo eso, además del flujo de inicio de sesión que hay detrás.

Esta guía práctica te lleva desde la instalación hasta un botón funcional y con estilo. Da por hecho que ya registraste una aplicación OAuth como se explica en Cómo añadir Login with Posty5 a tu sitio web o aplicación, y forma parte de la plataforma para desarrolladores de la guía de claves de API y SDK.

Primero, elige un modo

• startUrl: tu back end ya gestiona el inicio de sesión, por ejemplo con @posty5/oauth. El botón solo abre tu dirección de inicio. Es el modo recomendado y el que usa Trend Digest.
• codeHandler: el paquete inicia PKCE en el navegador y envía el código a tu back end, que lo intercambia con el secreto de cliente.
• browser: sin back end. El paquete intercambia el código como cliente público y verifica el token de identidad con WebCrypto. La aplicación OAuth debe permitir el inicio de sesión desde el navegador para el origen de tu sitio.

En todos los modos, el secreto de cliente nunca llega al navegador.

Añade el botón paso a paso

1. Instala el paquete con npm install @posty5/oauth-angular. Es compatible con Angular 17.3 a 20.
2. Llama a providePosty5Auth en la configuración de tu aplicación con el modo que elegiste.
3. Importa Posty5SignInButtonComponent donde lo uses y pon el atributo posty5SignInButton en un elemento button real, para que los formularios, el foco y el teclado se comporten como siempre.
4. En los modos codeHandler y browser, dirige tu URI de redirección a una página de carga diferida que contenga el componente posty5Callback y navega en sus eventos signedIn y failed.
5. Inicia sesión tú mismo una vez y comprueba que vuelves a la página desde la que empezaste.

// app.config.ts
import { providePosty5Auth } from "@posty5/oauth-angular";

export const appConfig = {
  providers: [
    providePosty5Auth({
      mode: "startUrl",
      startUrl: "/api/auth/posty5/start",
    }),
  ],
};

<button posty5SignInButton theme="outline" shape="pill" [width]="320" returnUrl="/dashboard"></button>

Adáptalo a tu diseño

• theme: filled (azul de Posty5), outline (blanco) o filledDark para páginas oscuras.
• size: large, medium o small; shape: rectangular, pill, circle o square (solo el logotipo).
• text: Continuar con Posty5, Iniciar sesión con Posty5, Registrarse con Posty5 o Iniciar sesión; label lo sustituye por completo.
• logoAlignment, width y locale por botón, y unstyled cuando quieras dar estilo a todo tú mismo.

.login-card .posty5-btn {
  --posty5-btn-radius: 9999px;
  --posty5-btn-font-family: "Cairo", sans-serif;
  --posty5-btn-hover-bg: #1a6bff;
}

Los estilos integrados tienen especificidad cero, así que cualquier regla tuya gana sin !important, y cada color y tamaño es una propiedad personalizada de CSS. Los botones en árabe se disponen de derecha a izquierda por sí solos, y Posty5 siempre se escribe en alfabeto latino.

Saluda por su nombre a los usuarios que vuelven

Tras un inicio de sesión, el botón puede mostrar la foto del usuario, Continuar como con su nombre y un correo electrónico enmascarado, como los botones personalizados de otros proveedores de inicio de sesión. En el modo browser esto ocurre solo; en los otros modos, llama a rememberUser con lo que devolvió tu back end, y a forgetUser al cerrar sesión.

El usuario recordado guarda solo el nombre, una dirección de imagen HTTPS y el correo enmascarado, sin tokens. El botón personalizado aparece solo después de la hidratación, así que el HTML renderizado en el servidor nunca deja de coincidir.

Conviene saber

• El paquete es seguro con el renderizado en el servidor: en el servidor el botón muestra su texto genérico y el inicio de sesión nunca se ejecuta allí.
• Llama a Posty5 con fetch, así que tus interceptores HTTP nunca añaden tu propia cabecera Authorization a los endpoints de Posty5.
• Un inicio de sesión pendiente se guarda en el session storage de una pestaña y caduca a los 10 minutos.
• En el modo browser, guarda los tokens en memoria. Para sesiones largas, es preferible startUrl o codeHandler con una cookie HttpOnly.

Preguntas frecuentes