한국어

social
connector
passwordless
sign-in
oauth
auth
integration

Logto를 위한 소셜 커넥터 제작

몇 가지 단계만으로 Logto를 위한 맞춤형 소셜 커넥터를 만드는 방법을 알아보세요.

Charles

Developer

6/18/2024

사용자 인증에 몇 주를 낭비하지 마세요

Logto로 더 빠르게 안전한 앱을 출시하세요. 몇 분 만에 사용자 인증을 통합하고 핵심 제품에 집중하세요.

시작하기

배경

소셜 로그인은 현대 애플리케이션에서 필수 요소입니다. 사용자 등록 과정을 단순화하고 사용자 경험을 향상시키며 사용자 참여 및 전환율을 높여줍니다. Logto에서는 소셜 커넥터를 사용하여 외부 소셜 아이덴티티 제공자와 함께 로그인합니다.

"커넥터"란 무엇인가?

커넥터는 Logto와 외부 서비스를 연결하는 작은 프로그램입니다. 이 프로그램은 로그인 흐름을 처리하고, 토큰을 교환하며, 외부 서비스에서 사용자 정보를 가져오는 역할을 합니다.

Logto는 다양한 소셜 플랫폼과의 통합을 단순화하기 위해 설계된 공식 커넥터 세트를 제공합니다. 오늘날까지 총 30개 이상의 커넥터가 있으며, 그중 10개 이상의 커넥터는 오픈 소스 커뮤니티에서 기여한 것입니다. 향후 이러한 숫자는 빠르게 증가할 것으로 기대됩니다.

하지만, 아직 Logto가 공식 지원하지 않는 많은 다른 플랫폼이 존재한다는 것을 알고 있습니다. 다행히도 오픈 소스 플랫폼이기 때문에, 언제든지 쉽게 자신의 맞춤형 커넥터를 만들 수 있습니다. 따라서 이번 포스트에서는 몇 가지 단계만으로 Logto를 위한 맞춤형 소셜 커넥터를 만드는 방법을 안내드리겠습니다.

로그인 흐름

시작하기 전에, Logto에서 소셜 로그인 흐름이 어떻게 작동하는지 이해해봅시다.

이제 시작해봅시다

가장 빠르게 시작하는 방법은 기존의 공식 커넥터 코드를 복사한 후 요구에 맞게 수정하는 것입니다. GitHub 커넥터를 예로 들어보겠습니다.

1단계: 기존 커넥터 패키지 클론

커넥터 소스 폴더에서는 다음 파일들을 찾을 수 있습니다:

index.ts: 커넥터의 메인 엔트리 파일.
constant.ts: 커넥터에서 사용되는 상수들.
types.ts: 커넥터에서 사용되는 TypeScript 타입들.
index.test.ts: 커넥터의 테스트 케이스.
mock.ts: 커넥터 테스트 케이스에서 사용되는 모의 데이터.

이 파일들 외에도 커넥터를 설명하는 README.md 파일, 더 나은 다크 모드 사용자 경험을 위해 선택적으로 logo-dark.svg 파일을 제공할 수 있는 logo.svg 파일, 그리고 npm 패키지 정보를 정의하는 package.json 파일이 필요합니다.

2단계: 메인 엔트리 파일 수정 (index.ts)

index.ts 파일에서 대부분의 커넥터 로직을 찾을 수 있습니다. 일반적으로 구현해야 할 4가지 함수가 있습니다:

getAuthorizationUri: 외부 소셜 플랫폼에 대한 승인 URI를 생성합니다. GitHub의 경우 https://github.com/login/oauth/authorize?client_id={clientId}&redirect_uri={redirectUri}&state={state}가 됩니다. 목표 소셜 플랫폼의 개발자 문서를 참조하여 올바른 URI를 가져오세요.
authorizationCallbackHandler: 승인 콜백 URI에서 반환된 매개변수 값을 보호하고 승인 코드를 추출하며 잠재적 오류를 처리합니다.
getAccessToken: 승인 코드를 접근 토큰으로 교환합니다.
getUserInfo: 접근 토큰으로 외부 소셜 플랫폼에서 사용자 정보를 가져옵니다.

