자체 인증 시스템을 사용하는 경우, 이 단계에서는 정기 결제 관리를 위해 엑솔라가 요구하는 다음과 같은 데이터를 저장하고 전달할 수 있도록만 하면 됩니다:

• 고유 사용자 ID
• 사용자의 이메일

이 경우 웹샵 템플릿을 사용하여 웹 사이트를 생성하고 ID 또는 딥 링크를 통해 사용자 인증을 설정하는 것이 좋습니다.

이렇게 하려면 다음을 수행합니다:

1. 관리자 페이지에서 프로젝트를 열고 스토어프런트 > 웹 사이트 섹션으로 이동합니다.
2. 사이트 생성을 클릭합니다.
3. 웹샵 템플릿을 선택합니다.
4. 게임이 제공되는 외부 플랫폼의 URL을 추가합니다. 이렇게 하면 게임 스타일의 페이지를 빠르게 생성할 수 있습니다: 이미지, 게임 타이틀, 개발자 정보 및 색상 구성이 페이지에 자동으로 추가됩니다. 게임 데이터를 사용하지 않으려면 앱 스토어 또는 Google Play URL을 통해 게임 정보 복사 토글을 비활성화하십시오.

5. 웹샵 솔루션 생성을 클릭합니다.

6. 다음 사용자 인증 옵션 중 하나를 설정합니다:

   • 사용자 ID 인증
   • 사용자 ID 및 딥 링크 인증
   • 딥 링크 인증
   • 연결된 사용자 ID를 통한 엑솔라 로그인 인증

관리자 페이지에서 사용자 인증 설정

엑솔라를 사용하면 다양한 사용자 인증 방법을 구성할 수 있습니다. 이 가이드에는 기성 위젯을 사용하여 일회성 코드 또는 소셜 네트워크를 통해 사용자를 인증하는 가장 빠른 통합 및 구성 방법에 대한 지침이 포함되어 있습니다.

나중에 사용자 인증 방법을 변경하거나 다른 연동 옵션을 사용할 수 있습니다.

엑솔라는 표준 위젯 템플릿을 제공합니다. 위젯의 외관과 콘텐츠는 프로젝트에서 선택한 로그인 메서드와 관리자 페이지의 위젯 맞춤 설정에 따라 결정됩니다.

일회용 코드를 사용하거나 소셜 네트워크를 통한 인증을 위한 표준 위젯 보기:

관리자 페이지에서 사용자 인증을 설정하는 방법:

1. 관리자 페이지에서 프로젝트를 열고 플레이어 > 로그인 섹션으로 이동합니다.
2. 대시보드 섹션에서 로그인 프로젝트 생성을 클릭합니다.
3. 표준 로그인 프로젝트를 선택하고 생성 및 설정을 클릭합니다. 새 로그인 프로젝트가 생성될 때까지 기다립니다. 그러면 로그인 프로젝트 페이지가 표시됩니다.
4. 로그인 메서드 블록에서 암호를 사용하지 않고 로그인을 선택합니다.
5. 구성을 클릭합니다.
6. 일회용 코드를 사용하여 인증 설정:
   1. 비밀번호 없는 로그인 블록에서, 콜백 URL을 선택합니다.
   2. 콜백 URL 입력란에 사용자가 인증에 성공한 후 리디렉션되는 URL을 추가합니다.
   3. 변경 내용 저장을 클릭합니다.
7. 소셜 네트워크를 통한 인증 설정(선택 사항):
   1. 브레드크럼 경로에서 로그인 프로젝트 이름을 클릭하면 로그인 프로젝트 페이지로 돌아갑니다.
   2. 인증블록으로 이동하고 소셜 로그인을 선택합니다.
   3. 사용자가 애플리케이션에 가입하고 로그인하는 데 사용할 수 있는 소셜 네트워크를 연결합니다:

1. 1. • 원하는 소셜 네트워크를 연결하려면 ⚙ 아이콘을 클릭하고 연결을 선택합니다.

1. 1. • 러 개의 SNS를 동시에 연결하려면 필요한 패널을 선택합니다(테두리가 녹색으로 변합니다). 그런 다음, 관리 드롭다운 메뉴에서, 연결을 선택합니다.

