Kendi sayfanızda giriş

Çoğu uygulama, insanları giriş yapmaları için ortamlarının Lobby’sine gönderir. Onları kendi sayfanızda tutmayı tercih ederseniz @usher/react paketindeki <SignIn /> girişi orada yapar, ardından tam olarak eskisi gibi OpenID Connect ile tamamlar: sunucunuz belirteçlerini yine Usher’dan alır ve sayfanızdan hiçbir parola ya da belirteç geçmez.

Uygulamanızın kökenine izin verin

Usher Console’da ortamı açın, ardından Giriş → Gömülü giriş bölümüne gidin ve uygulamanızın kökenini (origin) ekleyin, örneğin https://app.example.com. Ortamın Frontend API’sini yalnızca listelenen kökenler, yalnızca giriş için kullanabilir.

Bileşeni ekleyin

import { SignIn } from '@usher/react'

export function SignInPage() {
  return <SignIn frontendApi="https://login.example.com" returnTo="/dashboard" />
}

Bileşen, @usher/nextjs paketinin zaten kullandığı UsherProvider içinde yer alır. frontendApi, ortamınızın yayıncısıdır.

Ne olur?

• Önce e-posta, ardından bir parola ya da e-postayla gönderilen bir kod, sonra kişinin varsa ikinci adımı. Sosyal hesapla giriş ve Usher ile devam et, sağlayıcıya gider ve uygulamanıza geri döner.
• Sonra OpenID Connect. Ortamınızda giriş yapıldıktan sonra bileşen, tarayıcıyı uygulamanızın /auth/sign-in adresine gönderir; bu adres doğrudan Usher’dan geçip bir kodla geri döner. İlk seferinde Usher, kişiden uygulamanıza izin vermesini ister.
• Bot koruması Lobby’deki gibi çalışır: Usher bir iş kanıtı (proof of work) istediğinde bileşen bunu yapar.
• Geri kalan her şey (geçiş anahtarları, kurumsal giriş, hesap oluşturma) Lobby’nize giden bir bağlantıdır.

Üretimde kendi alan adınızı kullanın

Bileşen, Usher’ın oturumunu ortamınızın çerezlerinde tutar. Üretimde bu çerezler birinci taraf olmalıdır: ortama, uygulamanızla aynı sitede kendi alan adınızı verin (app.example.com için login.example.com). Geliştirmede, gömülü kullanıma izin veren bir ortam çerezlerini siteler arası gönderir; Chrome bunu kabul eder. Bir tarayıcının bu çerezleri tutmadığı yerde bileşen işi Lobby’nize devreder.