Daftar masuk di halaman anda sendiri

Kebanyakan aplikasi menghantar orang ke Lobby persekitaran mereka untuk daftar masuk. Jika anda lebih suka mengekalkan mereka di halaman anda sendiri, <SignIn /> daripada @usher/react mendaftar masuk mereka di situ juga, kemudian menyelesaikannya dengan OpenID Connect sama seperti sebelumnya: pelayan anda masih mendapat tokennya daripada Usher, dan tiada kata laluan atau token yang melalui halaman anda.

Benarkan asal aplikasi anda

Dalam Usher Console, buka persekitaran, kemudian Daftar masuk → Daftar masuk terbenam, dan tambah asal (origin) aplikasi anda, seperti https://app.example.com. Hanya asal yang disenaraikan boleh menggunakan Frontend API persekitaran itu, dan hanya untuk daftar masuk.

Tambah komponen

import { SignIn } from '@usher/react'

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

Ia berada di dalam UsherProvider yang sudah digunakan oleh @usher/nextjs. frontendApi ialah pengeluar persekitaran anda.

Apa yang berlaku

• E-mel dahulu, kemudian kata laluan atau kod melalui e-mel, kemudian langkah kedua jika orang itu mempunyainya. Daftar masuk sosial dan Teruskan dengan Usher pergi ke penyedia dan kembali ke aplikasi anda.
• Kemudian OpenID Connect. Setelah didaftar masuk di persekitaran anda, komponen itu menghantar pelayar ke /auth/sign-in aplikasi anda, yang terus melalui Usher dan kembali dengan kod. Pada kali pertama, Usher meminta orang itu membenarkan aplikasi anda.
• Perlindungan bot berfungsi seperti dalam Lobby: apabila Usher meminta bukti kerja, komponen itu melakukannya.
• Selain itu (kunci laluan, daftar masuk perusahaan, mencipta akaun) ialah pautan ke Lobby anda.

Gunakan domain anda sendiri dalam produksi

Komponen itu menyimpan sesi Usher dalam kuki persekitaran anda. Dalam produksi, kuki itu mestilah pihak pertama: berikan persekitaran itu domain anda sendiri, dalam laman yang sama dengan aplikasi anda (login.example.com untuk app.example.com). Dalam pembangunan, persekitaran yang membenarkan pembenaman menghantar kukinya merentas laman, yang diterima oleh Chrome. Jika pelayar tidak mahu menyimpannya, komponen itu menyerahkan kepada Lobby anda sebaliknya.