Đăng nhập trên trang của riêng bạn

Hầu hết các ứng dụng đưa người dùng đến Lobby của môi trường để đăng nhập. Nếu bạn muốn giữ họ lại trên trang của mình, <SignIn /> từ @usher/react sẽ đăng nhập cho họ ngay tại đó, rồi hoàn tất bằng OpenID Connect đúng như trước: máy chủ của bạn vẫn nhận token từ Usher, và không có mật khẩu hay token nào đi qua trang của bạn.

Cho phép origin của ứng dụng

Trong Usher Console, mở môi trường, rồi chọn Đăng nhập → Đăng nhập nhúng, và thêm origin của ứng dụng, chẳng hạn https://app.example.com. Chỉ các origin có trong danh sách mới được dùng Frontend API của môi trường, và chỉ để đăng nhập.

Thêm thành phần

TSX

import { SignIn } from '@usher/react'

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

Thành phần này nằm bên trong UsherProvider mà @usher/nextjs đã dùng sẵn. frontendApi là bên phát hành của môi trường.

Điều gì diễn ra

Email trước, sau đó là mật khẩu hoặc mã gửi qua email, rồi bước thứ hai nếu người dùng có. Đăng nhập bằng mạng xã hội và Tiếp tục với Usher sẽ chuyển đến nhà cung cấp rồi quay lại ứng dụng của bạn.
Sau đó là OpenID Connect. Khi đã đăng nhập vào môi trường, thành phần đưa trình duyệt đến /auth/sign-in của ứng dụng, đi thẳng qua Usher và quay lại cùng một mã. Lần đầu tiên, Usher sẽ hỏi người dùng có cho phép ứng dụng của bạn không.
Bảo vệ khỏi bot hoạt động giống như trong Lobby: khi Usher yêu cầu bằng chứng công việc (proof of work), thành phần sẽ thực hiện.
Mọi thứ khác (mã khóa, đăng nhập doanh nghiệp, tạo tài khoản) là một liên kết đến Lobby của bạn.

Dùng tên miền riêng trong môi trường chính thức

Thành phần giữ phiên Usher trong cookie của môi trường. Trong môi trường chính thức, các cookie đó phải là cookie bên thứ nhất: hãy gán cho môi trường tên miền riêng của bạn, cùng site với ứng dụng (login.example.com cho app.example.com). Trong môi trường phát triển, một môi trường cho phép nhúng sẽ gửi cookie giữa các site, điều mà Chrome chấp nhận. Ở trình duyệt không giữ các cookie này, thành phần sẽ chuyển sang Lobby của bạn.