엑솔라 로그인 위젯 SDK 연결

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

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

npm i @xsolla/login-sdk

<script src="https://login-sdk.xsolla.com/latest/">
</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).
• projectId — OAuth 2.0 클라이언트 ID. 관리자 페이지의 로그인 > 로그인 프로젝트 > 보안 > OAuth 2.0 섹션에 있는 프로젝트에서 찾을 수 있습니다.
• redirectUri — 사용자가 계정을 확인하거나 로그인하거나 암호 재설정을 확인한 후 리디렉션되는 URL. OAuth 2.0 클라이언트 설정의 관리자 페이지에 지정해야 합니다.

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

import { Widget } from '@xsolla/login-sdk';
const xl = new Widget({
  projectId: 'LOGIN_PROJECT_ID',
  preferredLocale: 'en_US'
  clientId: 'CLIENT_ID',
  responseType: 'code',
  state: 'CUSTOM_STATE',
  redirectUri: 'REDIRECT_URI',
  scope: 'SCOPE'
});

<script>
const xl = new XsollaLogin.Widget({
  projectId: 'LOGIN_PROJECT_ID',
  preferredLocale: 'en_US',
  clientId: 'CLIENT_ID',
  responseType: 'code',
  state: 'CUSTOM_STATE',
  redirectUri: 'REDIRECT_URI',
  scope: 'SCOPE'
});
</script>

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

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

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

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

xl.mount('xl_auth');
const showFullscreen = () => {
  const myDiv = document.querySelector('#xl_auth');
  myDiv.style.display = 'block';
  xl.open();
}

<script type="text/javascript">
  xl.mount('xl_auth');

  function showFullscreen() {
    const myDiv = document.querySelector('#xl_auth');
    myDiv.style.display = 'block';

    xl.open();
  }
</script>

저장소에서 패키지 가져오기

1. CDN 또는 GitHub에서 SDK를 다운로드합니다.

2. 패키지의 압축을 해제합니다.
3. Unity 프로젝트를 열거나 새로운 프로젝트를 생성합니다.
4. Unity 에디터의 메인 메뉴에서 Assets > Import Package > Custom Package로 이동하여 SDK를 선택합니다.

컴파일러 설정

1. 메인 메뉴에서 Edit > Project Settings를 클릭합니다.
2. Player > Other Settings > Configuration 섹션으로 이동합니다.
3. Scripting Backend 필드에서 Mono를 선택해야 합니다.

Android 종속성 해결하기

Android 빌드의 경우 SDK가 기본 Android 라이브러리의 함수를 사용합니다.

종속성을 해결하려면 필요한 라이브러리를 다운로드하세요.

1. 빌드 플랫폼으로 Android 지정하기:
   1. Unity 편집기의 메인 메뉴에서 File > Build Settings로 이동합니다.
   2. Platform 패널에서 Android를 선택합니다.
   3. Switch Platform을 클릭합니다.

2. 종속성 매니저 시작하기:
   1. Unity 편집기의 메인 메뉴에서 Assets > External Dependency Manager > Android Resolver > Resolve로 이동합니다.
   2. 종속성 매니저가 완료될 때까지 기다립니다.

그 결과로 모든 필수 안드로이드 라이브러리의 JAR 또는 AAR 파일이 Assets/Plugins/Android 폴더에 다운로드됩니다.

SDK 설정

1. Unity 프로젝트를 엽니다.
2. 메인 메뉴에서 Window > Xsolla > Edit Settings를 클릭합니다.
3. 다음 방법 중 하나를 사용하여 Inspector 패널에서 메인 프로젝트 매개변수를 지정합니다.

1. 1. 관리자 페이지에서 설정 가져오기:
      1. Fill settings by PA를 클릭합니다.
      2. Login과 Password 필드에 관리자 페이지 인증 데이터를 지정합니다.
      3. Log In을 클릭합니다.
      4. Publisher Account 섹션의 필드 작성을 완료합니다.

1. 1. 5. Apply Settings를 클릭합니다.

