Login Widget SDK API 호출 사용 방법
원한다면 Login 위젯에서 Login Widget SDK API 위젯 호출을 각각 따로 작업할 수 있습니다.
- 자체 위젯 디자인 사용
- Login 위젯 흐름 부분적 구현
알림
모든 API 호출이 시나리오를 지원하지는 않습니다.
코드 초기화
위젯 없이 Login Widget SDK API 호출을 사용하려면 <body>
태크에 연결해야 하는 코드:
Copy
1<script>
2const api = new XsollaLogin.Api({
3 projectId: 'someProjectId'
4});
5</script>
npm 패키지 사용 시 초기화 코드:
Copy
1import XsollaLogin from '@xsolla/login-sdk';
2const api = new XsollaLogin.Api({
3 projectId: 'someProjectId'
4});
초기화 코드에서 전달되는 매개 변수:
매개 변수 | 유형 | 설명 |
---|---|---|
projectId | string | 관리자 페이지의 Login 프로젝트 ID. 필수입니다. |
fullLocale | string | <language code>_<country code> 형식의 인터페이스 언어 및 지역의 조건:
지정된 지역에서의 사용 빈도로 소셜 네트워크 분류 및 사용자에게 전송된 이메일에 사용되는 언어에 영향을 주는 매개 변수. |
callbackUrl | string | 로그인 또는 등록이 성공적인 경우 엑솔라 로그인 서버가 Xsolla Login 서버가 작동되는 URL. |
emailTemplate | string | 이메일 대신 프로젝트 이름이 사용자에게 전송됩니다. |
payload | string | 코드에서 전달될 수 있는 추가 데이터. 이 데이터는 성공적인 로그인 후 사용자 JWT에 추가됩니다. |
with_logout | boolean | 새 로그인 동안 이전 토큰 철회 여부. 기본 설정은 false 입니다. |
clientId | string | 클라이언트 앱 ID. OAuth 2.0 프로토콜 기반 인증이 앱에서 사용되는 경우 전달됩니다. |
scope | string | 앱에 의한 사용자 계정의 추가 정보 요청. OAuth 2.0 프로토콜 기반 인증이 앱에서 사용되는 경우 전달됩니다. 가능한 값:
|
state | string | CSRF 공격을 예방하기 위한 추가 사용자 검증 예시. 반드시 8자 이상이어야 합니다. |
redirectUrl | string | 계정, 로그인 또는 암호 재설정 확인을 사용자가 확인한 후 사용자가 리디렉션되는 URL. |
disableConfirmByLink | boolean | 이메일 또는 전화로 암호 없이 사용자가 로그인할 때 이메일의 링크를 이용한 암호 없는 인증 확인 비활성 여부. 기본 설정은 false 입니다. |
is_oauth2 | boolean | 사용자용 OAuth 2.0 프로토콜 기반 인증 사용 여부. 기본 설정은 false 입니다. |
API 호출
Login 위젯 없이 사용할 수 있는 Login Widget SDK API 호출:
암호로 사용자 등록
호출 | 설명 | 매개 변수 |
---|---|---|
api.signup(userInfo); | 새 사용자를 등록합니다. 등록 중에 사용자에 대한 데이터가 userInfo 개체에서 전달됩니다. 응답에서 등록된 사용자의 토큰이 전달됩니다. |
|
Copy
1let result
2// Request
3api.signup({
4 userInfo: {
5 email: 'email@address.com',
6 fields: {
7 nickname: 'Johny'
8 },
9 password: 'password123',
10 username: 'John'
11 }
12}).then((res) => {
13 result = res;
14})
15
16// Response
17result === {
18 login_url: 'https://someurl.com?token=XXXXXXX'
19}
암호로 로그인
호출 | 설명 | 매개 변수 |
---|---|---|
api.login(credentials); | 암호로 사용자를 인증합니다. 사용자 로그인용으로 필요한 사용자에 대한 데이터는 credentials 개체에서 전달됩니다. 응답에서 인증된 사용자의 토큰이 전달됩니다. |
|
Copy
1let result
2// Request
3api.login({
4 credentials: {
5 password: 'password123',
6 username: 'email@address.com'
7 }
8}).then((res) => {
9 result = res;
10})
11
12// Response
13result === {
14 login_url: 'https://someurl.com?token=XXXXXXX'
15}
16
17// Response with additional fields
18result === {
19 ask_fields: [{
20 confirmation_type: 'code' || 'link'
21 name: 'phone_number'
22 required: false
23 step: 0 // Displays the position of the field in the data retrieval queue.
24 type: 'phone'
25 validation: {} // Custom validation
26 }]
27 login_url: 'https://someurl.com?token=XXXXXXX',
28 token: 'sometoken'
29}
계정 정보
호출 | 설명 | 매개 변수 |
---|---|---|
api.resendEmail(username); | 추가 계정 확인 이메일을 전송합니다. 계정을 확인하려면 사용자는 이메일의 링크를 클릭해야 합니다. 사용자 이메일 주소는 username 개체에서 전달됩니다. 표준 코드 204가 응답에서 반환됩니다. |
|
Copy
1let result
2// Request
3api.resendEmail({
4 username: 'email@address.com'
5}).then((res) => {
6 res.code === 204;
7})
암호 없는 인증
사용자 흐름:- 사용자가 자신의 전화번호 또는 이메일 주소를 입력합니다. 입력한 자격증명에 따라
api.phoneGetCode
또는api.emailGetCode
가 호출됩니다. - 서버가 데이터를 받은 다음 코드가 있는 이메일 또는 SMS를 사용자에게 전송합니다. 이메일의 링크를 이용한 로그인 확인을 비활성화하는
disableConfirmByLink=true
매개 변수가 코드가 초기화될 때 전달되면 사용자가 링크를 클릭한 후 사용자를 자동 리디렉션하는 데에 사용되는api.getConfirmCode
호출이 사용됩니다. api.phoneGetCode
또는api.emailGetCode
호출이api.loginWithPhoneCode
또는api.loginWithEmailCode
호출을 이용한 전화번호 또는 이메일 확인에 사용되는operation_id
매개 변수를 반환합니다.- 이메일 주소 또는 전화번호가 성공적으로 확인된 후
token
매개 변수가 있는 URL이 반환됩니다. 이는 사용자에 대한 추가 데이터 요청에 사용됩니다.
호출 | 설명 | 매개 변수 |
---|---|---|
api.phoneGetCode({ phone_number, link_url, isOauth2 }); | 전화번호에 확인 코드를 전송합니다. 전화번호 확인에 사용되는 operation_id 매개 변수가 응답에서 반환됩니다. |
|
Copy
1let result
2// Request
3api.phoneGetCode({
4 phone_number: '+somenumber',
5 link_url: 'https://someurl.com',
6 isOauth2: true
7}).then((res) => {
8 result = res;
9})
10
11// Response
12result === {
13 operation_id: '2334j255fdf13d515fgd1'
14}
호출 | 설명 | 매개 변수 |
---|---|---|
api.phoneGetCode({ phone_number, link_url, isOauth2 }); | 이메일 주소로 확인 코드를 전송합니다. 이메일 주소 확인에 사용되는 operation_id 매개 변수가 응답에서 반환됩니다. |
|
Copy
1let result
2// Request
3api.emailGetCode({
4 email: 'email@address.com',
5 link_url: 'https://someurl.com',
6 isOauth2: true
7}).then((res) => {
8 result = res;
9})
10
11// Response
12result === {
13 operation_id: '2334j255fdf13d515fgd1'
14}
호출 | 설명 | 매개 변수 |
---|---|---|
api.getConfirmCode({ cancelToken, login, operation_id }); | 사용자가 링크를 클릭한 후 사용자를 자동 리디렉션하는 데 사용되는 확인 코드를 가져옵니다. |
|
Copy
1let result
2// Request
3const axiosCancelToken = Axios.CancelToken.source();
4
5api.getConfirmCode({
6 cancelToken: axiosCancelToken,
7 login: '+somenumber' || 'email@address.com',
8 operation_id: '334j255fdf13d515fgd1'
9}).then((res) => {
10 result = res;
11})
12
13// Response
14result === {
15 code: 'string'
16}
17
18// If the waiting time has elapsed, returns:
19result === {
20 error: {
21 code: '010-050',
22 description: 'Deadline exceeded.'
23 }
24}
25
26// If you no longer need to wait for verification through the link you can close the request waiting period:
27axiosCancelToken.cancel();
호출 | 설명 | 매개 변수 |
---|---|---|
api.loginWithPhoneCode({ phone_number, code, operation_id, isOauth2 }); | 확인 전화번호. token 매개 변수가 있는 URL이 응답에서 반환됩니다. 사용자에 대한 추가 데이터 요청에 사용됩니다. |
|
Copy
1let result
2// Request
3api.loginWithPhoneCode({
4 phone_number: 'email@address.com',
5 code: '3423',
6 operation_id: '334j255fdf13d515fgd1',
7 isOauth2: true
8}).then((res) => {
9 result = res;
10})
11
12// Response
13result === {
14 login_url: 'https://someurl.com?token=XXXXXXX'
15}
16
17
18// Response with additional fields
19result === {
20 ask_fields: [{
21 confirmation_type: 'code' || 'link'
22 name: 'email'
23 required: false
24 step: 0 // Displays the position of the field in the data retrieval queue.
25 type: 'email'
26 validation: {} // Custom validation
27 }]
28 login_url: 'https://someurl.com?token=XXXXXXX',
29 token: 'sometoken'
30}
호출 | 설명 | 매개 변수 |
---|---|---|
api.loginWithEmailCode({ email, code, operation_id, isOauth2 }); | 확인 이메일 주소. token 매개 변수가 있는 URL이 응답에서 반환됩니다. 사용자에 대한 추가 데이터 요청에 사용됩니다. |
|
Copy
1let result
2// Request
3api.loginWithEmailCode({
4 email: 'email@address.com',
5 code: '3423',
6 operation_id: '334j255fdf13d515fgd1',
7 isOauth2: true
8}).then((res) => {
9 result = res;
10})
11
12// Response
13result === {
14 login_url: 'https://someurl.com?token=XXXXXXX'
15}
16
17// Response with additional fields
18result === {
19 ask_fields: [{
20 confirmation_type: 'code' || 'link'
21 name: 'phone_number'
22 required: false
23 step: 0 // Displays the position of the field in the data retrieval queue.
24 type: 'phone'
25 validation: {} // Custom validation
26 }]
27 login_url: 'https://someurl.com?token=XXXXXXX',
28 token: 'sometoken'
29}
암호 없는 추가 필드 요청
사용자 흐름:- 성공적인 사용자 인증 후
api.loginWithEmailCode
또는api.loginWithPhoneCode
호출이 별도의 형식으로 앱을 표시하고 사용자 전화번호 및 이메일 주소를 추가로 수집할 수 있는 필드 배열을 반환합니다. 또한,api.getAskFields
호출을 실행하여 필드 목록 가져오기를 할 수 있습니다. - 사용자가 전화번호 또는 이메일 주소를 입력합니다.
api.ask
가 실행됩니다. - 서버가 데이터를 받은 다음 확인 코드를 전화번호 또는 이메일 주소로 보냅니다. 이메일 안의 링크로 로그인 확인을 비활성화하는
disableConfirmByLink=true
매개 변수가 코드 초기화를 할 때 전달되면api.getConfirmCode
호출이 링크 클릭 후 동 사용자 리디렉션에 사용됩니다 . api.ask
호출이api.loginWithPhoneCode
또는api.loginWithEmailCode
호출을 이용한 전화번호 또는 이메일 주소 확인에 사용되는operation_id
매개 변수를 반환합니다.- 인증된 사용자를 리디렉션하는 데에 사용되는 URL이 성공적인 데이터 확인 후 반환됩니다.
호출 | 설명 | 매개 변수 |
---|---|---|
api.getAskFields(token); | 추가 요청용 필드 목록을 가져옵니다. |
|
Copy
1let result
2// Request
3api.getAskFields({
4 token: 'sometoken'
5}).then((res) => {
6 result = res;
7})
8
9// Response
10result === [
11 {
12 confirmation_type: 'code' || 'link'
13 name: 'phone_number' || 'email'
14 required: false
15 step: 0 // Displays the position of the field in the data retrieval queue.
16 type: 'phone' || 'email'
17 validation: {} // Custom validation
18 }
19]
호출 | 설명 | 매개 변수 |
---|---|---|
api.ask({ fields, token, link_url }); | 사용자에 대한 추가 데이터를 전송하는데, 이는 전화번호 또는 이메일 주소입니다. 지정된 전화번호 또는 이메일 주소 확인에 사용되는 operation_id 매개 변수가 응답에서 반환됩니다. 확인 필요하지 않다면 인증된 사용자 리디렉션에 사용되는 token 매개 변수가 있는 URL이 응답에서 반환됩니다. |
|
Copy
1let result
2// Request
3api.ask({
4 fields: {
5 phone_number: '+somenumber'
6 },
7 link_url: 'https://someurl.com',
8 token: 'sometoken'
9}).then((res) => {
10 result = res;
11})
12
13// Response
14result === {
15 error: {
16 code: '003-014'
17 description: 'Confirm phone number.'
18 details: { operation_id: 'BPaBScLM44GesoOYSxT5I8QfgIrTSURd' }
19 }
20}
21
22// Response without confirmation
23result === {
24 redirect_url: '<login_url>?token=<token>'
25}
이메일 주소 전송 예시:
Copy
1let result
2// request
3api.ask({
4 fields: {
5 email: 'email@address.com'
6 },
7 link_url: 'https://someurl.com',
8 token: 'sometoken'
9}).then((res) => {
10 result = res;
11})
12
13// Response
14result === {
15 error: {
16 code: '003-011'
17 description: 'Confirm email.'
18 details: { operation_id: 'BPaBScLM44GesoOYSxT5I8QfgIrTSURd' }
19 }
20}
21
22// Response without confirmation
23result === {
24 redirect_url: '<login_url>?token=<token>'
25}
호출 | 설명 | 매개 변수 |
---|---|---|
api.getConfirmCode({ cancelToken, login, operation_id }); | 링크 클릭 후 사용자 자동 리디렉션용 확인 코드를 가져옵니다. |
|
Copy
1let result
2// Request
3const axiosCancelToken = Axios.CancelToken.source();
4
5api.getConfirmCode({
6 cancelToken: axiosCancelToken,
7 login: '+somenumber' || 'email@address.com',
8 operation_id: '334j255fdf13d515fgd1'
9}).then((res) => {
10 result = res;
11})
12
13// Response
14result === {
15 code: 'string'
16}
17
18// If the waiting time has elapsed, returns:
19result === {
20 error: {
21 code: '010-050',
22 description: 'Deadline exceeded.'
23 }
24}
25
26// If you no longer need to wait for verification through the link you can close the request waiting period:
27axiosCancelToken.cancel();
호출 | 설명 | 매개 변수 |
---|---|---|
api.loginWithPhoneCode({ phone_number, code, operation_id, isOauth2 }); | 확인 전화번호. token 매개 변수가 있는 URL이 응답에서 반환됩니다. 사용자에 대한 추가 데이터 요청에 사용됩니다. |
|
Copy
1let result
2// Request
3api.loginWithPhoneCode({
4 phone_number: 'email@address.com',
5 code: '3423',
6 operation_id: '334j255fdf13d515fgd1',
7 isOauth2: true
8}).then((res) => {
9 result = res;
10})
11
12// Response
13result === {
14 login_url: 'https://someurl.com?token=XXXXXXX'
15}
16
17
18// Response with additional fields
19result === {
20 ask_fields: [{
21 confirmation_type: 'code' || 'link'
22 name: 'email'
23 required: false
24 step: 0 // Displays the position of the field in the data retrieval queue.
25 type: 'email'
26 validation: {} // Custom validation
27 }]
28 login_url: 'https://someurl.com?token=XXXXXXX',
29 token: 'sometoken'
30}
호출 | 설명 | 매개 변수 |
---|---|---|
api.loginWithEmailCode({ email, code, operation_id, isOauth2 }); | 확인 이메일 주소. token 매개 변수가 있는 URL이 응답에서 반환됩니다. 사용자에 대한 추가 데이터 요청에 사용됩니다. |
|
Copy
1let result
2// Request
3api.loginWithEmailCode({
4 email: 'email@address.com',
5 code: '3423',
6 operation_id: '334j255fdf13d515fgd1',
7 isOauth2: true
8}).then((res) => {
9 result = res;
10})
11
12// Response
13result === {
14 login_url: 'https://someurl.com?token=XXXXXXX'
15}
16
17// Response with additional fields
18result === {
19 ask_fields: [{
20 confirmation_type: 'code' || 'link'
21 name: 'phone_number'
22 required: false
23 step: 0 // Displays the position of the field in the data retrieval queue.
24 type: 'phone'
25 validation: {} // Custom validation
26 }]
27 login_url: 'https://someurl.com?token=XXXXXXX',
28 token: 'sometoken'
29}
암호 초기화
사용자 흐름:- 애플리케이션이 사용자가 이메일 주소 또는 사용자 이름을 입력하는양식을 엽니다.
api.reset
호출이 실행됩니다. - 서버가 확인 이메일을 사용자에게 전송합니다.
- 사용자가 이메일의 링크를 클릭한 다음 새 암호 양식을 엽니다.
- 사용자가 새 암호를 입력합니다.
api.set
호출이 실행됩니다.
호출 | 설명 | 매개 변수 |
---|---|---|
api.reset(username); | 암호를 재설정한 다음 작업을 확인합니다. 암호 재설정을 확인하려면 사용자는 이메일의 링크를 클릭해야 합니다. 사용자 이름 또는 사용자 이메일 주소가 username 개체에서 전달됩니다. 204 코드가 응답에서 반환됩니다. |
|
Copy
1let result
2// Request
3api.reset({
4 username: 'John'
5}).then((res) => {
6 res.code === 204;
7})
호출 | 설명 | 매개 변수 |
---|---|---|
api.set({ new_password, reset_code, user_id }); | 새 암호를 설정한 다음 작업을 확인합니다. 새 암호를 확인하려면 사용자는 반드시 이메일의 링크를 클릭해야 합니다. 204 코드가 응답에서 반환됩니다. |
|
Copy
1let result
2// Request
3api.set({
4 new_password: 'newpass',
5 reset_code: '3423',
6 user_id: '324324234'
7}).then((res) => {
8 res.code === 204;
9})
싱글 사인온
알림
자세한 정보는 싱글 사인온 지침을 참고하세요.
매개 변수 | 유형 | 설명 |
---|---|---|
api.checkUserAuthSSO(); | 싱글 사인온을 통해 사용자에게 권한 부여가 되었는지 확인합니다. 성공적이라면 일회성 code 가 반환됩니다. |
Copy
1let result
2// Request
3api
4 .checkUserAuthSSO()
5 .then(res => {
6 result === res;
7 });
8
9result === {
10 code: "examplecode"
11}
호출 | 설명 | 매개 변수 |
---|---|---|
api.userAuthSSOWithRedirect(loginUrl); | 싱글 사인온을 통해 사용자가 권한 부여를 받았는지 확인합니다. 성공적이라면 사용자는 권한 부여 코드를 포함하여 loginUrl 을 생성하는 URL로 리디렉션됩니다. |
|
Copy
1// Request
2api
3 .userAuthSSOWithRedirect(
4 loginUrl: 'some-redirect-url.com'
5 )
6 .then(res => {
7 res.code === 302;
8 });
호출 | 설명 | 매개 변수 |
---|---|---|
api.logout(token, session); | 시스템에서 사용자를 로그아웃하고 사용자 세션을 session 매개 변수에 따라 사용자 세션을 삭제합니다. |
|
Copy
1// Request
2api
3 .logout(
4 token: 'exampleToken',
5 session: 'sso' | 'all'
6 )
7 .then(res => {
8 res.code === 204;
9 });
매개 변수 | 유형 | 설명 |
---|---|---|
api.clearSSO(); | 현재 사용자의 장치에서 싱글 사인 온(SSO) 쿠키 파일을 제거합니다. 호출에 성공하면 204 코드가 응답으로 반환됩니다. |
Copy
1// Request
2api
3 .clearSSO()
4 .then(() => {
5 // Success
6 });
이 기사가 도움이 되었나요?
의견을 보내 주셔서 감사드립니다!
메시지를 검토한 후 사용자 경험 향상에 사용하겠습니다.오자 또는 기타 텍스트 오류를 찾으셨나요? 텍스트를 선택하고 컨트롤+엔터를 누르세요.