Masuk di halaman Anda sendiri

Sebagian besar aplikasi mengarahkan orang ke Lobby lingkungannya untuk masuk. Jika Anda lebih suka mereka tetap di halaman Anda sendiri, <SignIn /> dari @usher/react memasukkan mereka langsung di sana, lalu menyelesaikannya dengan OpenID Connect persis seperti biasa: server Anda tetap mendapat token dari Usher, dan tidak ada kata sandi atau token yang melewati halaman Anda.

Izinkan origin aplikasi Anda

Di Usher Console, buka lingkungan, lalu Cara masuk → Masuk tersemat, dan tambahkan origin aplikasi Anda, seperti https://app.example.com. Hanya origin yang tercantum yang boleh menggunakan Frontend API lingkungan, dan hanya untuk proses masuk.

Tambahkan komponen

import { SignIn } from '@usher/react'

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

Komponen ini berada di dalam UsherProvider yang sudah digunakan @usher/nextjs. frontendApi adalah penerbit lingkungan Anda.

Apa yang terjadi

• Email dulu, lalu kata sandi atau kode lewat email, lalu langkah kedua jika orang tersebut memilikinya. Masuk dengan akun sosial dan Lanjutkan dengan Usher pergi ke penyedianya lalu kembali ke aplikasi Anda.
• Lalu OpenID Connect. Setelah masuk di lingkungan Anda, komponen mengarahkan browser ke /auth/sign-in aplikasi Anda, yang langsung melewati Usher dan kembali dengan kode. Pada kali pertama, Usher meminta orang tersebut mengizinkan aplikasi Anda.
• Perlindungan bot bekerja seperti di Lobby: saat Usher meminta bukti kerja (proof of work), komponen mengerjakannya.
• Hal lainnya (kunci sandi, SSO perusahaan, membuat akun) berupa tautan ke Lobby Anda.

Gunakan domain Anda sendiri di produksi

Komponen menyimpan sesi Usher di cookie lingkungan Anda. Di produksi, cookie itu harus pihak pertama: beri lingkungan itu domain Anda sendiri, di situs yang sama dengan aplikasi Anda (login.example.com untuk app.example.com). Di pengembangan, lingkungan yang mengizinkan penyematan mengirim cookie-nya lintas situs, yang diterima Chrome. Jika browser tidak menyimpannya, komponen akan menyerahkan proses ke Lobby Anda.