1. 2. 매개변수 수동 지정:
      1. Project ID 필드에서, 프로젝트 이름 옆의 관리자 페이지에서 프로젝트 ID를 지정합니다.
      2. Login ID 필드에서, 로그인 프로젝트의 ID를 지정합니다. 이를 가져오려면, 관리자 페이지을 열고 로그인 > 대시보드 > 로그인 프로젝트 섹션으로 이동하여, 로그인 프로젝트 이름 옆에 있는 ID 복사를 클릭합니다.
      3. Callback URL 필드에서, 인증에 성공하고, 이메일을 확인하거나 암호를 재설정한 이후 사용자가 리디렉션될 URL 또는 경로를 지정합니다. 그 값은 로그인 > 로그인 프로젝트 > 보안 > OAuth 2.0 섹션의 관리자 페이지에서 지정된 값과 일치해야 합니다.

1. 1. 4. OAuth Client ID 필드에서 로그인 > 로그인 프로젝트 > 보안 > OAuth 2.0 섹션의 관리자 페이지에서 찾을 수 있는 OAuth 2.0용 클라이언트 ID를 지정합니다.

4. 필요한 경우 다른 설정을 설정합니다(예: Pay Station UI 섹션의 결제 UI용 디스플레이 옵션).

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

위젯을 열려면 XsollaAuth.AuthWithXsollaWidget SDK 메서드를 호출하여 다음 매개 변수를 전달합니다.

• onSuccess — 성공적인 사용자 인증 콜백을 반환합니다.
• onError — 요청 오류 콜백.
• onCancel — 사용자가 인증 프로세스를 완료하지 않고 위젯을 닫을 때 트리거되는 사용자 인증 취소 콜백.
• locale — UI 언어(선택 사항). 다음 언어가 지원됩니다. 아랍어(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).

독립형 빌드의 경우, 위젯은 SDK에 포함된 내장 브라우저에서 열립니다. URL 변경 사항을 추적할 수 있는 다른 내장 브라우징 솔루션을 사용할 수 있습니다.

SDK 설치

필요한 라이브러리는 Maven Central에서 사용할 수 있습니다.

라이브러리 설치 방법:

1. Android Studio를 시작합니다.
2. 애플리케이션의 build.gradle 파일을 엽니다.
3. 종속성 섹션에 다음 줄을 추가합니다. 여기에서 <version_number>는 필요한 라이브러리 버전입니다.

implementation "com.xsolla.android:login:<version_number>"
implementation "com.xsolla.android:store:<version_number>"
implementation "com.xsolla.android:payments:<version_number>"

SDK 초기화

애플리케이션 시작 시 정적 메서드를 호출하여 로그인 라이브러리를 초기화합니다. 이렇게 하려면 Android 프로젝트 소스 코드에 다음 줄을 추가합니다.

val loginConfig = LoginConfig.OauthBuilder()
                .setProjectId("login-project-id") // You can find it in your Publisher Account, in the Login > Dashboard section.
                .setOauthClientId("oauth2-client-id") // You can find it in Publisher Account in the Login > your Login project > Security > OAuth 2.0 section.
                .build()

XLogin.init(applicationContext, loginConfig)

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

위젯을 여는 방법:

1. 로그인 라이브러리에서 다음 매개 변수를 전달하여 XLogin.startAuthWithXsollaWidget 메서드를 호출합니다.

1. • fragment 또는 activity — 현재 조각 또는 활동.

1. • callback — 상태 콜백.

1. • locale — UI 언어(선택 사항). 다음 언어가 지원됩니다. 아랍어(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).

2. onActivityResult 메서드 내에서, 로그인 라이브러리의 XLogin.finishAuthWithXsollaWidget 메서드를 호출하여 다음 매개 변수를 전달합니다.

1. • activity — 현재 활동. 애플리케이션 컨텍스트를 처리하는 데 필요합니다.

1. • activityResultRequestCode — onActivityResult 메서드의 요청 코드. 본래의 요청을 식별하는 데 사용합니다.

1. • activityResultCode — onActivityResult 메서드의 결과 코드. 이를 통해 작업의 성공 여부를 확인할 수 있습니다.

1. • activityResultData — onActivityResult에서 반환된 데이터. 여기에는 작업 결과가 포함됩니다.

1. • callback — 상태 콜백. 인증 결과를 처리하는 데 사용합니다.

3. 인증 결과를 처리할 때 스토어 라이브러리를 초기화합니다.

