Babka 로그인 통합 방법

작동 방식

Babka의 사용자 계정을 사용해 Babka 계정으로 웹사이트에 사용자 인증을 추가할 수 있습니다. 다음 통합 메소드를 사용할 수 있습니다.

• Babka 계정 버튼. 이 경우:
  • 게시자 계정에서 엑솔라 인증 프로젝트를 생성하고 설정할 필요가 없습니다.
  • 애플리케이션의 서버 측에서 사용자 인증 토큰용 인증 코드 교환을 구현해야 합니다.

• 엑솔라 로그인 위젯에서 소셜 네트워크로서 Babka 로그인을 사용. 이 경우:
  • 게시자 계정에서 엑솔라 로그인 프로젝트를 생성하고 설정해야 합니다.
  • 웹사이트에서 사용자 인증 토큰을 즉시 받게 됩니다.

Babka 계정 버튼 통합

Babka 계정 버튼 통합 방법:

1. Babka 로그인 OAuth 2.0 클라이언트를 생성합니다.
2. 애플리케이션 측에서 Babka 로그인 버튼을 통합합니다.
3. 사용자 인증 토큰 검색하기를 구현합니다.

Babka 로그인 OAuth 2.0 클라이언트 생성

Babka OAuth 2.0 클라이언트 생성 방법:

1. 프로젝트 계정 관리자에게 연락하여 다음 정보를 제공합니다.

2. 엑솔라 통합팀은 Babka Oauth 2.0 클라이언트를 생성하고 식별자와 비밀 키를 제공합니다. 이 데이터는 사용자 인증 토큰 획득에 필요합니다.

애플리케이션 측 Babka 계정 버튼 통합

Babka 로그인 SDK를 사용하여 애플리케이션 측에 Babka 계정 버튼을 통합합니다.

사용자 인증 토큰 가져오기

Babka 로그인 측에서 인증이 완료되면, 사용자는 redirect_uri 매개변수에서 지정된 URI 주소로 리디렉션됩니다. 사용자 인증 토큰을 획득하려면 이 지침을 참조합니다. 사용자 인증 토큰이 만료되어 갱신하려면 이 지침을 참조합니다.

Babka 로그인을 소셜 네트워크로 사용하는 통합

Babka 로그인을 소셜 네트워크로 사용하여 통합하는 방법:

1. Babka 로그인 OAuth 2.0 클라이언트를 생성합니다.
2. 로그인 위젯을 통합합니다.
3. 소셜 네트워크로 Babka 로그인을 사용합니다.
4. 사용자 인증 토큰 검색하기를 구현합니다.

Babka 로그인 OAuth 2.0 클라이언트 생성

Babka 로그인 OAuth 2.0 클라이언트를 생성하는 방법:

1. 게시자 계정에서 프로젝트를 생성합니다.
2. 게시자 계정에서 로그인 프로젝트를 설정합니다.
3. 프로젝트 계정 관리자에게 연락하여 다음 정보를 제공합니다.

4. 엑솔라 통합팀은 Babka Oauth 2.0 클라이언트를 생성하고 식별자와 비밀 키를 제공합니다. 이 데이터는 사용자 인증 토큰 획득에 필요합니다.

로그인 위젯 통합

SDK를 사용해 로그인 위젯을 통합합니다.

소셜 네트워크로 Babka 로그인 사용하기

1. 게시자 계정에서 프로젝트를 열고 로그인 섹션으로 이동합니다.
2. 로그인 프로젝트의 패널에서 구성을 클릭합니다.
3. 탐색 페이지에서 인증 섹션으로 이동한 후 소셜 로그인 섹션을 선택합니다.
4. 소셜 네트워크 목록에서 Babka를 선택합니다.

5. ⚙ 아이콘을 클릭한 후 설정을 선택합니다.
6. 다음 필드에 값을 입력합니다.
   • 애플리케이션 ID - 엑솔라에서 받은 Babka 로그인 OAuth 2.0 클라이언트 식별자
   • 애플리케이션 비밀 키 - 엑솔라에서 받은 Babka 로그인 OAuth 2.0 키
   • 허용된 리소스 - 사용자 인증 토큰에 대한 인증 코드 교환 요청이 전송될 웹사이트. Babka 로그인 Oauth 2.0 클라이언트를 생성할 때 잠재 고객(Audience) 매개변수로 지정한 것과 동일한 URL 주소를 지정합니다.

7. 연결을 클릭합니다.
8. Babka 로그인 팝업 창 사용 활성화(선택 사항):
   1. 탐색 페이지에서 인증 섹션으로 이동한 후 콜백 URL 섹션을 선택합니다.
   2. 콜백 URL 필드에서 https://login-widget.xsolla.com/latest/babka-auth-succeed를 입력합니다.
   3. 로그인 위젯 코드에서 babkaLoginPopup 매개변수의 true를 전달하고, callbackUrl 매개변수에서 인증 후 사용자를 리디렉션할 페이지의 URL 주소를 전달합니다.

위젯 코드 예시::

import { Widget } from '@xsolla/login-sdk';
const xl = new Widget({
  projectId: '[Login ID]',
  preferredLocale: 'en_US',
  babkaLoginPopup: true,
  callbackUrl: '[Your Callback URL]',
});

1. 4. 웹사이트에 Babka 계정 버튼을 추가합니다.

Babka 계정 버튼 코드 예시:

<div id="xl_auth"></div>
<button onclick="xl.open()">Babka Login Popup</button>

사용자 인증 토큰 가져오기

Babka 로그인에서 인증이 완료된 사용자는 callback_url 매개변수에서 지정된 URL로 리디렉션됩니다. 사용자 인증 토큰은 token 매개변수로 전달됩니다.

엑솔라 로그인 JWT 토큰에 Babka 로그인 OAuth JWT을 임베딩하는 방법:

1. 게시자 계정에서 프로젝트를 연 후 로그인 섹션으로 이동합니다.
2. 로그인 프로젝트 창에서 구성을 클릭합니다.
3. 탐색 페이지에서 인증 섹션으로 이동한 후 소셜 로그인 섹션을 선택합니다.

4. 소셜 네트워크 JWT 임베드 토큰 트리거를 On(켜기)로 설정합니다.
5. 변경 사항 저장을 클릭합니다.

이 페이지 평가

개선해야 할 점이 있을까요? 전송

답하기 원하지 않습니다

의견을 보내 주셔서 감사드립니다!