การลงชื่อเข้าบนหน้าของคุณเอง

แอปส่วนใหญ่ส่งผู้ใช้ไปลงชื่อเข้าที่ Lobby ของสภาพแวดล้อม หากคุณต้องการให้ผู้ใช้อยู่บนหน้าของคุณเอง <SignIn /> จาก @usher/react จะพาผู้ใช้ลงชื่อเข้าได้ตรงนั้นเลย แล้วจบด้วย OpenID Connect เหมือนเดิมทุกประการ: เซิร์ฟเวอร์ของคุณยังได้รับโทเค็นจาก Usher และไม่มีรหัสผ่านหรือโทเค็นใดผ่านหน้าของคุณ

อนุญาต origin ของแอป

ใน Usher Console ให้เปิดสภาพแวดล้อม แล้วไปที่ การลงชื่อเข้า → การลงชื่อเข้าแบบฝัง และเพิ่ม origin ของแอป เช่น https://app.example.com มีเพียง origin ที่อยู่ในรายการเท่านั้นที่ใช้ Frontend API ของสภาพแวดล้อมได้ และใช้ได้เพื่อการลงชื่อเข้าเท่านั้น

เพิ่มคอมโพเนนต์

TSX

import { SignIn } from '@usher/react'

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

คอมโพเนนต์นี้อยู่ภายใน UsherProvider ที่ @usher/nextjs ใช้อยู่แล้ว frontendApi คือ Issuer ของสภาพแวดล้อม

สิ่งที่เกิดขึ้น

อีเมลก่อน ตามด้วยรหัสผ่านหรือรหัสทางอีเมล แล้วจึงเป็นขั้นตอนที่สองหากผู้ใช้เปิดไว้ การลงชื่อเข้าด้วยบัญชีโซเชียลและ “ดำเนินการต่อด้วย Usher” จะไปที่ผู้ให้บริการแล้วกลับมาที่แอปของคุณ
แล้วจึงเป็น OpenID Connect เมื่อผู้ใช้ลงชื่อเข้าที่สภาพแวดล้อมแล้ว คอมโพเนนต์จะส่งเบราว์เซอร์ไปยัง /auth/sign-in ของแอป ซึ่งจะผ่าน Usher ไปและกลับมาพร้อมรหัสทันที ในครั้งแรก Usher จะขอให้ผู้ใช้อนุญาตแอปของคุณ
การป้องกันบอท ทำงานเหมือนใน Lobby: เมื่อ Usher ขอหลักฐานการทำงาน (proof of work) คอมโพเนนต์จะทำให้เอง
อย่างอื่นทั้งหมด (พาสคีย์ การลงชื่อเข้าผ่านองค์กร การสร้างบัญชี) เป็นลิงก์ไปยัง Lobby ของคุณ

ใช้โดเมนของคุณเองในสภาพแวดล้อมใช้งานจริง

คอมโพเนนต์เก็บเซสชันของ Usher ไว้ในคุกกี้ของสภาพแวดล้อม ในสภาพแวดล้อมใช้งานจริง คุกกี้เหล่านี้ต้องเป็นคุกกี้ของบุคคลที่หนึ่ง: ให้กำหนดโดเมนของคุณเองให้สภาพแวดล้อม บนไซต์เดียวกับแอปของคุณ (login.example.com สำหรับ app.example.com) ในสภาพแวดล้อมพัฒนา สภาพแวดล้อมที่อนุญาตการฝังจะส่งคุกกี้ข้ามไซต์ ซึ่ง Chrome ยอมรับ หากเบราว์เซอร์ใดไม่เก็บคุกกี้เหล่านี้ คอมโพเนนต์จะส่งต่อไปยัง Lobby ของคุณแทน