본문으로 건너뛰기

소셜 커넥터 개발 단계별 가이드

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

1단계: 기존 커넥터 패키지 복제하기​

커넥터 소스 폴더에는 다음과 같은 파일들이 있습니다:

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

이 파일들 외에도 커넥터를 설명하는 README.md 파일, logo.svg (더 나은 다크 모드 사용자 경험을 위해 선택적으로 logo-dark.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 커넥터와 동일한 코드 구조를 따라 커넥터 객체를 내보내기만 하면 됩니다.

const createGithubConnector: CreateConnector<SocialConnector> = async ({ getConfig }) => {
  return {
    metadata: defaultMetadata,
    type: ConnectorType.Social,
    configGuard: githubConfigGuard,
    getAuthorizationUri: getAuthorizationUri(getConfig),
    getUserInfo: getUserInfo(getConfig),
  };
};

3단계: 커넥터 테스트하기​

단위 테스트​

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

로컬 테스트​

  • 로컬 환경에서 Logto 설정하기: Logto는 로컬에서 실행할 수 있는 여러 가지 방법을 제공합니다. CLI, 도커를 사용하거나 소스 코드에서 빌드할 수 있습니다. 자세한 내용을 확인하세요.
  • 사용자 정의 커넥터를 Logto 인스턴스에 연결하기: CLI를 사용하여 커넥터의 심볼릭 링크를 Logto 인스턴스에 생성하세요. 자세한 내용. 
    cd logto
    npx @logto/cli connector link -p .
  • 커넥터를 연결한 후, <logto-root-path>/packages/core/connectors 폴더에서 확인할 수 있습니다.
  • Logto 인스턴스를 재시작하고, Logto 관리자 콘솔로 이동하여 소셜 커넥터 목록에서 확인할 수 있습니다.

  • 콘솔 > 로그인 경험 > 가입 및 로그인

    소셜 로그인에서 커넥터를 구성하세요. 그리고 "라이브 미리보기" 기능을 사용하여 데모 앱에서 시도해보세요.