제품
문 앞에서 좌석까지, 그 사이의 모든 것.
Usher Identity는 문 앞에서 티켓을 확인하고 사람들을 좌석으로 안내합니다. 인증한 다음 인가하는 것이죠. 네 가지 구성 요소가 이 일을 나누어 맡습니다.
Lobby
호스팅되는 로그인 페이지.
‘Usher Identity로 계속하기’를 누르면 도착하는 곳입니다. 사용자가 이동할 제품의 이름을 항상 보여 주고, 어느 제품에서 왔든 똑같은 모습이라 사람들은 Usher Identity의 모습을 익히고 Usher Identity가 아닌 것을 알아챌 수 있습니다.
모든 로그인 방법
패스키, 이메일 코드, 매직 링크, 소셜 로그인, 그리고 원한다면 암호까지.
2차 인증
백업 코드를 지원하는 인증 앱. 모든 사용자에게 선택 사항 또는 필수로 설정할 수 있습니다.
가입할 수 있는 사람
누구나 가입하게 하거나, 주소와 도메인으로 만든 게스트 리스트만 받고, 그 밖의 경우는 차단 목록으로 막을 수 있습니다.
두 테마 모두 차분하게
라이트와 다크 테마 모두 모든 색상 조합을 WCAG 2.2 AA 기준으로 검사했으며, 경고하기보다 환영하는 말투로 작성했습니다.
Usher Identity 계정
계정 하나로 모든 문을.
Usher Identity 계정은 사용자 개인이 갖는 계정입니다. Usher Identity 계정을 사용하는 모든 제품에 로그인할 수 있고, 계정을 한곳에서 관리할 수 있습니다.
원하는 방식으로 로그인
패스키를 추가하고, 인증 앱을 켜고, 이메일을 변경할 수 있습니다.
한눈에 보이는 기기
로그인된 모든 기기를 확인하고, 어떤 기기든 로그아웃할 수 있습니다.
연결된 계정
연결한 소셜 계정을 확인하고, 연결을 해제할 수 있습니다.
쉬운 탈퇴
사용자가 직접 계정을 삭제할 수 있습니다.
Usher Identity Console
개발자가 모든 것을 운영하는 곳.
워크스페이스에는 프로젝트가, 프로젝트에는 환경이 있습니다. 각 환경은 자체 사용자, 애플리케이션, 키, Lobby를 갖춘 독립된 발급자입니다.
애플리케이션
정확히 일치하는 리디렉션 URI를 쓰는 기밀 클라이언트와 공개 클라이언트, 그리고 머신 간 자격 증명.
사용자와 조직
사용자를 찾고, 세션을 끝내고, 조직과 팀, 초대를 관리합니다.
키
환경의 서명 키를 확인하고 교체합니다.
실시간 Lobby 미리 보기
아무도 로그인시키지 않는 미리 보기 호스트에서, 사용자에게 보일 모습 그대로 Lobby를 확인하세요.
SDK와 컴포넌트
누구나 알아보는 버튼.
‘Usher Identity로 계속하기’ 버튼은 사람들이 이미 아는 로그인 버튼들처럼 모든 제품에서 똑같이 보입니다. 레이블은 제품의 글꼴을 따르고, 그 밖에는 아무것도 바뀌지 않습니다.
@usher/ui의 실제 컴포넌트
<SignIn />과<UserButton />은 SDK와 함께 제공됩니다. SDK와 함께 제공 예정- 그전까지는 어떤 OpenID Connect 라이브러리로든 지금 바로 로그인을 구현할 수 있습니다.
// app/layout.tsx
import { UsherProvider } from '@usher/nextjs'
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html lang="en">
<body>
<UsherProvider>{children}</UsherProvider>
</body>
</html>
)
}
// app/page.tsx
import { SignIn, UserButton, currentUser } from '@usher/nextjs'
export default async function Page() {
const user = await currentUser()
return user ? <UserButton /> : <SignIn />
}사용자를 안으로 모시세요.
워크스페이스와 프로젝트를 만들면 첫 번째 환경이 자체 발급자, 키, Lobby와 함께 준비됩니다.
한 번 로그인하면 어디서든 환영받습니다.