로그인은 비디오 게임을 개발하는 파트너를 대신하여 사용자 암호를 인증하고 안전하게 보호하는 단일 등록 도구입니다. 이는 30개 이상의 외부 인증 서비스 제공업체를 통해 원활한 원클릭 사용자 등록 환경을 조성하며 이러한 서비스 제공업체는 좋아하는 모든 게임에 가입하거나 로그인하는 편리하고 안전하며 빠른 방법을 플레이어에게 제공합니다. 로그인은 API 방식을 사용하므로 파트너는 다음을 수행할 수 있습니다.
- GDPR 규정에 따라 개인 데이터 처리
- 게시자 계정에서 솔루션 구성
- 사용자 데이터 스토리지 선택
- 사용자 이름/암호 또는 소셜 네트워크를 통해 사용자 인증
- 사용 및 사용자의 위치에 따라 소셜 네트워크 표시
다음을 지원하는 로그인 위젯을 통해 사용자를 인증할 수도 있습니다.
- UI 사용자 정의
- 20개 언어로 번역
- 위젯 업데이트 자동 전달
- 위젯 시작 페이지설정
통합 플로우
로그인 통합하는 두 가지 방법:
API를 통한 로그인 통합
- 게시자 계정에서 로그인 인스턴스를 생성하고 다음을 지정합니다.
- 이름,
- 로그인 연결할 게임 웹 사이트 링크.
- 일반 설정으로 이동하여 다음 필드를 입력합니다.
- 인증을 성공적으로 완료한 후 사용자를 리디렉션하는 콜백 URL,
- API 방식을 호출하는 허용된 출처(CORS),
- 인증 오류 시 사용자를 리디렉션하는오류 콜백 URL. 특정한 값을 지정하지 않은 경우, 콜백 URL이 사용됩니다.
- 사용자 데이터베이스 스토리지(당사 또는 귀사의 스토리지)를 선택합니다.
- 사용자가 로그인할 수 있는 소셜 네트워크를 설정합니다.
위젯을 통해 로그인 통합
- 게시자 계정에서 로그인 인스턴스를 생성하고 다음을 지정합니다.
- 이름
- 로그인을 연결할 게임 웹 사이트 링크
- 일반 설정으로 이동하여 다음 필드를 입력합니다.
- 인증을 성공적으로 완료한 후 사용자를 리디렉션하는 콜백 URL
- 인증 오류 시 사용자를 리디렉션하는오류 콜백 URL 특정한 값을 지정하지 않은 경우, 콜백 URL이 사용됩니다.
- 사용자 데이터베이스 스토리지(당사 또는 귀사의 스토리지)를 선택합니다.
- 사용자가 로그인할 수 있는 소셜 네트워크를 설정합니다.
- 로그인 위젯을 UI를 사용자 정의합니다.
- 로그인 위젯을을 웹 사이트에 연결합니다.
UI 사용자 정의
- 게시자 계정에서 스타일 아카이브를 다운로드하고 압축을 해제합니다.
- 최신 LTS 버전의 Node.js를 다운로드하고 설치합니다.
- 압축 해제한 스타일 폴더에서 npm i를 실행합니다.
- app/styles/themes/_default.scss 를 편집합니다.
- 압축 해제된 스타일 폴더에서 npm run styles를 실행합니다.
- dist 폴더에서 app.default.css 와 유사한 이름의 파일을 게시자 계정으로 업로드합니다.
위젯 UI를 추가로 사용자 정의하려면 4–6 단계를 반복합니다.
로그인 위젯을 웹 사이트에 연결
로그인 위젯을 웹 사이트와 통합하려면 Xsolla Login Javascript SDK를 사용합니다.
1 단계
Xsolla Login Javascript SDK 연결:
- 프로젝트가 Bower를 사용하면 콘솔을 시작하고 bower install xsolla-login-js-sdk를 실행합니다.
- 팩을 설치하지 않은 경우, 위젯을 위치시키려는 웹 페이지의 <head> 태그에 다음 코드를 추가합니다. <script src="https://cdn.xsolla.net/xsolla-login-widget/sdk/2.2.4/xl.min.js"></script>.
2 단계
위젯 초기화 코드를 <body> 태그에 추가합니다.
<script type="text/javascript">
XL.init({
projectId: '{Login ID}',
callbackUrl: '{callbackUrl}',
locale: 'en_US'
});
</script>
| 파라미터 | 유형 | 설명 |
|---|---|---|
| projectId | string | 게시자 계정의 로그인 ID입니다. 필수. |
| callbackUrl | string | 사용자를 등록/인증/암호 재설정 후 절차로 리디렉션하는 URL입니다. 로그인 설정 시 게시자 계정에서 지정한 콜백 URL과 동일해야 합니다. 콜백 URL이 여러 개 존재할 경우 필요합니다. |
| locale | string | 지역이 <language code>_<country code> 형식으로 지정되어 있는 경우,
|
| fields | array of strings | 성공적인 사용자 등록/인증에 필요한 매개변수 목록입니다. 예: 'email, promo_email_agreement'. 해당 양식에 이러한 매개변수를 지정하라는 메시지가 표시됩니다. |
| theme | string | 위젯 스타일 파일 URL. 값이 비어 있으면 게시자 계정에 업로드한 스타일을 사용합니다. |
| popupBackgroundColor | string | 전체 화면 모드에서 위젯 배경색입니다. CSS 컬러 형식으로 값을 설정합니다. 기본값은 rgba(50, 150, 150, 0.1)입니다. |
| iframeZIndex | string | 전체 화면 모드에서 위젯의 스택 순서입니다. 기본값은 1000000입니다. |
3 단계
웹 사이트에 위젯을 배치하는 방법을 선택합니다.
- 전체 화면 모드
- 페이지의 특정 블록
전체 화면 모드
원클릭 이벤트 버튼을 웹사이트에 추가하고 XL.show() 함수를 호출합니다.
<button onclick="XL.show()">Fullscreen widget</button>위젯 외부를 클릭하면 전체 화면 모드가 종료됩니다.
페이지 블록
위젯이 위치할 블록을 이 페이지의 <body> 태그에 추가하고 블록 ID를 지정합니다.
<div id="xl_auth"></div>다음 스크립트를 추가하고 아래 설명과 같이 매개변수를 지정합니다.
<script type="text/javascript">
var element_id = 'xl_auth';
var options = {
width: 400,
height: 550,
route: XL.ROUTES.REGISTRATION
};
XL.AuthWidget(element_id, options);
</script>
| 파라미터 | 유형 | 설명 |
|---|---|---|
| element_id | string | 로그인 위젯을 포함하고 있는 블록 ID. 필수. |
| options | object | 로그인 위젯 차단 설정. 오브젝트는 아래 나열된 매개변수로 구성되어 있습니다. |
| width | number | 블록 폭(픽셀). 기본값은 400입니다. |
| height | number | 블록 높이(픽셀). 기본값은 550입니다. |
| route | string | 위젯 시작 페이지. 가능:
|
4 단계(옵션)
다음과 같은 위젯 작업을 추적할수 있습니다.
- 로드한 위젯
- 위젯을 닫으려고 하는 사용자
- 등록 확인 이메일이 전송되었습니다.
아래 설명에 따라 작업을 초기화하고 처리하세요.
로드한 위젯
XL.on(XL.eventTypes.LOAD, function () {
console.log('the widget has been loaded');
});
위젯을 닫으려고 하는 사용자
XL.on(XL.eventTypes.CLOSE, function () {
console.log('user is trying to close the widget');
});
등록 확인 이메일 전송됨
XL.on(XL.eventTypes.REGISTRATION_REQUEST, function () {
console.log('registration form has been sent');
});
개인 데이터 처리
유럽 연합(EU) 사용자의 개인 데이터는 GDPR 조항에 따라 규제됩니다. 아래에서 GDPR 규정 목록과 사용자가 이 규정을 준수하도록 로그인이 어떠한 도움이 되는지 알 수 있습니다.
개인 데이터 처리 동의
이 규정의 제 6-8조에 따라 귀하는 다음을 수행해야 합니다.
- 데이터 주체에게 자신의 개인 데이터 처리에 대한 동의를 요청하거나
- 데이터 주체에게 언제든지 동의를 철회할 수 있는 권한을 부여해야 합니다.
개인 데이터를 처리하도록 사용자 동의를 요청하기 위해 로그인 위젯에서 하나의 등록 양식이 사용됩니다.
사용자가 자신의 의사결정을 번복할 경우, support@xsolla.com으로 요청서를 전송하여 개인 데이터 처리를 취소할 수 있습니다.
사용자 권리
이 규정의 제 15-17, 19조에 따라 사용자는 다음과 같은 권한을 갖습니다.
- 자신의 개인 데이터 사본을 다운로드하고,
- 자신과 관련된 부정확한 개인 데이터를 수정하도록 요청하며,
- 자신과 관련된 개인 데이터를 삭제하도록 요청할 수 있습니다.
사용자 데이터를 가져오거나 수정하거나 삭제하려면:
- 엑솔라 스토리지를 사용하는 경우 support@xsolla.com으로 요청을 전송합니다.
- PlayFab을 사용하는 경우 튜토리얼을 읽습니다.
- 사용자 정의 스토리지를 사용하는 경우 자체 방식을 선택합니다.
개인 데이터 처리 및 저장
이 규정의 제 5조에 따라, 개인 데이터는 다음 요구 사항을 충족해야 합니다.
- 특정한 목적을 위해 수집되어야 하고 이러한 목적에 부합하지 않는 방식으로 더 이상 처리되지 않아야 합니다.
- 승인되지 않거나 불법적인 처리 및 우발적 손실, 파손 또는 손상으로부터 보호하는 것을 비롯해 개인 데이터를 적절히 보호하는 방식으로 처리해야 합니다.
로그인은 사용자의 차단, 이메일 발송, 지불 결제 및 기타 개인 데이터 적용 방법에 영향을 줄 수 있는 데이터를 사용합니다.
개인 데이터의 저장 및 전송은 AES-256 알고리즘에 따라 암호화됩니다.
데이터 휴대성
이 규정의 제 20조에 따라 사용자는 자신의 개인 데이터를 전송 및 저장할 수 있습니다. 구조화되고 보편적으로 사용되는 시스템을 사용하여 판독 가능한 형식의 데이터를 사용자에게 제공해야 합니다.
사용자 데이터를 가져오려면:
- 엑솔라 스토리지를 사용하는 경우 계시자 계정 > 로그인 설정 > 사용자로 이동합니다.
- PlayFab을 사용하는 경우 튜토리얼을 읽습니다.
- 사용자 정의 스토리지를 사용하는 경우 자체 방식을 선택합니다.
사용자 데이터 보호
이 규정의 제 32조에 따라 다음과 같은 기술을 사용하여 신뢰할 수 있는 데이터 보호 수준을 제공해야 합니다.
- 데이터 암호화,
- 데이터 기밀성,
- 데이터 무결성,
- 탄력적인 데이터 처리 시스템.
이러한 요구 사항을 준수할 수 있도록 도움이 되는 여러 가지 로그인 기능:
- AES-256 알고리즘에 따른 데이터 암호화,
- 입력한 암호의 적절성 여부 확인,
- 보안을 위한 암호 확인,
- 데이터 액세스 제한.
레시피
레시피는 로그인에 대한 일부 고급 기능을 시도해볼 수 있도록 지원합니다: