애플리케이션에서 사용자 인증
결제 트랜잭션의 보안과 올바른 작동을 보장하기 위해 엑솔라 API는 엑솔라 로그인을 사용하여 인증하는 동안 획득한 사용자 JSON 웹 토큰(JWT)을 사용합니다.
아래에서 엑솔라 로그인을 가장 빠르게 통합하는 방법, 즉 기성 웹 위젯을 애플리케이션에 통합하는 방법에 대한 지침을 확인할 수 있습니다.
자체 UI를 사용하여 사용자를 애플리케이션에 로그인하려면 로그인 API 또는 SDK 메서드를 사용하여 사용자 인증 로직을 구현해야 합니다.
프로젝트에 가장 적합한 SDK를 선택합니다.
알림
엑솔라 로그인 위젯 SDK 연결
엑솔라 로그인 위젯은 HTML 페이지에서 NPM 패키지 관리자 또는 <script> 태그를 사용하여 설치하는 데 사용할 수 있습니다.
다음 방법 중 하나로 엑솔라 로그인 위젯 SDK를 연결합니다:
콘솔을 시작하고 명령을 실행합니다:
Copy
- bash
npm i @xsolla/login-sdk
엑솔라 로그인 위젯 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 클라이언트 설정의 관리자 페이지에 지정해야 합니다.
나머지 매개 변수는 변경하지 말고 그대로 둡니다.
JS 파일에 초기화 코드를 추가합니다:
Copy
- javascript
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'
});
엑솔라 로그인 위젯 열기 추가
on-click이벤트 및xl.open()함수가 있는 버튼을 HTML 페이지에 추가합니다:
Copy
- html
<div id="xl_auth" style="display: none"></div>
<button onclick="showFullscreen()">Fullscreen widget</button>
- 코드를 추가하여 HTML 페이지의
<div>블록에서 위젯을 엽니다.
다음 코드를 JS 파일에 추가합니다:
Copy
- javascript
xl.mount('xl_auth');
const showFullscreen = () => {
const myDiv = document.querySelector('#xl_auth');
myDiv.style.display = 'block';
xl.open();
}
이 기사가 도움이 되었나요?
의견을 보내 주셔서 감사드립니다!
메시지를 검토한 후 사용자 경험 향상에 사용하겠습니다.오자 또는 기타 텍스트 오류를 찾으셨나요? 텍스트를 선택하고 컨트롤+엔터를 누르세요.
