한국어
Logto로 Angular 인증 구축하기
Angular OIDC 클라이언트 라이브러리를 통합하여 Angular로 사용자 인증 흐름을 구축하는 방법을 배우세요.
Gao
Founder
Founder
Angular OIDC 클라이언트 라이브러리를 통합하여 Angular로 사용자 인증 흐름을 구축하는 방법을 배우세요.
이 튜토리얼에서는 Logto SDK를 통합하여 Angular로 사용자 인증 흐름을 구축하는 방법을 보여줍니다. 튜토리얼에서는 프로그래밍 언어로 TypeScript를 사용합니다.
시작하기 전에 다음을 확인하십시오:
시작하려면 "단일 페이지 앱" 유형의 Logto 애플리케이션을 만드십시오. Logto 애플리케이션을 만드는 단계는 다음과 같습니다:
그런 다음 Angular 애플리케이션과 Logto SDK를 통합하는 과정을 안내하는 대화형 가이드를 볼 수 있습니다. 다음 내용은 향후 참고 자료로 사용할 수 있습니다.
Logto JS 코어 SDK 및 Angular OIDC 클라이언트 라이브러리 설치:
Angular 프로젝트에서 app.config.ts에 인증 공급자를 추가하세요:
Logto 콘솔의 애플리케이션 세부 정보 페이지로 전환합니다. 리디렉션 URI http://localhost:3000/callback을 추가합니다.
리디렉션 URI는 인증 후 리디렉션할 위치를 나타내는 OAuth 2.0 개념입니다.
마찬가지로, "로그아웃 후 리디렉션 URI" 섹션에 http://localhost:3000/을 추가합니다.
로그아웃 후 리디렉션 URI는 로그아웃 후 리디렉션할 위치를 나타내는 OAuth 2.0 개념입니다.
그런 다음 "저장"을 클릭하여 변경 사항을 저장합니다.
로그인 및 로그아웃을 구현할 컴포넌트(예: app.component.ts)에서 OidcSecurityService를 주입하고 이를 사용하여 로그인 및 로그아웃을 수행합니다.
그리고 템플릿에 로그인 및 로그아웃 버튼을 추가하세요:
OidcSecurityService는 인증 상태를 구독할 수 있는 편리한 방법을 제공합니다:
템플릿에서 이를 사용하세요:
이제 애플리케이션을 실행하고 Logto로 로그인/로그아웃을 시도할 수 있습니다:
통합 중 문제가 발생하면 Discord 서버에 가입하여 커뮤니티 및 Logto 팀과 채팅하십시오!