Babka 로그인 통합 방법
작동 방식
Babka의 사용자 계정을 사용해 Babka 계정으로 웹사이트에 사용자 인증을 추가할 수 있습니다. 다음 통합 메소드를 사용할 수 있습니다.
- Babka 계정 버튼. 이 경우:
- 게시자 계정에서 엑솔라 인증 프로젝트를 생성하고 설정할 필요가 없습니다.
- 애플리케이션의 서버 측에서 사용자 인증 토큰용 인증 코드 교환을 구현해야 합니다.
- 엑솔라 로그인 위젯에서 소셜 네트워크로서 Babka 로그인을 사용. 이 경우:
- 게시자 계정에서 엑솔라 로그인 프로젝트를 생성하고 설정해야 합니다.
- 웹사이트에서 사용자 인증 토큰을 즉시 받게 됩니다.
알림
위의 이미지는 로그인 위젯의 옵션 중 하나를 보여줍니다. 위젯을 사용자 정의할 수 있습니다.
알림
두 가지 통합 옵션을 모두 동시에 사용할 수 있습니다.
Babka 계정 버튼 통합
Babka 계정 버튼 통합 방법:
Babka 로그인 OAuth 2.0 클라이언트 생성
Babka OAuth 2.0 클라이언트 생성 방법:
- 프로젝트 계정 관리자에게 연락하여 다음 정보를 제공합니다.
매개변수 | 유형 | 예시: | 설명 |
---|---|---|---|
Redirect URIs | 스트링 배열 | [“https://example.com/oauth/callback”, “http://localhost:3000/oauth/callback”] | Babka 로그인을 통해 인증한 후 사용자를 리디렉션하는 데 사용할 수 있는 URI 주소 목록. |
Audience | 문자열 | “https://example.com” | Babka 로그인 인증이 사용될 도메인. |
Scope | 스트링 배열 | [“email”, “transactions”] | Babka의 권한 목록. |
- 엑솔라 통합팀은 Babka Oauth 2.0 클라이언트를 생성하고 식별자와 비밀 키를 제공합니다. 이 데이터는 사용자 인증 토큰 획득에 필요합니다.
애플리케이션 측 Babka 계정 버튼 통합
Babka 로그인 SDK를 사용하여 애플리케이션 측에 Babka 계정 버튼을 통합합니다.
사용자 인증 토큰 가져오기
Babka 로그인 측에서 인증이 완료되면, 사용자는 redirect_uri
매개변수에서 지정된 URI 주소로 리디렉션됩니다. 사용자 인증 토큰을 획득하려면 이 지침을 참조합니다. 사용자 인증 토큰이 만료되어 갱신하려면 이 지침을 참조합니다.
Babka 로그인을 소셜 네트워크로 사용하는 통합
Babka 로그인을 소셜 네트워크로 사용하여 통합하는 방법:
Babka 로그인 OAuth 2.0 클라이언트 생성
Babka 로그인 OAuth 2.0 클라이언트를 생성하는 방법:
- 게시자 계정에서 프로젝트를 생성합니다.
- 게시자 계정에서 로그인 프로젝트를 설정합니다.
- 프로젝트 계정 관리자에게 연락하여 다음 정보를 제공합니다.
매개변수 | 유형 | 예시: | 설명 |
---|---|---|---|
Redirect URIs | 스트링 배열 | [“https://example.com/oauth/callback”, “http://localhost:3000/oauth/callback”] | Babka 로그인을 통해 인증한 후 사용자를 리디렉션하는 데 사용할 수 있는 URI 주소 목록. |
Audience | 문자열 | “https://example.com” | Babka 로그인 인증이 사용될 도메인. |
Scope | 스트링 배열 | [“email”, “transactions”] | Babka의 권한 목록. |
- 엑솔라 통합팀은 Babka Oauth 2.0 클라이언트를 생성하고 식별자와 비밀 키를 제공합니다. 이 데이터는 사용자 인증 토큰 획득에 필요합니다.
로그인 위젯 통합
SDK를 사용해 로그인 위젯을 통합합니다.
소셜 네트워크로 Babka 로그인 사용하기
- 게시자 계정에서 프로젝트를 열고 로그인 섹션으로 이동합니다.
- 로그인 프로젝트의 패널에서 구성을 클릭합니다.
- 탐색 페이지에서 인증 섹션으로 이동한 후 소셜 로그인 섹션을 선택합니다.
- 소셜 네트워크 목록에서 Babka를 선택합니다.
- ⚙ 아이콘을 클릭한 후 설정을 선택합니다.
- 다음 필드에 값을 입력합니다.
- 애플리케이션 ID - 엑솔라에서 받은 Babka 로그인 OAuth 2.0 클라이언트 식별자
- 애플리케이션 비밀 키 - 엑솔라에서 받은 Babka 로그인 OAuth 2.0 키
- 허용된 리소스 - 사용자 인증 토큰에 대한 인증 코드 교환 요청이 전송될 웹사이트. Babka 로그인 Oauth 2.0 클라이언트를 생성할 때 잠재 고객(Audience) 매개변수로 지정한 것과 동일한 URL 주소를 지정합니다.
- 연결을 클릭합니다.
- Babka 로그인 팝업 창 사용 활성화(선택 사항):
- 탐색 페이지에서 인증 섹션으로 이동한 후 콜백 URL 섹션을 선택합니다.
- 콜백 URL 필드에서
https://login-widget.xsolla.com/latest/babka-auth-succeed
를 입력합니다. - 로그인 위젯 코드에서
babkaLoginPopup
매개변수의true
를 전달하고,callbackUrl
매개변수에서 인증 후 사용자를 리디렉션할 페이지의 URL 주소를 전달합니다.
위젯 코드 예시::
Copy
- js
import { Widget } from '@xsolla/login-sdk';
const xl = new Widget({
projectId: '[Login ID]',
preferredLocale: 'en_US',
babkaLoginPopup: true,
callbackUrl: '[Your Callback URL]',
});
- 웹사이트에 Babka 계정 버튼을 추가합니다.
Babka 계정 버튼 코드 예시:
Copy
- html
<div id="xl_auth"></div>
<button onclick="xl.open()">Babka Login Popup</button>
사용자 인증 토큰 가져오기
Babka 로그인에서 인증이 완료된 사용자는 callback_url
매개변수에서 지정된 URL로 리디렉션됩니다. 사용자 인증 토큰은 token
매개변수로 전달됩니다.
엑솔라 로그인 JWT 토큰에 Babka 로그인 OAuth JWT을 임베딩하는 방법:
- 게시자 계정에서 프로젝트를 연 후 로그인 섹션으로 이동합니다.
- 로그인 프로젝트 창에서 구성을 클릭합니다.
- 탐색 페이지에서 인증 섹션으로 이동한 후 소셜 로그인 섹션을 선택합니다.
- 소셜 네트워크 JWT 임베드 토큰 트리거를 On(켜기)로 설정합니다.
- 변경 사항 저장을 클릭합니다.
이 기사가 도움이 되었나요?
의견을 보내 주셔서 감사드립니다!
메시지를 검토한 후 사용자 경험 향상에 사용하겠습니다.이 페이지 평가
이 페이지 평가
답하기 원하지 않습니다
의견을 보내 주셔서 감사드립니다!
오자 또는 기타 텍스트 오류를 찾으셨나요? 텍스트를 선택하고 컨트롤+엔터를 누르세요.