Giriş düğmesi, yeni bir kullanıcının ilk dokunduğu şeydir; bu yüzden tasarımınızda doğru görünmeli, klavyeyle çalışmalı, Arapçada doğru okunmalı ve sunucuda titreme olmadan işlenmelidir. @posty5/oauth-angular, bir Angular uygulamasına tüm bunları sağlayan hazır bir “Posty5 ile Devam Et” düğmesini ve arkasındaki giriş akışını sunar.

Bu rehber sizi kurulumdan çalışan ve stil verilmiş bir düğmeye kadar götürür. Web sitenize veya uygulamanıza “Posty5 ile Giriş Yap” nasıl eklenir? makalesinde anlatıldığı gibi bir OAuth uygulaması kaydettiğinizi varsayar ve API anahtarları ve SDK rehberindeki geliştirici platformunun bir parçasıdır.

Önce bir mod seçin

• startUrl: arka ucunuz girişi zaten yürütüyor, örneğin @posty5/oauth ile. Düğme yalnızca başlangıç adresinizi açar. Önerilen mod budur ve Trend Digest de bunu kullanır.
• codeHandler: paket PKCE'yi tarayıcıda başlatır ve kodu arka ucunuza gönderir; arka uç da kodu istemci gizli anahtarıyla takas eder.
• browser: arka uç yok. Paket kodu herkese açık (public) bir istemci olarak takas eder ve ID token'ı WebCrypto ile doğrular. OAuth uygulaması, sitenizin kaynağından tarayıcıda girişe izin vermelidir.

Hangi modu seçerseniz seçin, istemci gizli anahtarı asla tarayıcıya ulaşmaz.

Düğmeyi adım adım ekleyin

1. Paketi npm install @posty5/oauth-angular ile kurun. Angular 17.3 ile 20 arasındaki sürümleri destekler.
2. Uygulama yapılandırmanızda, seçtiğiniz modla providePosty5Auth'u çağırın.
3. Posty5SignInButtonComponent'i kullandığınız yerde içe aktarın ve posty5SignInButton özniteliğini gerçek bir button öğesine ekleyin; böylece formlar, odak ve klavye her zamanki gibi çalışır.
4. codeHandler ve browser modlarında, yönlendirme URI'nizi posty5Callback bileşenini barındıran tembel yüklenen (lazy) bir sayfaya yönlendirin ve signedIn ile failed olaylarında gezinme yapın.
5. Bir kez kendiniz giriş yapın ve başladığınız sayfaya geri döndüğünüzü kontrol edin.

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

Tasarımınıza uydurun

• theme: filled (Posty5 mavisi), outline (beyaz) veya koyu sayfalar için filledDark.
• size: large, medium veya small; shape: rectangular, pill, circle veya square (yalnızca logo).
• text: “Posty5 ile Devam Et”, “Posty5 ile Oturum Aç”, “Posty5 ile Kaydol” veya “Oturum Aç”; label ise metni tamamen değiştirir.
• Düğme başına logoAlignment, width, locale ve her şeyi kendiniz biçimlendirmek istediğinizde unstyled.

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

Yerleşik stillerin özgüllüğü (specificity) sıfırdır; bu yüzden !important kullanmadan her kuralınız geçerli olur ve her renk ile boyut bir CSS özel özelliğidir. Arapça düğmeler kendiliğinden sağdan sola yerleşir ve Posty5 her zaman Latin harfleriyle yazılır.

Geri dönen kullanıcıları adlarıyla karşılayın

Bir girişten sonra düğme, kullanıcının resmini, adıyla birlikte “... olarak devam et” ifadesini ve maskelenmiş e-posta adresini gösterebilir; tıpkı diğer giriş sağlayıcılarının kişiselleştirilmiş düğmeleri gibi. browser modunda bu kendiliğinden olur; diğer modlarda arka ucunuzun döndürdüğü bilgilerle rememberUser'ı, oturum kapatırken de forgetUser'ı çağırın.

Hatırlanan kullanıcı yalnızca adı, bir HTTPS resim adresini ve maskelenmiş e-postayı tutar; token tutmaz. Kişiselleştirilmiş düğme yalnızca hydration işleminden sonra görünür, bu nedenle sunucuda işlenen HTML ile hiçbir zaman uyuşmazlık oluşmaz.

Bilmekte fayda var

• Paket sunucu tarafı işlemeyle (SSR) güvenle kullanılabilir: sunucuda düğme genel metnini gösterir ve giriş orada asla çalışmaz.
• Posty5'i fetch ile çağırır; böylece HTTP interceptor'larınız kendi Authorization başlığınızı asla Posty5'in uç noktalarına eklemez.
• Bekleyen bir giriş, tek bir sekmenin oturum depolamasında (session storage) tutulur ve 10 dakika sonra sona erer.
• browser modunda token'ları bellekte tutun. Uzun oturumlar için HttpOnly bir çerezle startUrl veya codeHandler'ı tercih edin.

Sıkça sorulan sorular