한국어
Logto로 SvelteKit 인증 구축하기
Logto SDK를 통합하여 SvelteKit에서 사용자 인증 흐름을 구축하는 방법을 알아봅니다.
Gao
Founder
Founder
Logto SDK를 통합하여 SvelteKit에서 사용자 인증 흐름을 구축하는 방법을 알아봅니다.
이 튜토리얼에서는 Logto SDK를 통합하여 SvelteKit로 사용자 인증 흐름을 구축하는 방법을 보여줍니다. 튜토리얼에서는 프로그래밍 언어로 TypeScript를 사용합니다.
시작하기 전에 다음을 확인하십시오:
시작하려면 "전통적인 웹" 유형의 Logto 애플리케이션을 만드십시오. Logto 애플리케이션을 만드는 단계는 다음과 같습니다:
그런 다음 SvelteKit 애플리케이션과 Logto SDK를 통합하는 과정을 안내하는 대화형 가이드를 볼 수 있습니다. 다음 내용은 향후 참고 자료로 사용할 수 있습니다.
좋아하는 패키지 매니저를 이용하여 Logto SDK를 설치합니다:
hooks.server.ts 파일에 다음 코드를 추가하여 Logto 훅을 서버에 주입합니다:
이러한 정보는 민감하므로 환경 변수를 사용하는 것이 좋습니다:
여러 훅이 있는 경우, the sequence() helper function을 사용하여 이들을 체인화할 수 있습니다:
이제 locals 객체에서 Logto 클라이언트에 접근할 수 있습니다. TypeScript의 경우, app.d.ts에 타입을 추가할 수 있습니다:
user 객체에 대해 나중에 이야기하겠습니다.
Logto 콘솔의 애플리케이션 세부 정보 페이지로 전환합니다. 리디렉션 URI http://localhost:3000/callback을 추가합니다.
리디렉션 URI는 인증 후 리디렉션할 위치를 나타내는 OAuth 2.0 개념입니다.
마찬가지로, "로그아웃 후 리디렉션 URI" 섹션에 http://localhost:3000/을 추가합니다.
로그아웃 후 리디렉션 URI는 로그아웃 후 리디렉션할 위치를 나타내는 OAuth 2.0 개념입니다.
그런 다음 "저장"을 클릭하여 변경 사항을 저장합니다.
앱으로 돌아와서 로그인 및 로그아웃을 구현하려는 페이지에서 다음 액션을 정의합니다:
그런 다음 이러한 액션을 Svelte 컴포넌트에서 사용합니다:
사용자의 정보를 표시하기 위해, locals.user 객체를 레이아웃에 주입하여 모든 페이지에서 사용 가능하게 만듭니다:
Svelte 컴포넌트에서는 다음과 같은 형태로 사용합니다:
이제 애플리케이션을 실행하고 Logto로 로그인/로그아웃을 시도할 수 있습니다:
통합 중 문제가 발생하면 Discord 서버에 가입하여 커뮤니티 및 Logto 팀과 채팅하십시오!