스토어 라이브러리 초기화:

XStore.init(<yourProjectId>, XLogin.token!!) // Project ID can be found in your Publisher Account next to the project name.

SDK 설치

1. Epic Games 런처를 다운로드합니다.
2. 새 언리얼 엔진 프로젝트를 생성합니다.

3. SDK 다운로드 및 설치:
   1. 언리얼 엔진 마켓플레이스에서 SDK를 다운로드하고 설치하는 방법:
      1. 언리얼 엔진 마켓플레이스의 SDK 페이지로 이동합니다.
      2. Open in Launcher를 클릭합니다.

1. 1. 3. Epic Games 런처로 이동합니다.

1. 1. 4. Install to Engine을 클릭합니다.
      5. 언리얼 에디터에서 언리얼 엔진 프로젝트를 엽니다.
      6. Settings > Plugins > Installed > Xsolla SDK 섹션으로 이동합니다. Enabled 확인란을 선택 표시하고 Restart Now를 클릭하여 설정을 저장하고 언리얼 에디터를 다시 로드합니다.

1. 2. GitHub에서 SDK를 다운로드하고 설치하는 방법:
      1. 엔진 버전에 맞는 SDK가 포함된 패키지를 다운로드합니다.
      2. 패키지의 압축을 해제합니다.
      3. SDK 폴더를 언리얼 엔진 프로젝트의 루트에 있는 plugins 디렉터리로 이동합니다.

SDK 설정

1. 언리얼 에디터에서 언리얼 엔진 프로젝트를 엽니다.
2. Settings > Project Settings > Plugins > Xsolla Settings > General로 이동하여 프로젝트 매개 변수를 지정합니다.

1. 1. Project ID필드에서 프로젝트 이름 옆의 관리자 페이지에서 프로젝트 ID를 지정합니다.
   2. Login ID 필드에서 로그인 프로젝트의 ID를 지정합니다. 이를 가져오려면, 관리자 페이지을 열고 로그인 > 대시보드 > 로그인 프로젝트 섹션으로 이동하여, 로그인 프로젝트 이름 옆에 있는 ID 복사를 클릭합니다.
   3. Client ID 필드에서 로그인 > 귀하의 로그인 프로젝트 > 보안 > OAuth 2.0 섹션의 관리자 페이지에서 확인할 수 있는 OAuth 2.0의 클라이언트 ID를 지정합니다.
   4. Redirect URI 필드에서 사용자를 성공적으로 인증하거나 이메일을 확인하거나 암호를 재설정한 후 리디렉션되는 애플리케이션의 URL 혹은 경로를 지정합니다. 그 값은 로그인 > 귀하의 로그인 프로젝트 > 보안 > OAuth 2.0 섹션의 관리자 페이지에서 지정한 값과 일치해야 합니다.
   5. 필요한 경우 다른 설정을 설정합니다(예: Pay Station UI 섹션의 결제 UI용 표시 옵션).

1. 결과적으로 관리자 페이지의 프로젝트가 데모 지도와 연결됩니다.

3. Content Browser > View Options로 이동하여 Show Engine Content 및 Show Plugin Content의 확인란을 선택 표시합니다.

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

AuthWithXsollaWidget SDK 메서드를 호출하여 다음 매개 변수를 전달합니다.

• WorldContextObject — 월드 컨텍스트 객체(C++ 호출용).
• SuccessCallback — 성공적인 사용자 인증 및 토큰 수신 콜백(선택 사항).
• CancelCallback — 사용자가 인증 프로세스를 완료하지 않고 위젯을 닫을 때 트리거되는 사용자 인증 취소 콜백(선택 사항).
• ErrorCallback — 인증 프로세스 중 발생하는 오류에 대한 콜백(선택 사항).
• bRememberMe — 인증 데이터를 보관할지 여부(선택 사항)를 설정합니다. 기본적으로 이 값은 false로 설정됩니다.
• Locale — UI 언어(선택 사항). 기본적으로 이 값은 사용자의 IP 주소로 정의됩니다.
• State — 애플리케이션 서버에서 사용자를 추가로 확인하는 데 사용되는 문자열. 기본값은 xsollatest로 설정됩니다.

예시: