엑솔라 계정 로그인 연동 방법

작동 방식

엑솔라 계정을 사용하여 사용자 인증을 추가할 수 있습니다.

사용자 시나리오

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

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 클라이언트 생성

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

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

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

로그인 위젯 통합

SDK를 사용해 로그인 위젯을 통합합니다.

소셜 네트워크로 엑솔라 계정 사용하기

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 필드에서 https://login-widget.xsolla.com/latest/babka-auth-succeed를 입력합니다.
     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. 변경 사항 저장을 클릭합니다.

이 페이지 평가

개선해야 할 점이 있을까요? 전송

답하기 원하지 않습니다

의견을 보내 주셔서 감사드립니다!