Eine Anmeldeschaltfläche ist das Erste, was ein neuer Nutzer anfasst. Sie muss also zu Ihrem Design passen, per Tastatur bedienbar sein, auf Arabisch korrekt dargestellt werden und auf dem Server ohne Flackern rendern. @posty5/oauth-angular gibt einer Angular-App eine fertige Schaltfläche Weiter mit Posty5, die all das kann, samt dem Anmeldeablauf dahinter.

Diese Anleitung führt Sie von der Installation bis zu einer funktionierenden, gestalteten Schaltfläche. Sie setzt voraus, dass Sie eine OAuth-App registriert haben, wie in Login with Posty5 in Ihre Website oder App einbauen beschrieben, und gehört zur Entwicklerplattform aus dem Leitfaden zu API-Schlüsseln und SDKs.

Zuerst einen Modus wählen

• startUrl: Ihr Back-end führt die Anmeldung bereits durch, zum Beispiel mit @posty5/oauth. Die Schaltfläche öffnet nur Ihre Startadresse. Das ist der empfohlene Modus und der, den Trend Digest verwendet.
• codeHandler: Das Paket startet PKCE im Browser und sendet den Code an Ihr Back-end, das ihn mit dem Client-Secret eintauscht.
• browser: kein Back-end. Das Paket tauscht den Code als öffentlicher Client ein und prüft das ID-Token mit WebCrypto. Die OAuth-App muss die Anmeldung im Browser vom Origin Ihrer Website erlauben.

In keinem Modus gelangt das Client-Secret in den Browser.

Die Schaltfläche Schritt für Schritt einbauen

1. Installieren Sie das Paket mit npm install @posty5/oauth-angular. Es unterstützt Angular 17.3 bis 20.
2. Rufen Sie providePosty5Auth in Ihrer Anwendungskonfiguration mit dem gewählten Modus auf.
3. Importieren Sie Posty5SignInButtonComponent dort, wo Sie es verwenden, und setzen Sie das Attribut posty5SignInButton auf ein echtes button-Element, damit Formulare, Fokus und Tastatur wie gewohnt funktionieren.
4. Leiten Sie in den Modi codeHandler und browser Ihre Redirect-URI auf eine per Lazy Loading geladene Seite mit der Komponente posty5Callback und navigieren Sie bei deren Events signedIn und failed.
5. Melden Sie sich einmal selbst an und prüfen Sie, dass Sie auf der Seite landen, von der Sie gestartet sind.

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

An Ihr Design anpassen

• theme: filled (Posty5-Blau), outline (weiß) oder filledDark für dunkle Seiten.
• size: large, medium oder small; shape: rectangular, pill, circle oder square (nur Logo).
• text: Weiter mit Posty5, Mit Posty5 anmelden, Mit Posty5 registrieren oder Anmelden; label ersetzt den Text vollständig.
• logoAlignment, width und locale pro Schaltfläche, und unstyled, wenn Sie alles selbst gestalten möchten.

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

Die eingebauten Styles haben die Spezifität null, daher gewinnt jede Ihrer Regeln ohne !important, und jede Farbe und Größe ist eine CSS Custom Property. Arabische Schaltflächen werden automatisch von rechts nach links aufgebaut, und Posty5 wird immer in lateinischer Schrift geschrieben.

Wiederkehrende Nutzer mit Namen begrüßen

Nach einer Anmeldung kann die Schaltfläche das Bild des Nutzers, Weiter als mit seinem Namen und eine maskierte E-Mail-Adresse zeigen, wie die personalisierten Schaltflächen anderer Anmeldeanbieter. Im Modus browser geschieht das von selbst; in den anderen Modi rufen Sie rememberUser mit dem auf, was Ihr Back-end zurückgegeben hat, und forgetUser beim Abmelden.

Der gespeicherte Nutzer enthält nur den Namen, eine HTTPS-Bildadresse und die maskierte E-Mail-Adresse, keine Tokens. Die personalisierte Schaltfläche erscheint erst nach der Hydration, sodass das auf dem Server gerenderte HTML nie abweicht.

Gut zu wissen

• Das Paket ist sicher mit Server-Side Rendering: Auf dem Server zeigt die Schaltfläche ihren allgemeinen Text, und die Anmeldung läuft dort nie.
• Es ruft Posty5 mit fetch auf, daher fügen Ihre HTTP-Interceptors den Endpoints von Posty5 nie Ihren eigenen Authorization-Header hinzu.
• Eine laufende Anmeldung liegt im Session Storage eines Tabs und läuft nach 10 Minuten ab.
• Halten Sie die Tokens im Modus browser im Arbeitsspeicher. Für lange Sitzungen sind startUrl oder codeHandler mit einem HttpOnly-Cookie die bessere Wahl.

Häufige Fragen