자체 페이지에서 로그인

대부분의 앱은 로그인할 사람을 환경의 Lobby로 보냅니다. 사용자를 자체 페이지에 머무르게 하고 싶다면, @usher/react의 <SignIn />이 그 자리에서 로그인을 처리한 뒤 이전과 똑같이 OpenID Connect로 마무리합니다. 서버는 여전히 Usher에서 토큰을 받으며, 암호나 토큰이 페이지를 거쳐 가는 일은 없습니다.

앱의 출처 허용하기

Usher Console에서 환경을 열고 로그인 → 삽입형 로그인으로 이동한 다음, https://app.example.com과 같은 앱의 출처(origin)를 추가하세요. 목록에 있는 출처만 환경의 Frontend API를 사용할 수 있으며, 그것도 로그인에만 사용할 수 있습니다.

컴포넌트 추가하기

import { SignIn } from '@usher/react'

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

이 컴포넌트는 @usher/nextjs가 이미 사용하는 UsherProvider 안에 들어갑니다. frontendApi는 환경의 발급자입니다.

처리 과정

• 먼저 이메일을 받고, 그다음 암호나 이메일 코드, 사용자가 설정해 두었다면 2단계 인증을 진행합니다. 소셜 로그인과 ‘Usher로 계속하기’는 해당 공급자로 이동했다가 앱으로 돌아옵니다.
• 그다음 OpenID Connect. 환경에 로그인되면 컴포넌트가 브라우저를 앱의 /auth/sign-in으로 보내고, 이 요청은 곧바로 Usher를 거쳐 코드와 함께 돌아옵니다. 처음 한 번은 Usher가 사용자에게 앱을 허용할지 묻습니다.
• 봇 방지는 Lobby에서와 똑같이 작동합니다. Usher가 작업 증명(proof of work)을 요구하면 컴포넌트가 이를 처리합니다.
• 그 밖의 모든 것(패스키, 기업용 로그인, 계정 만들기)은 Lobby로 연결되는 링크입니다.

프로덕션에서는 자체 도메인 사용하기

컴포넌트는 Usher 세션을 환경의 쿠키에 보관합니다. 프로덕션에서는 이 쿠키가 퍼스트 파티 쿠키여야 하므로, 앱과 같은 사이트에 있는 자체 도메인을 환경에 지정하세요(app.example.com이라면 login.example.com). 개발 환경에서는 삽입을 허용한 환경이 쿠키를 사이트 간에 보내며, Chrome은 이를 허용합니다. 브라우저가 쿠키를 유지하지 않는 경우에는 컴포넌트가 대신 Lobby로 넘겨줍니다.