엑솔라 계정을 통해 사용자 인증을 통합하는 방법

작동 방식

엑솔라 지갑에서 엑솔라 계정으로 사용자 인증을 추가할 수 있습니다.

사용자 시나리오

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

1. 로그인 위젯에서 엑솔라로 로그인 버튼을 클릭하여 모달 창에서 엑솔라 지갑 인증 페이지를 여는 방법:
   1. 사용자가 로그인 위젯에서 엑솔라로 로그인 버튼을 클릭합니다.
   2. 모달 창에서 열리는 엑솔라 지갑 인증 화면으로 리디렉션됩니다.
   3. 사용자가 엑솔라 지갑에서 인증 절차를 완료합니다.
   4. 사용자가 퍼블리셔 계정의 콜백 URL 필드에 지정된 URL의 페이지로 리디렉션됩니다.

2. 로그인 위젯에서 엑솔라로 로그인 버튼을 클릭하여 엑솔라 지갑 인증 페이지로 리디렉션하는 방법:
   1. 사용자가 로그인 위젯에서 엑솔라로 로그인 버튼을 클릭합니다.
   2. 사용자가 같은 창에서 열리는 엑솔라 지갑 인증 화면으로 리디렉션됩니다.
   3. 사용자가 엑솔라 지갑에서 인증 절차를 완료합니다.
   4. 사용자가 퍼블리셔 계정의 콜백 URL 필드에 지정된 URL의 페이지로 리디렉션됩니다.

3. 웹 사이트의 버튼을 클릭하여 팝업 창에서 엑솔라 지갑 인증 페이지로 리디렉션하는 방법:
   1. 사용자가 웹 사이트에서 버튼을 클릭합니다.
   2. 사용자가 팝업 창에서 열리는 엑솔라 지갑 인증 화면으로 리디렉션됩니다.
   3. 사용자가 엑솔라 지갑에서 인증 절차를 완료합니다.
   4. 사용자가 퍼블리셔 계정의 콜백 URL 필드에 지정된 URL의 페이지로 리디렉션됩니다.

획득 방법

엑솔라를 통한 인증을 소셜 네트워크로 통합하는 방법:

1. 엑솔라 계정 OAuth 2.0 클라이언트를 생성합니다.
2. 로그인 위젯을 통합합니다.
3. 엑솔라를 소셜 네트워크로 활성화합니다.
4. 사용자 인증 토큰 검색을 구현합니다.

엑솔라 계정 OAuth 2.0 클라이언트 생성

1. 퍼블리셔 계정에서 프로젝트를 생성합니다.
2. 퍼블리셔 계정에서 로그인 프로젝트를 설정합니다.
3. 계정 관리자에게 연락하거나 csm@xsolla.com으로 이메일을 보내 다음 정보를 제공합니다.

4. 엑솔라 통합팀은 엑솔라 계정 OAuth 2.0 클라이언트를 생성하고 식별자와 비밀 키를 제공합니다. 이 데이터는 사용자 인증 토큰 획득에 필요합니다.

로그인 위젯 통합

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

1. 퍼블리셔 페이지에서 프로젝트를 열고 로그인 섹션으로 이동합니다.
2. 로그인 프로젝트 창에서 구성을 클릭합니다.
3. 인증 섹션으로 이동한 후 소셜 로그인 섹션을 선택합니다.
4. 소셜 네트워크 목록에서 엑솔라를 선택합니다.

5. ⚙ 아이콘을 클릭한 후 설정을 선택합니다.
6. 다음 필드에 값을 입력합니다.
   • 애플리케이션 ID - 엑솔라에서 받은 엑솔라 계정 OAuth 2.0 클라이언트 식별자
   • 애플리케이션 비밀 키 - 엑솔라에서 받은 엑솔라 계정 OAuth 2.0 키
   • 웹 사이트 링크 - 인증 토큰에 대한 인증 코드 교환 요청이 전송될 웹 사이트. 엑솔라 계정 Oauth 2.0 클라이언트를 생성할 때 잠재 고객(Audience) 매개변수로 지정한 것과 동일한 URL 주소를 지정합니다

7. 연결을 클릭합니다.

8. 사용자 시나리오 중 하나를 설정합니다.
   • 로그인 위젯(기본값)에서 엑솔라로 로그인 버튼을 클릭하여 엑솔라 지갑 인증 페이지로 리디렉션하는 방법:
     1. 인증 섹션으로 이동하여 콜백 URL 섹션을 선택합니다.
     2. 콜백 URL 필드에 인증 후 사용자가 리디렉션될 페이지의 URL 주소를 입력합니다.
     3. 로그인 위젯 코드의 callbackUrl 매개 변수에 인증 후 사용자가 리디렉션될 페이지의 URL 주소를 전달합니다.

위젯 코드 예시::

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

1. • 웹 사이트의 버튼을 클릭하여 팝업 창에서 엑솔라 지갑 인증 페이지로 리디렉션합니다.
     1. 탐색 페이지에서 인증 섹션으로 이동한 후 콜백 URL 섹션을 선택합니다.
     2. 콜백 URL 섹션에 다음 URL이 추가되었는지 확인합니다.
        • https://login-widget.xsolla.com/latest/babka-auth-succeed
        • https://login.xsolla.com/api/social/oauth2/callback
     3. 로그인 위젯 코드에서 babkaLoginPopup 매개 변수에 true 값을 전달하고, callbackUrl 매개 변수에 인증 후 사용자가 리디렉션될 페이지의 URL 주소를 전달합니다.

위젯 코드 예시::

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

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

엑솔라로 로그인 버튼 코드 예시:

<div id="xl_auth"></div>
<button onclick="xl.open()">Babka Login Popup</button>

1. • 로그인 위젯에서 엑솔라로 로그인 버튼을 클릭하여 모달 창에서 엑솔라 지갑 인증 페이지를 여는 방법:
     1. 인증 섹션으로 이동하여 콜백 URL 섹션을 선택합니다.
     2. 콜백 URL 필드에서 인증 후 사용자가 리디렉션될 페이지의 URL 주소를 입력합니다.
     3. 로그인 위젯의 코드에서 babkaLoginFlow 매개 변수에 popup 값을 전달하고 callbackUrl 매개 변수에 인증 후 사용자가 리디렉션될 페이지의 URL 주소를 전달합니다.

위젯 코드 예시::

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

사용자 인증 토큰 가져오기

엑솔라 측에서 인증이 완료되면 사용자는 callback_url 매개 변수에서 지정된 URL로 리디렉션됩니다. 사용자 인증 토큰은 token 매개 변수로 전달됩니다.

엑솔라 로그인 JWT 토큰에 엑솔라 계정 OAuth JWT 토큰을 임베딩하는 방법:

1. 퍼블리셔 페이지에서 프로젝트를 연 후 로그인 섹션으로 이동합니다.
2. 로그인 프로젝트 창에서 구성을 클릭합니다.
3. 인증 섹션으로 이동한 후 소셜 로그인 섹션을 선택합니다.

4. 소셜 네트워크 JWT 임베드 토큰 트리거를 On(켜기)로 설정합니다.
5. 변경 사항 저장을 클릭합니다.