엑솔라 ID를 통한 사용자 인증 통합 방법

작동 방식

엑솔라 제품 전반에 걸쳐 원활한 접근을 제공하는 공유 ID 플랫폼인 엑솔라 ID로 사용자 인증을 추가할 수 있습니다.

다음 사용자 시나리오 중 하나를 구현할 수 있습니다:

• 로그인 위젯에서 Log in with Xsolla 버튼을 클릭하여 모달 창에서 엑솔라 ID 인증 페이지 열기:

  1. 사용자가 로그인 위젯에서 Log in with Xsolla 버튼을 클릭합니다.
  2. 사용자가 모달 창에서 열리는 엑솔라 ID 인증 페이지로 리디렉션됩니다.
  3. 사용자가 엑솔라 ID 인증 페이지에서 인증 과정을 완료합니다.
  4. 사용자가 관리자 페이지의 콜백 URL 입력란에 지정된 URL로 리디렉션됩니다.

• 로그인 위젯에서 Log in with Xsolla 버튼을 클릭하여 엑솔라 ID 인증 페이지로 리디렉션:

  1. 사용자가 로그인 위젯에서 Log in with Xsolla 버튼을 클릭합니다.
  2. 사용자가 동일한 창에서 열리는 엑솔라 ID 인증 화면으로 리디렉션됩니다.
  3. 사용자가 엑솔라 ID에서 인증 과정을 완료합니다.
  4. 사용자가 관리자 페이지의 콜백 URL 입력란에 지정된 페이지로 리디렉션됩니다.

• 웹사이트의 버튼을 클릭하여 팝업 창에서 엑솔라 ID 인증 페이지로 리디렉션:

  1. 사용자가 웹사이트의 버튼을 클릭합니다.
  2. 사용자가 팝업 창에서 열리는 엑솔라 ID 인증 페이지로 리디렉션됩니다.
  3. 사용자가 엑솔라 ID 인증 페이지에서 인증 과정을 완료합니다.
  4. 사용자가 관리자 페이지의 콜백 URL 입력란에 지정된 페이지로 리디렉션됩니다.

획득 방법

엑솔라 ID를 통한 소셜 로그인을 통합하려면:

1. 로그인 위젯을 통합합니다.
2. 엑솔라를 소셜 네트워크로 활성화합니다.
3. 사용자 인증 토큰을 가져오는 기능을 구현합니다.

로그인 위젯 통합

엑솔라 로그인 위젯을 애플리케이션에 추가하세요 — 사용자 인증 인터페이스를 제공합니다.

엑솔라를 소셜 네트워크로 활성화

1. 관리자 페이지의 프로젝트에서 플레이어 > 로그인 섹션으로 이동합니다.

2. 로그인 프로젝트의 패널에서 Configure를 클릭합니다.

3. Authentication 블록으로 이동하여 소셜 로그인을 선택합니다.

4. 소셜 네트워크 목록에서 엑솔라를 선택합니다.

5. ⚙ 아이콘을 클릭하고 Connect를 선택합니다.

6. 사용자 시나리오 중 하나를 설정합니다:

   • 동일 창 인증
   • 팝업 창 인증
   • 모달 창 인증

동일 창 인증

사용자가 로그인 위젯에서 Log in with Xsolla 버튼을 클릭한 후 엑솔라 ID 인증 페이지로 리디렉션하려면:

1. Authentication 섹션으로 이동하여 Callback URLs을 클릭합니다.
2. Callback URL 입력란에 인증 후 사용자를 리디렉션할 URL을 입력합니다.
3. 로그인 위젯 코드의 callbackUrl 매개변수에 인증 후 사용자를 리디렉션할 URL을 전달합니다.

위젯 코드 예시:

1import { Widget } from '@xsolla/login-sdk';
2const xl = new Widget({
3  projectId: '[Login ID]',
4  preferredLocale: 'en_US',
5  callbackUrl: '[Your Callback URL]',
6});

팝업 창 인증

사용자가 웹사이트의 버튼을 클릭한 후 팝업 창에서 엑솔라 ID 인증 페이지로 리디렉션하려면:

1. 네비게이션 페이지에서 Authentication 섹션으로 이동하여 Callback URLs을 클릭합니다.
2. Callback URL 섹션에 다음 URL이 추가되어 있는지 확인합니다: https://login.xsolla.com/api/social/oauth2/callback.
3. 로그인 위젯 코드에서 babkaLoginPopup 매개변수에 true 값을 전달하고, 인증 후 사용자를 리디렉션할 URL을 callbackUrl 매개변수에 전달합니다.

위젯 코드 예시:

1import { Widget } from '@xsolla/login-sdk';
2const xl = new Widget({
3  projectId: '[Login ID]',
4  preferredLocale: 'en_US',
5  babkaLoginPopup: true,
6  callbackUrl: '[Your Callback URL]',
7});

4. 웹사이트에 엑솔라 ID 인증 페이지를 여는 버튼을 추가합니다.

Log in with Xsolla 버튼 코드 예시:

1<div id="xl_auth"></div>
2<button onclick="xl.open()">Log in with Xsolla</button>

모달 창 인증

사용자가 로그인 위젯에서 Log in with Xsolla 버튼을 클릭한 후 모달 창에서 엑솔라 ID 인증 페이지로 리디렉션하려면:

1. Authentication 섹션으로 이동하여 Callback URLs을 클릭합니다.
2. Callback URL 입력란에 인증 후 사용자를 리디렉션할 URL을 입력합니다.
3. 로그인 위젯 코드에서 babkaLoginFlow 매개변수에 popup 값을 전달하고, 인증 후 사용자를 리디렉션할 URL을 callbackUrl 매개변수에 전달합니다.

위젯 코드 예시:

1import { Widget } from '@xsolla/login-sdk';
2const xl = new Widget({
3  projectId: '[Login ID]',
4  preferredLocale: 'en_US',
5  babkaLoginFlow: "popup",
6  callbackUrl: '[Your Callback URL]',
7});

사용자 인증 토큰 가져오기

엑솔라 ID 측에서 인증 후 사용자는 callbackUrl 매개변수에 지정된 URL로 리디렉션됩니다. 사용자 인증 토큰은 token 매개변수에 전달됩니다.

엑솔라 로그인 JWT 토큰에 엑솔라 ID OAuth JWT 토큰을 임베드하려면:

1. 관리자 페이지의 프로젝트에서 플레이어 > 로그인 섹션으로 이동합니다.
2. 로그인 프로젝트의 패널에서 Configure를 클릭합니다.
3. Authentication 블록으로 이동하여 소셜 로그인을 선택합니다.
4. 소셜 네트워크 JWT 토큰 임베드 토글을 켭니다.
5. 변경 사항 저장을 클릭합니다.