Un pulsante di accesso è la prima cosa che tocca un nuovo utente, quindi deve stare bene nel tuo design, funzionare da tastiera, leggersi correttamente in arabo e venire renderizzato sul server senza sfarfallii. @posty5/oauth-angular dà a un'app Angular un pulsante Continua con Posty5 pronto con tutto questo, più il flusso di accesso che c'è dietro.

Questa guida pratica ti porta dall'installazione a un pulsante funzionante e personalizzato. Presuppone che tu abbia registrato un'app OAuth come descritto in Come aggiungere Login with Posty5 al tuo sito web o alla tua app, e fa parte della piattaforma per sviluppatori della guida a chiavi API e SDK.

Prima di tutto, scegli una modalità

• startUrl: il tuo back end gestisce già l'accesso, per esempio con @posty5/oauth. Il pulsante apre solo il tuo indirizzo di avvio. È la modalità consigliata, ed è quella che usa Trend Digest.
• codeHandler: il pacchetto avvia PKCE nel browser e invia il codice al tuo back end, che lo scambia con il client secret.
• browser: niente back end. Il pacchetto scambia il codice come client pubblico e verifica il token di identità con WebCrypto. L'app OAuth deve consentire l'accesso dal browser dall'origine del tuo sito.

In tutte le modalità il client secret non arriva mai al browser.

Aggiungi il pulsante passo dopo passo

1. Installa il pacchetto con npm install @posty5/oauth-angular. Supporta Angular da 17.3 a 20.
2. Chiama providePosty5Auth nella configurazione della tua applicazione con la modalità che hai scelto.
3. Importa Posty5SignInButtonComponent dove lo usi e metti l'attributo posty5SignInButton su un vero elemento button, così moduli, focus e tastiera si comportano come sempre.
4. Per le modalità codeHandler e browser, indirizza il tuo URI di reindirizzamento a una pagina caricata in lazy loading che contiene il componente posty5Callback e naviga sui suoi eventi signedIn e failed.
5. Accedi una volta tu stesso e verifica di tornare alla pagina da cui sei partito.

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

Adattalo al tuo design

• theme: filled (blu Posty5), outline (bianco) o filledDark per le pagine scure.
• size: large, medium o small; shape: rectangular, pill, circle o square (solo logo).
• text: Continua con Posty5, Accedi con Posty5, Registrati con Posty5 o Accedi; label lo sostituisce completamente.
• logoAlignment, width e locale per singolo pulsante, e unstyled quando vuoi definire tu tutto lo stile.

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

Gli stili integrati hanno specificità zero, quindi qualsiasi tua regola prevale senza !important, e ogni colore e dimensione è una proprietà personalizzata CSS. I pulsanti in arabo si dispongono da soli da destra a sinistra, e Posty5 è sempre scritto in caratteri latini.

Saluta per nome chi ritorna

Dopo un accesso, il pulsante può mostrare la foto dell'utente, Continua come seguito dal suo nome e un'email mascherata, come i pulsanti personalizzati di altri provider di accesso. In modalità browser succede da solo; nelle altre modalità, chiama rememberUser con ciò che ha restituito il tuo back end, e forgetUser al logout.

L'utente ricordato contiene solo il nome, un indirizzo HTTPS dell'immagine e l'email mascherata, nessun token. Il pulsante personalizzato compare solo dopo l'idratazione, quindi l'HTML renderizzato sul server non risulta mai diverso.

Buono a sapersi

• Il pacchetto è sicuro con il rendering lato server: sul server il pulsante mostra il suo testo generico e l'accesso non viene mai eseguito lì.
• Chiama Posty5 con fetch, quindi i tuoi interceptor HTTP non aggiungono mai il tuo header Authorization agli endpoint di Posty5.
• Un accesso in sospeso viene conservato nel session storage di una scheda e scade dopo 10 minuti.
• In modalità browser tieni i token in memoria. Per sessioni lunghe, preferisci startUrl o codeHandler con un cookie HttpOnly.

Domande frequenti