Nuxt 인증을 Logto로 구축하기

시작하기#

Logto SDK 통합하기#

설치#

선호하는 패키지 관리자를 통해 Logto SDK를 설치하세요:

Logto 모듈 등록하기#

Nuxt 구성 파일(nuxt.config.ts)에 Logto 모듈을 추가하세요:

모듈의 최소 구성은 다음과 같습니다:

이 정보들은 민감하기 때문에 환경 변수를 사용하는 것을 권장합니다:

추가 정보는 runtime config를 참조하세요.

로그인 및 로그아웃 구현하기#

리디렉션 URI 구성

Logto 콘솔의 애플리케이션 세부 정보 페이지로 전환합니다. 리디렉션 URI http://localhost:3000/callback을 추가합니다.

리디렉션 URI는 인증 후 리디렉션할 위치를 나타내는 OAuth 2.0 개념입니다.

마찬가지로, "로그아웃 후 리디렉션 URI" 섹션에 http://localhost:3000/을 추가합니다.

로그아웃 후 리디렉션 URI는 로그아웃 후 리디렉션할 위치를 나타내는 OAuth 2.0 개념입니다.

그런 다음 "저장"을 클릭하여 변경 사항을 저장합니다.

@logto/nuxt 모듈을 등록할 때 다음을 수행합니다:

• 로그인(/sign-in), 로그아웃(/sign-out), 그리고 콜백(/callback)을 위한 세 가지 라우트를 추가합니다.
• 두 가지 composables을 가져옵니다: useLogtoClient와 useLogtoUser.

이 라우트는 모듈 옵션에서 logto.pathnames를 통해 구성할 수 있습니다. 예를 들어:

자세한 정보는 @logto/nuxt 패키지의 타입 정의 파일을 확인하세요.

Nuxt 페이지는 초기 로드 후 SPA로 변환되므로, 필요할 때 사용자를 로그인 또는 로그아웃 라우트로 리디렉션해야 합니다.

사용자 정보 표시하기#

사용자의 정보를 표시하려면 서버 및 클라이언트 측에서 사용할 수 있는 useLogtoUser() composable을 사용할 수 있습니다:

체크포인트: 애플리케이션 실행하기#

이제 애플리케이션을 실행하고 Logto로 로그인/로그아웃을 시도할 수 있습니다:

1. 브라우저에서 애플리케이션을 열면 "로그인" 버튼이 표시될 것입니다.
2. "로그인" 버튼을 클릭하면 Logto 로그인 페이지로 리디렉션됩니다.
3. 로그인한 후 애플리케이션으로 다시 리디렉션되며 사용자 데이터와 "로그아웃" 버튼이 표시될 것입니다.
4. "로그아웃" 버튼을 클릭하면 Logto 로그아웃 페이지로 리디렉션된 다음 로그인되지 않은 상태로 애플리케이션으로 다시 리디렉션됩니다.

통합 중 문제가 발생하면 Discord 서버에 가입하여 커뮤니티 및 Logto 팀과 채팅하십시오!

추가 읽기 자료#

• 로그인 경험 커스터마이즈
• 커넥터 구성
• API 보호