대부분의 공통 로직은 Logto 커넥터 키트에서 처리되므로 작업이 더 쉬워질 것입니다.

마지막으로, 파일의 끝 부분에서는 GitHub 커넥터와 동일한 코드 구조를 따르며 커넥터 객체를 내보내기만 하면 됩니다.

3단계: 커넥터 테스트

단위 테스트

먼저 몇 가지 단위 테스트 케이스를 작성하고 기본 기능이 예상대로 작동하는지 확인하세요.

로컬 테스트

로컬 환경에서 Logto 설정: Logto는 로컬에서 실행할 수 있는 여러 가지 방법을 제공합니다. CLI를 사용하거나 도커를 이용하거나 심지어 소스 코드에서 빌드할 수도 있습니다. 자세한 내용은 문서를 확인하세요.
커스텀 커넥터를 Logto 인스턴스에 연결하세요: CLI를 사용하여 커넥터의 심볼릭 링크를 Logto 인스턴스에 생성하세요. 자세한 내용을 참조하세요.
커넥터를 연결한 후, <logto-root-path>/packages/core/connectors 폴더에서 커넥터를 확인할 수 있습니다.
Logto 인스턴스를 다시 시작하고, Logto 관리 콘솔로 이동하여 소셜 커넥터 목록에서 해당 커넥터를 확인할 수 있습니다.
"로그인 경험" -> "회원 가입 및 로그인" -> "소셜 로그인"에서 커넥터를 설정하세요. 그리고 우리의 데모 앱에서 "라이브 미리보기" 기능으로 시도해 보세요.

4단계 (선택): 커넥터 공개

커넥터를 NPM에 게시하고 커뮤니티와 공유할 수 있으며, PR을 올려 Logto 공식 GitHub 저장소에 기여하여 공식 지원 커넥터로 만들 수도 있습니다. 공식 커넥터는 Logto 개발 팀에 의해 유지 관리되며 오픈 소스 사용자와 Logto 클라우드 사용자 모두에게 제공됩니다.

요약

Logto를 위한 맞춤형 소셜 커넥터를 만드는 일은 생각만큼 어렵지 않습니다. Logto 커넥터 키트와 좋은 코드 예제를 통해 몇 가지 단계만으로 쉽게 커넥터를 만들 수 있습니다.

그리고 커넥터를 기여함으로써 Logto 가족에 당신이 가져온 소셜 플랫폼을 더 많은 사용자가 즐길 수 있도록 도울 수 있습니다.

Logto Cloud 무료 체험

배경#

"커넥터"란 무엇인가?#

로그인 흐름#

이제 시작해봅시다#

1단계: 기존 커넥터 패키지 클론#

2단계: 메인 엔트리 파일 수정 (index.ts)#

3단계: 커넥터 테스트#

단위 테스트#

로컬 테스트#

4단계 (선택): 커넥터 공개#

요약#

배경#

"커넥터"란 무엇인가?#

로그인 흐름#

이제 시작해봅시다#

1단계: 기존 커넥터 패키지 클론#

2단계: 메인 엔트리 파일 수정 (index.ts)#

3단계: 커넥터 테스트#

단위 테스트#

로컬 테스트#

4단계 (선택): 커넥터 공개#

요약#

배경

"커넥터"란 무엇인가?

로그인 흐름

이제 시작해봅시다

1단계: 기존 커넥터 패키지 클론

2단계: 메인 엔트리 파일 수정 (index.ts)

3단계: 커넥터 테스트

단위 테스트

로컬 테스트

4단계 (선택): 커넥터 공개

요약

배경

"커넥터"란 무엇인가?

로그인 흐름

이제 시작해봅시다

1단계: 기존 커넥터 패키지 클론

2단계: 메인 엔트리 파일 수정 (index.ts)

3단계: 커넥터 테스트

단위 테스트

로컬 테스트

4단계 (선택): 커넥터 공개

요약