Logto를 위한 웹 SDK를 몇 분 만에 만드는 법

Logto는 오픈 소스 인증 플랫폼으로, 다양한 프레임워크와 플랫폼에 대한 통합을 단순화하도록 설계된 공식 SDK의 다양함을 제공합니다. 그러나 여전히 공식 SDK가 없는 플랫폼도 많습니다.

이 간격을 메우기 위해, Logto는 개발자가 특정 요구 사항에 맞는 사용자 정의 SDK를 만드는 데 도움이 되는 기본 패키지 '@logto/browser'를 제공합니다. 이 패키지는 JavaScript를 지원하고 브라우저 환경에서 실행되는 한, 특정 프레임워크나 플랫폼에서 분리된 Logto의 핵심 기능을 구현합니다.

이 가이드에서는 '@logto/browser'를 사용하여 React SDK를 만드는 단계를 안내하고, 이 SDK는 로그인 플로우를 구현할 것입니다. 브라우저에서 실행되는 다른 JavaScript 기반 플랫폼에 대한 SDK를 만들기 위해 동일한 단계를 따를 수 있습니다.

로그인 플로우#

시작하기 전에, 우리는 Logto의 로그인 플로우를 이해해야 합니다. 로그인 플로우는 다음과 같은 단계로 구성됩니다:

1. Logto로 리다이렉션: 사용자가 Logto 로그인 페이지로 리다이렉션됩니다.
2. 인증: 사용자가 자신의 자격 증명을 입력하고 Logto로 인증합니다.
3. 앱으로 다시 리다이렉션: 인증에 성공하면, 사용자는 인증 코드와 함께 앱으로 다시 리다이렉션됩니다.
4. 코드 교환: 앱이 인증 코드를 토큰으로 교환합니다.

'@logto/browser'의 간략한 소개#

'@logto/browser' 패키지는 Logto의 핵심 기능을 제공하는 'LogtoClient' 클래스를 공개합니다. 로그인 플로우에 대한 메소드가 포함됩니다:

1. 'signIn()': OIDC 인증 URL을 생성하고 이 URL로 리다이렉션합니다.
2. 'handleSignInCallback()': 콜백 URL을 확인하고 분석하며, 인증 코드를 추출한 다음, 토큰 엔드포인트를 호출하여 코드를 토큰으로 교환합니다.
3. 'isAuthenticated()': 사용자가 인증되었는지 확인합니다.

React SDK 만들기#

SDK에서는 'useLogto'와 'useHandleSignInCallback' 두 가지 훅스를 제공하며, 'LogtoProvider' 컴포넌트와 함께 제공됩니다:

1. 'useLogto': 로그인 플로우를 트리거하는 'signIn' 메소드와 사용자가 인증되었는지 확인하는 'isAuthenticated' 상태를 제공하는 훅입니다.
2. 'useHandleSignInCallback': 콜백 URL을 처리하고 인증 코드를 토큰으로 교환하여 로그인 플로우를 완료하는 훅입니다.

SDK를 사용하려면, 'LogtoProvider' 컴포넌트로 앱을 감싸고, 훅을 사용하여 인증 상태를 확인하고, 로그인하고, 콜백을 처리할 수 있습니다.

Step 1: 패키지 설치#

먼저, npm 또는 다른 패키지 관리자를 사용하여 '@logto/browser' 패키지를 설치합니다:

Step 2: React의 컨텍스트 정의#

공급자의 컨텍스트를 정의하고, 이는 3부분으로 구성됩니다:

1. 공급자에서 초기화될 'LogtoClient' 인스턴스이며, 이는 훅에서 사용됩니다.
2. 인증 상태입니다.
3. 인증 상태를 설정하는 방법입니다.

'context.tsx'라는 새 파일을 만들고 다음 코드를 작성합니다:

Step 3: 공급자 구현#

컨텍스트가 준비되었으므로, 이제 공급자를 구현해 봅시다. 공급자는 LogtoClient 인스턴스를 초기화하고, 사용자가 인증되었는지 확인하며, 그 컨텍스트를 자식에게 제공합니다.

'provider.tsx'라는 새 파일을 만듭니다:

Step 4: 훅 구현#

이제, 훅을 구현합시다.

• 'useLogto': 이 훅에서는 컨텍스트를 사용하여 'LogtoClient' 인스턴스를 가져오고, 'signIn' 메소드와 'isAuthenticated' 상태를 제공합니다. 여기에 더 많은 메소드를 추가할 수 있습니다.
• 'useHandleSignInCallback': 이 훅은 브라우저에서 콜백 URL을 읽어, 인증 코드를 추출하고, 이를 토큰으로 교환합니다. 인증이 완료되면 인증 상태를 'true'로 설정합니다.

'hooks.ts'라는 새 파일을 만들고 다음 코드를 작성합니다:

체크포인트: SDK 사용#

이제, Logto를 위한 React SDK를 만들었습니다. 앱에서 'LogtoProvider' 컴포넌트로 앱을 감싸고, 인증 상태를 확인하고, 로그인하고, 콜백을 처리하는 데 훅을 사용하여 이를 사용할 수 있습니다. 공식 React 샘플 프로젝트를 확인하려면 여기를 방문하십시오.

결론#

이 가이드에서는 Logto를 위한 React SDK를 만드는 단계를 보여주었습니다. 여기 제공된 SDK는 기본적인 예제입니다. 앱의 요구 사항을 충족시키기 위해 더 많은 메소드와 기능을 추가하여 확장할 수 있습니다.

브라우저에서 실행되는 다른 JavaScript 기반 플랫폼에 대한 SDK를 만들기 위해 같은 단계를 따를 수 있습니다.

자료:

1. Logto 브라우저 SDK
2. Logto React SDK