Um botão de login é a primeira coisa que um novo usuário toca, então ele precisa combinar com o seu design, funcionar com o teclado, ser lido corretamente em árabe e renderizar no servidor sem piscar. O @posty5/oauth-angular dá a um app Angular um botão Continuar com Posty5 pronto com tudo isso, além do fluxo de login por trás dele.

Este tutorial leva você da instalação a um botão funcionando e estilizado. Ele parte do princípio de que você já registrou um app OAuth como descrito em Como adicionar o Login with Posty5 ao seu site ou app, e faz parte da plataforma de desenvolvedores do guia de chaves de API e SDKs.

Primeiro, escolha um modo

• startUrl: seu back end já conduz o login, por exemplo com o @posty5/oauth. O botão apenas abre seu endereço de início. É o modo recomendado e o que o Trend Digest usa.
• codeHandler: o pacote inicia o PKCE no navegador e envia o código ao seu back end, que o troca usando o segredo do cliente.
• browser: sem back end. O pacote troca o código como cliente público e verifica o token de identidade com WebCrypto. O app OAuth precisa permitir o login pelo navegador a partir da origem do seu site.

Em todos os modos, o segredo do cliente nunca chega ao navegador.

Adicione o botão passo a passo

1. Instale o pacote com npm install @posty5/oauth-angular. Ele suporta Angular 17.3 a 20.
2. Chame providePosty5Auth na configuração do seu app com o modo que você escolheu.
3. Importe Posty5SignInButtonComponent onde for usá-lo e coloque o atributo posty5SignInButton em um elemento button de verdade, para que formulários, foco e teclado funcionem como sempre.
4. Nos modos codeHandler e browser, aponte seu URI de redirecionamento para uma página com carregamento lazy que contenha o componente posty5Callback e navegue nos eventos signedIn e failed dele.
5. Entre uma vez você mesmo e confira se volta para a página de onde começou.

// 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>

Deixe com a cara do seu design

• theme: filled (azul Posty5), outline (branco) ou filledDark para páginas escuras.
• size: large, medium ou small; shape: rectangular, pill, circle ou square (só o logotipo).
• text: Continuar com Posty5, Entrar com Posty5, Cadastrar-se com Posty5 ou Entrar; label o substitui por completo.
• logoAlignment, width e locale por botão, e unstyled quando você quiser estilizar tudo por conta própria.

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

Os estilos embutidos têm especificidade zero, então qualquer regra sua vence sem !important, e cada cor e tamanho é uma propriedade personalizada de CSS. Botões em árabe são dispostos da direita para a esquerda automaticamente, e Posty5 é sempre escrito em alfabeto latino.

Cumprimente pelo nome quem volta

Depois de um login, o botão pode mostrar a foto do usuário, Continuar como com o nome dele e um e-mail mascarado, como os botões personalizados de outros provedores de login. No modo browser isso acontece sozinho; nos outros modos, chame rememberUser com o que seu back end retornou, e forgetUser ao sair.

O usuário lembrado guarda só o nome, um endereço de imagem HTTPS e o e-mail mascarado, sem tokens. O botão personalizado só aparece depois da hidratação, então o HTML renderizado no servidor nunca fica diferente.

Bom saber

• O pacote é seguro com renderização no servidor: no servidor, o botão mostra o texto genérico, e o login nunca roda lá.
• Ele chama a Posty5 com fetch, então seus interceptors HTTP nunca adicionam o seu próprio cabeçalho Authorization aos endpoints da Posty5.
• Um login pendente fica no session storage de uma aba e expira depois de 10 minutos.
• No modo browser, mantenha os tokens na memória. Para sessões longas, prefira startUrl ou codeHandler com um cookie HttpOnly.

Perguntas frequentes