한국어
Logto를 위한 웹 SDK를 몇 분 만에 만드는 법
'@logto/browser'를 사용하여 Logto용 사용자 정의 SDK를 만드는 방법에 대해 알아봅니다.
Sijie
Developer
Developer
'@logto/browser'를 사용하여 Logto용 사용자 정의 SDK를 만드는 방법에 대해 알아봅니다.
Logto는 오픈 소스 인증 플랫폼으로, 다양한 프레임워크와 플랫폼에 대한 통합을 단순화하도록 설계된 공식 SDK의 다양함을 제공합니다. 그러나 여전히 공식 SDK가 없는 플랫폼도 많습니다.
이 간격을 메우기 위해, Logto는 개발자가 특정 요구 사항에 맞는 사용자 정의 SDK를 만드는 데 도움이 되는 기본 패키지 '@logto/browser'를 제공합니다. 이 패키지는 JavaScript를 지원하고 브라우저 환경에서 실행되는 한, 특정 프레임워크나 플랫폼에서 분리된 Logto의 핵심 기능을 구현합니다.
이 가이드에서는 '@logto/browser'를 사용하여 React SDK를 만드는 단계를 안내하고, 이 SDK는 로그인 플로우를 구현할 것입니다. 브라우저에서 실행되는 다른 JavaScript 기반 플랫폼에 대한 SDK를 만들기 위해 동일한 단계를 따를 수 있습니다.
시작하기 전에, 우리는 Logto의 로그인 플로우를 이해해야 합니다. 로그인 플로우는 다음과 같은 단계로 구성됩니다:
'@logto/browser' 패키지는 Logto의 핵심 기능을 제공하는 'LogtoClient' 클래스를 공개합니다. 로그인 플로우에 대한 메소드가 포함됩니다:
SDK에서는 'useLogto'와 'useHandleSignInCallback' 두 가지 훅스를 제공하며, 'LogtoProvider' 컴포넌트와 함께 제공됩니다:
SDK를 사용하려면, 'LogtoProvider' 컴포넌트로 앱을 감싸고, 훅을 사용하여 인증 상태를 확인하고, 로그인하고, 콜백을 처리할 수 있습니다.
먼저, npm 또는 다른 패키지 관리자를 사용하여 '@logto/browser' 패키지를 설치합니다:
공급자의 컨텍스트를 정의하고, 이는 3부분으로 구성됩니다:
'context.tsx'라는 새 파일을 만들고 다음 코드를 작성합니다:
컨텍스트가 준비되었으므로, 이제 공급자를 구현해 봅시다. 공급자는 LogtoClient 인스턴스를 초기화하고, 사용자가 인증되었는지 확인하며, 그 컨텍스트를 자식에게 제공합니다.
'provider.tsx'라는 새 파일을 만듭니다:
이제, 훅을 구현합시다.
'hooks.ts'라는 새 파일을 만들고 다음 코드를 작성합니다:
이제, Logto를 위한 React SDK를 만들었습니다. 앱에서 'LogtoProvider' 컴포넌트로 앱을 감싸고, 인증 상태를 확인하고, 로그인하고, 콜백을 처리하는 데 훅을 사용하여 이를 사용할 수 있습니다. 공식 React 샘플 프로젝트를 확인하려면 여기를 방문하십시오.
이 가이드에서는 Logto를 위한 React SDK를 만드는 단계를 보여주었습니다. 여기 제공된 SDK는 기본적인 예제입니다. 앱의 요구 사항을 충족시키기 위해 더 많은 메소드와 기능을 추가하여 확장할 수 있습니다.
브라우저에서 실행되는 다른 JavaScript 기반 플랫폼에 대한 SDK를 만들기 위해 같은 단계를 따를 수 있습니다.
자료: