Login Widget SDK API 호출 사용 방법
원한다면 Login 위젯에서 Login Widget SDK API 위젯 호출을 각각 따로 작업할 수 있습니다.
- 자체 위젯 디자인 사용
- Login 위젯 흐름 부분적 구현
알림
모든 API 호출이 시나리오를 지원하지는 않습니다.
코드 초기화
위젯 없이 Login Widget SDK API 호출을 사용하려면 <body>
태크에 연결해야 하는 코드:
Copy
<script>
const api = new XsollaLogin.Api({
projectId: 'someProjectId'
});
</script>
npm 패키지 사용 시 초기화 코드:
Copy
import XsollaLogin from '@xsolla/login-sdk';
const api = new XsollaLogin.Api({
projectId: 'someProjectId'
});
초기화 코드에서 전달되는 매개 변수:
매개 변수 | 유형 | 설명 |
---|---|---|
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
let result
// Request
api.signup({
userInfo: {
email: 'email@address.com',
fields: {
nickname: 'Johny'
},
password: 'password123',
username: 'John'
}
}).then((res) => {
result = res;
})
// Response
result === {
login_url: 'https://someurl.com?token=XXXXXXX'
}
암호로 로그인
호출 | 설명 | 매개 변수 |
---|---|---|
api.login(credentials); | 암호로 사용자를 인증합니다. 사용자 로그인용으로 필요한 사용자에 대한 데이터는 credentials 개체에서 전달됩니다. 응답에서 인증된 사용자의 토큰이 전달됩니다. |
|
Copy
let result
// Request
api.login({
credentials: {
password: 'password123',
username: 'email@address.com'
}
}).then((res) => {
result = res;
})
// Response
result === {
login_url: 'https://someurl.com?token=XXXXXXX'
}
// Response with additional fields
result === {
ask_fields: [{
confirmation_type: 'code' || 'link'
name: 'phone_number'
required: false
step: 0 // Displays the position of the field in the data retrieval queue.
type: 'phone'
validation: {} // Custom validation
}]
login_url: 'https://someurl.com?token=XXXXXXX',
token: 'sometoken'
}
계정 정보
호출 | 설명 | 매개 변수 |
---|---|---|
api.resendEmail(username); | 추가 계정 확인 이메일을 전송합니다. 계정을 확인하려면 사용자는 이메일의 링크를 클릭해야 합니다. 사용자 이메일 주소는 username 개체에서 전달됩니다. 표준 코드 204가 응답에서 반환됩니다. |
|
Copy
let result
// Request
api.resendEmail({
username: 'email@address.com'
}).then((res) => {
res.code === 204;
})
암호 없는 인증
사용자 흐름:- 사용자가 자신의 전화번호 또는 이메일 주소를 입력합니다. 입력한 자격증명에 따라
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
let result
// Request
api.phoneGetCode({
phone_number: '+somenumber',
link_url: 'https://someurl.com',
isOauth2: true
}).then((res) => {
result = res;
})
// Response
result === {
operation_id: '2334j255fdf13d515fgd1'
}
호출 | 설명 | 매개 변수 |
---|---|---|
api.phoneGetCode({ phone_number, link_url, isOauth2 }); | 이메일 주소로 확인 코드를 전송합니다. 이메일 주소 확인에 사용되는 operation_id 매개 변수가 응답에서 반환됩니다. |
|
Copy
let result
// Request
api.emailGetCode({
email: 'email@address.com',
link_url: 'https://someurl.com',
isOauth2: true
}).then((res) => {
result = res;
})
// Response
result === {
operation_id: '2334j255fdf13d515fgd1'
}
호출 | 설명 | 매개 변수 |
---|---|---|
api.getConfirmCode({ cancelToken, login, operation_id }); | 사용자가 링크를 클릭한 후 사용자를 자동 리디렉션하는 데 사용되는 확인 코드를 가져옵니다. |
|
Copy
let result
// Request
const axiosCancelToken = Axios.CancelToken.source();
api.getConfirmCode({
cancelToken: axiosCancelToken,
login: '+somenumber' || 'email@address.com',
operation_id: '334j255fdf13d515fgd1'
}).then((res) => {
result = res;
})
// Response
result === {
code: 'string'
}
// If the waiting time has elapsed, returns:
result === {
error: {
code: '010-050',
description: 'Deadline exceeded.'
}
}
// If you no longer need to wait for verification through the link you can close the request waiting period:
axiosCancelToken.cancel();
호출 | 설명 | 매개 변수 |
---|---|---|
api.loginWithPhoneCode({ phone_number, code, operation_id, isOauth2 }); | 확인 전화번호. token 매개 변수가 있는 URL이 응답에서 반환됩니다. 사용자에 대한 추가 데이터 요청에 사용됩니다. |
|
Copy
let result
// Request
api.loginWithPhoneCode({
phone_number: 'email@address.com',
code: '3423',
operation_id: '334j255fdf13d515fgd1',
isOauth2: true
}).then((res) => {
result = res;
})
// Response
result === {
login_url: 'https://someurl.com?token=XXXXXXX'
}
// Response with additional fields
result === {
ask_fields: [{
confirmation_type: 'code' || 'link'
name: 'email'
required: false
step: 0 // Displays the position of the field in the data retrieval queue.
type: 'email'
validation: {} // Custom validation
}]
login_url: 'https://someurl.com?token=XXXXXXX',
token: 'sometoken'
}
호출 | 설명 | 매개 변수 |
---|---|---|
api.loginWithEmailCode({ email, code, operation_id, isOauth2 }); | 확인 이메일 주소. token 매개 변수가 있는 URL이 응답에서 반환됩니다. 사용자에 대한 추가 데이터 요청에 사용됩니다. |
|
Copy
let result
// Request
api.loginWithEmailCode({
email: 'email@address.com',
code: '3423',
operation_id: '334j255fdf13d515fgd1',
isOauth2: true
}).then((res) => {
result = res;
})
// Response
result === {
login_url: 'https://someurl.com?token=XXXXXXX'
}
// Response with additional fields
result === {
ask_fields: [{
confirmation_type: 'code' || 'link'
name: 'phone_number'
required: false
step: 0 // Displays the position of the field in the data retrieval queue.
type: 'phone'
validation: {} // Custom validation
}]
login_url: 'https://someurl.com?token=XXXXXXX',
token: 'sometoken'
}
암호 없는 추가 필드 요청
사용자 흐름:- 성공적인 사용자 인증 후
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
let result
// Request
api.getAskFields({
token: 'sometoken'
}).then((res) => {
result = res;
})
// Response
result === [
{
confirmation_type: 'code' || 'link'
name: 'phone_number' || 'email'
required: false
step: 0 // Displays the position of the field in the data retrieval queue.
type: 'phone' || 'email'
validation: {} // Custom validation
}
]
호출 | 설명 | 매개 변수 |
---|---|---|
api.ask({ fields, token, link_url }); | 사용자에 대한 추가 데이터를 전송하는데, 이는 전화번호 또는 이메일 주소입니다. 지정된 전화번호 또는 이메일 주소 확인에 사용되는 operation_id 매개 변수가 응답에서 반환됩니다. 확인 필요하지 않다면 인증된 사용자 리디렉션에 사용되는 token 매개 변수가 있는 URL이 응답에서 반환됩니다. |
|
Copy
let result
// Request
api.ask({
fields: {
phone_number: '+somenumber'
},
link_url: 'https://someurl.com',
token: 'sometoken'
}).then((res) => {
result = res;
})
// Response
result === {
error: {
code: '003-014'
description: 'Confirm phone number.'
details: { operation_id: 'BPaBScLM44GesoOYSxT5I8QfgIrTSURd' }
}
}
// Response without confirmation
result === {
redirect_url: '<login_url>?token=<token>'
}
이메일 주소 전송 예시:
Copy
let result
// request
api.ask({
fields: {
email: 'email@address.com'
},
link_url: 'https://someurl.com',
token: 'sometoken'
}).then((res) => {
result = res;
})
// Response
result === {
error: {
code: '003-011'
description: 'Confirm email.'
details: { operation_id: 'BPaBScLM44GesoOYSxT5I8QfgIrTSURd' }
}
}
// Response without confirmation
result === {
redirect_url: '<login_url>?token=<token>'
}
호출 | 설명 | 매개 변수 |
---|---|---|
api.getConfirmCode({ cancelToken, login, operation_id }); | 링크 클릭 후 사용자 자동 리디렉션용 확인 코드를 가져옵니다. |
|
Copy
let result
// Request
const axiosCancelToken = Axios.CancelToken.source();
api.getConfirmCode({
cancelToken: axiosCancelToken,
login: '+somenumber' || 'email@address.com',
operation_id: '334j255fdf13d515fgd1'
}).then((res) => {
result = res;
})
// Response
result === {
code: 'string'
}
// If the waiting time has elapsed, returns:
result === {
error: {
code: '010-050',
description: 'Deadline exceeded.'
}
}
// If you no longer need to wait for verification through the link you can close the request waiting period:
axiosCancelToken.cancel();
호출 | 설명 | 매개 변수 |
---|---|---|
api.loginWithPhoneCode({ phone_number, code, operation_id, isOauth2 }); | 확인 전화번호. token 매개 변수가 있는 URL이 응답에서 반환됩니다. 사용자에 대한 추가 데이터 요청에 사용됩니다. |
|
Copy
let result
// Request
api.loginWithPhoneCode({
phone_number: 'email@address.com',
code: '3423',
operation_id: '334j255fdf13d515fgd1',
isOauth2: true
}).then((res) => {
result = res;
})
// Response
result === {
login_url: 'https://someurl.com?token=XXXXXXX'
}
// Response with additional fields
result === {
ask_fields: [{
confirmation_type: 'code' || 'link'
name: 'email'
required: false
step: 0 // Displays the position of the field in the data retrieval queue.
type: 'email'
validation: {} // Custom validation
}]
login_url: 'https://someurl.com?token=XXXXXXX',
token: 'sometoken'
}
호출 | 설명 | 매개 변수 |
---|---|---|
api.loginWithEmailCode({ email, code, operation_id, isOauth2 }); | 확인 이메일 주소. token 매개 변수가 있는 URL이 응답에서 반환됩니다. 사용자에 대한 추가 데이터 요청에 사용됩니다. |
|
Copy
let result
// Request
api.loginWithEmailCode({
email: 'email@address.com',
code: '3423',
operation_id: '334j255fdf13d515fgd1',
isOauth2: true
}).then((res) => {
result = res;
})
// Response
result === {
login_url: 'https://someurl.com?token=XXXXXXX'
}
// Response with additional fields
result === {
ask_fields: [{
confirmation_type: 'code' || 'link'
name: 'phone_number'
required: false
step: 0 // Displays the position of the field in the data retrieval queue.
type: 'phone'
validation: {} // Custom validation
}]
login_url: 'https://someurl.com?token=XXXXXXX',
token: 'sometoken'
}
암호 초기화
사용자 흐름:- 애플리케이션이 사용자가 이메일 주소 또는 사용자 이름을 입력하는양식을 엽니다.
api.reset
호출이 실행됩니다. - 서버가 확인 이메일을 사용자에게 전송합니다.
- 사용자가 이메일의 링크를 클릭한 다음 새 암호 양식을 엽니다.
- 사용자가 새 암호를 입력합니다.
api.set
호출이 실행됩니다.
호출 | 설명 | 매개 변수 |
---|---|---|
api.reset(username); | 암호를 재설정한 다음 작업을 확인합니다. 암호 재설정을 확인하려면 사용자는 이메일의 링크를 클릭해야 합니다. 사용자 이름 또는 사용자 이메일 주소가 username 개체에서 전달됩니다. 204 코드가 응답에서 반환됩니다. |
|
Copy
let result
// Request
api.reset({
username: 'John'
}).then((res) => {
res.code === 204;
})
호출 | 설명 | 매개 변수 |
---|---|---|
api.set({ new_password, reset_code, user_id }); | 새 암호를 설정한 다음 작업을 확인합니다. 새 암호를 확인하려면 사용자는 반드시 이메일의 링크를 클릭해야 합니다. 204 코드가 응답에서 반환됩니다. |
|
Copy
let result
// Request
api.set({
new_password: 'newpass',
reset_code: '3423',
user_id: '324324234'
}).then((res) => {
res.code === 204;
})
싱글 사인온
알림
자세한 정보는 싱글 사인온 지침을 참고하세요.
매개 변수 | 유형 | 설명 |
---|---|---|
api.checkUserAuthSSO(); | 싱글 사인온을 통해 사용자에게 권한 부여가 되었는지 확인합니다. 성공적이라면 일회성 code 가 반환됩니다. |
Copy
let result
// Request
api
.checkUserAuthSSO()
.then(res => {
result === res;
});
result === {
code: "examplecode"
}
호출 | 설명 | 매개 변수 |
---|---|---|
api.userAuthSSOWithRedirect(loginUrl); | 싱글 사인온을 통해 사용자가 권한 부여를 받았는지 확인합니다. 성공적이라면 사용자는 권한 부여 코드를 포함하여 loginUrl 을 생성하는 URL로 리디렉션됩니다. |
|
Copy
// Request
api
.userAuthSSOWithRedirect(
loginUrl: 'some-redirect-url.com'
)
.then(res => {
res.code === 302;
});
호출 | 설명 | 매개 변수 |
---|---|---|
api.logout(token, session); | 시스템에서 사용자를 로그아웃하고 사용자 세션을 session 매개 변수에 따라 사용자 세션을 삭제합니다. |
|
Copy
// Request
api
.logout(
token: 'exampleToken',
session: 'sso' | 'all'
)
.then(res => {
res.code === 204;
});
매개 변수 | 유형 | 설명 |
---|---|---|
api.clearSSO(); | 현재 사용자의 장치에서 싱글 사인 온(SSO) 쿠키 파일을 제거합니다. 호출에 성공하면 204 코드가 응답으로 반환됩니다. |
Copy
// Request
api
.clearSSO()
.then(() => {
// Success
});
이 기사가 도움이 되었나요?
의견을 보내 주셔서 감사드립니다!
메시지를 검토한 후 사용자 경험 향상에 사용하겠습니다.오자 또는 기타 텍스트 오류를 찾으셨나요? 텍스트를 선택하고 컨트롤+엔터를 누르세요.