1. 1. • 사용 가능한 모든 SNS를 한 번에 연결하려면 모두 선택을 클릭합니다. 그런 다음, 관리 드롭 다운 메뉴에서, 연결을 선택합니다.

1. 4. 변경 사항 저장을 클릭합니다.

위젯 설정을 테스트할 수 있습니다. 이렇게 하려면 화면 왼쪽에서 지금 확인을 클릭하고 로그인합니다.

통합 과정에서 로그인 프로젝트 ID가 필요합니다. 해당 ID는 관리자 페이지의 프로젝트 내 플레이어 > 로그인 > 대시보드 섹션에서 확인할 수 있습니다.

애플리케이션에 사용자 인증 구현

아래에서 엑솔라 로그인을 가장 빠르게 통합하는 방법, 즉 기성 웹 위젯을 애플리케이션에 통합하는 방법에 대한 지침을 확인할 수 있습니다.

자체 UI를 사용하여 사용자를 애플리케이션에 로그인하려면 로그인 API 또는 SDK 메서드를 사용하여 사용자 인증 로직을 구현해야 합니다.

엑솔라 로그인 위젯 SDK 연결

엑솔라 로그인 위젯은 HTML 페이지에서 NPM 패키지 관리자 또는 <script> 태그를 사용하여 설치하는 데 사용할 수 있습니다.

다음 방법 중 하나로 엑솔라 로그인 위젯 SDK를 연결합니다:

1npm i @xsolla/login-sdk

1<script src="https://login-sdk.xsolla.com/latest/">
2</script>

엑솔라 로그인 위젯 SDK 초기화

아래 메서드 중 하나를 사용하여 위젯을 초기화합니다. 다음 매개 변수를 지정합니다.

• projectId - 로그인 프로젝트 ID. 관리자 페이지의 플레이어 > 로그인 > 대시보드 섹션에 있는 프로젝트에서 찾을 수 있습니다.
• preferredLocale - 인터페이스 언어. 다음 언어가 지원됩니다. 아랍어(ar_AE), 불가리아어(bg_BG), 체코어(cz_CZ), 영어(en_US), 독일어(de_DE), 스페인어(es_ES), 프랑스어(fr_FR), 히브리어(he_IL), 이탈리아어(it_IT), 일본어(ja_JP), 한국어(ko_KR), 폴란드어(pl_PL), 포르투갈어(pt_BR), 로마니아어(ro_RO), 러시아어(ru_RU), 태국어(th_TH), 터키어(tr_TR), 베트남어(vi_VN), 중국어 간체(zh_CN), 중국어 번체(zh_TW).
• clientId - OAuth 2.0 클라이언트 ID. 관리자 페이지의 플레이어 > 로그인 > 로그인 프로젝트 > 보안 > OAuth 2.0 섹션에 있는 프로젝트에서 찾을 수 있습니다.
• redirectUri - 사용자가 계정을 확인하거나 로그인하거나 암호 재설정을 확인한 후 리디렉션되는 URL. OAuth 2.0 클라이언트 설정의 관리자 페이지에 지정해야 합니다.

나머지 매개 변수는 변경하지 말고 그대로 둡니다.

 1import { Widget } from '@xsolla/login-sdk';
 2const xl = new Widget({
 3  projectId: 'LOGIN_PROJECT_ID',
 4  preferredLocale: 'en_US'
 5  clientId: 'CLIENT_ID',
 6  responseType: 'code',
 7  state: 'CUSTOM_STATE',
 8  redirectUri: 'REDIRECT_URI',
 9  scope: 'SCOPE'
10});

 1<script>
 2const xl = new XsollaLogin.Widget({
 3  projectId: 'LOGIN_PROJECT_ID',
 4  preferredLocale: 'en_US',
 5  clientId: 'CLIENT_ID',
 6  responseType: 'code',
 7  state: 'CUSTOM_STATE',
 8  redirectUri: 'REDIRECT_URI',
 9  scope: 'SCOPE'
10});
11</script>

엑솔라 로그인 위젯 열기 추가

