Un bouton de connexion est la première chose que touche un nouvel utilisateur : il doit s'intégrer à votre design, fonctionner au clavier, s'afficher correctement en arabe et se rendre côté serveur sans scintillement. @posty5/oauth-angular fournit à une application Angular un bouton Continuer avec Posty5 prêt à l'emploi qui fait tout cela, avec le flux de connexion qui va derrière.

Ce tutoriel vous mène de l'installation à un bouton fonctionnel et stylé. Il suppose que vous avez enregistré une application OAuth comme décrit dans Ajouter Login with Posty5 à votre site web ou à votre application, et il fait partie de la plateforme développeurs présentée dans le guide des clés API et des SDK.

Choisissez d'abord un mode

• startUrl : votre back-end gère déjà la connexion, par exemple avec @posty5/oauth. Le bouton ouvre simplement votre adresse de démarrage. C'est le mode recommandé, et celui qu'utilise Trend Digest.
• codeHandler : le paquet démarre PKCE dans le navigateur et envoie le code à votre back-end, qui l'échange avec le secret client.
• browser : pas de back-end. Le paquet échange le code en tant que client public et vérifie le jeton d'identité avec WebCrypto. L'application OAuth doit autoriser la connexion depuis le navigateur pour l'origine de votre site.

Quel que soit le mode, le secret client n'atteint jamais le navigateur.

Ajouter le bouton étape par étape

1. Installez le paquet avec npm install @posty5/oauth-angular. Il prend en charge Angular 17.3 à 20.
2. Appelez providePosty5Auth dans la configuration de votre application avec le mode choisi.
3. Importez Posty5SignInButtonComponent là où vous l'utilisez et placez l'attribut posty5SignInButton sur un vrai élément button, pour que les formulaires, le focus et le clavier se comportent normalement.
4. Pour les modes codeHandler et browser, faites pointer votre URI de redirection vers une page chargée en lazy loading qui contient le composant posty5Callback, et naviguez sur ses événements signedIn et failed.
5. Connectez-vous une fois vous-même et vérifiez que vous revenez sur la page de départ.

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

L'accorder à votre design

• theme : filled (bleu Posty5), outline (blanc) ou filledDark pour les pages sombres.
• size : large, medium ou small ; shape : rectangular, pill, circle ou square (logo seul).
• text : Continuer avec Posty5, Se connecter avec Posty5, S'inscrire avec Posty5 ou Se connecter ; label le remplace entièrement.
• logoAlignment, width et locale par bouton, et unstyled quand vous voulez tout styliser vous-même.

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

Les styles intégrés ont une spécificité nulle, donc n'importe laquelle de vos règles l'emporte sans !important, et chaque couleur et chaque taille est une propriété personnalisée CSS. Les boutons en arabe s'affichent d'eux-mêmes de droite à gauche, et Posty5 est toujours écrit en alphabet latin.

Accueillir par leur nom les utilisateurs qui reviennent

Après une connexion, le bouton peut afficher la photo de l'utilisateur, Continuer en tant que suivi de son nom, et un e-mail masqué, comme les boutons personnalisés d'autres fournisseurs de connexion. En mode browser, cela se fait tout seul ; dans les autres modes, appelez rememberUser avec ce que votre back-end a renvoyé, et forgetUser à la déconnexion.

L'utilisateur mémorisé ne contient que le nom, une adresse d'image HTTPS et l'e-mail masqué, sans aucun jeton. Le bouton personnalisé n'apparaît qu'après l'hydratation, donc le HTML rendu côté serveur ne diverge jamais.

Bon à savoir

• Le paquet fonctionne sans risque avec le rendu côté serveur : sur le serveur, le bouton affiche son texte générique, et la connexion ne s'y exécute jamais.
• Il appelle Posty5 avec fetch, donc vos intercepteurs HTTP n'ajoutent jamais votre propre en-tête Authorization aux endpoints de Posty5.
• Une connexion en attente est conservée dans le session storage d'un onglet et expire au bout de 10 minutes.
• En mode browser, gardez les jetons en mémoire. Pour les sessions longues, préférez startUrl ou codeHandler avec un cookie HttpOnly.

Questions fréquentes