1. on-click 이벤트 및 xl.open() 함수가 있는 버튼을 HTML 페이지에 추가합니다:

1<div id="xl_auth" style="display: none"></div>
2<button onclick="showFullscreen()">Fullscreen widget</button>

2. 코드를 추가하여 HTML 페이지의 <div> 블록에서 위젯을 엽니다.

1xl.mount('xl_auth');
2const showFullscreen = () => {
3  const myDiv = document.querySelector('#xl_auth');
4  myDiv.style.display = 'block';
5  xl.open();
6}

 1<script type="text/javascript">
 2  xl.mount('xl_auth');
 3
 4  function showFullscreen() {
 5    const myDiv = document.querySelector('#xl_auth');
 6    myDiv.style.display = 'block';
 7
 8    xl.open();
 9  }
10</script>

관리자 페이지에서 사용자 인증 설정

엑솔라를 사용하면 다양한 사용자 인증 방법을 구성할 수 있습니다. 이 가이드에는 일회성 코드 또는 소셜 네트워크를 통해 사용자를 인증하는 가장 빠른 구성 방법에 대한 지침이 포함되어 있습니다.

나중에 사용자 인증 방법을 변경할 수 있습니다.

관리자 페이지에서 사용자 인증을 설정하는 방법:

1. 관리자 페이지에서 프로젝트를 열고 플레이어 > 로그인 섹션으로 이동합니다.
2. 대시보드 섹션에서 로그인 프로젝트 생성을 클릭합니다.
3. 표준 로그인 프로젝트를 선택하고 생성 및 설정을 클릭합니다. 새 로그인 프로젝트가 생성될 때까지 기다립니다. 그러면 로그인 프로젝트 페이지가 표시됩니다.
4. 로그인 메서드 블록에서 암호를 사용하지 않고 로그인을 선택합니다.
5. 구성을 클릭합니다.
6. 일회용 코드를 사용하여 인증 설정:
   1. 비밀번호 없는 로그인 블록에서, 콜백 URL을 선택합니다.
   2. 콜백 URL 입력란에 사용자가 인증에 성공한 후 리디렉션되는 URL을 추가합니다.
   3. 변경 내용 저장을 클릭합니다.
7. 소셜 네트워크를 통한 인증 설정(선택 사항):
   1. 브레드크럼 경로에서 로그인 프로젝트 이름을 클릭하면 로그인 프로젝트 페이지로 돌아갑니다.
   2. 인증블록으로 이동하고 소셜 로그인을 선택합니다.
   3. 사용자가 애플리케이션에 가입하고 로그인하는 데 사용할 수 있는 소셜 네트워크를 연결합니다:

1. 1. • 원하는 소셜 네트워크를 연결하려면 ⚙ 아이콘을 클릭하고 연결을 선택합니다.

1. 1. • 러 개의 SNS를 동시에 연결하려면 필요한 패널을 선택합니다(테두리가 녹색으로 변합니다). 그런 다음, 관리 드롭다운 메뉴에서, 연결을 선택합니다.

1. 1. • 사용 가능한 모든 SNS를 한 번에 연결하려면 모두 선택을 클릭합니다. 그런 다음, 관리 드롭 다운 메뉴에서, 연결을 선택합니다.

1. 4. 변경 사항 저장을 클릭합니다.

웹사이트 빌더에서 사용자 인증 설정

사이트 생성 및 사용자 인증 설정 방법:

1. 관리자 페이지에서 프로젝트를 열고 스토어프런트 > 웹 사이트 섹션으로 이동합니다.
2. 사이트 생성을 클릭합니다.
3. 사이트 템플릿을 선택하고 사이트 생성을 진행합니다.

4. 빌더에서 로그인 설정 > 엑솔라 로그인 섹션으로 이동한 다음 드롭다운 목록에서 사전에 구성된 인증 옵션을 선택하십시오.
5. 사이트의 색상 구성과 일치하도록 인증 모달 창을 설정하려면 사이트 테마 사용 토글을 활성화하십시오(권장).
6. 레이아웃 섹션에서 필요한 경우 로고와 사용자 정의 배경을 구성하십시오.