로그인 / Babka 로그인 통합 방법
 문서로 돌아가기

로그인

  • 통합 가이드

  • 인증 옵션

  • 사용자 데이터 저장소

  • 보안

  • 사용자 정의

  • 통신 서비스 공급업체

  • 특징

  • 방법

  • 연장

  • 법률 관련 설정

  • 참조

  • Babka 로그인 통합 방법

    작동 방식

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

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

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

    알림
    위의 이미지는 로그인 위젯의 옵션 중 하나를 보여줍니다. 위젯을 사용자 정의할 수 있습니다.
    알림
    두 가지 통합 옵션을 모두 동시에 사용할 수 있습니다.

    Babka 계정 버튼 통합

    Babka 계정 버튼 통합 방법:

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

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

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

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

    매개변수유형예시:설명
    Redirect URIs스트링 배열[“https://example.com/oauth/callback”, “http://localhost:3000/oauth/callback”]Babka 로그인을 통해 인증한 후 사용자를 리디렉션하는 데 사용할 수 있는 URI 주소 목록.
    Audience문자열“https://example.com”Babka 로그인 인증이 사용될 도메인.
    Scope스트링 배열[“email”, “transactions”]Babka의 권한 목록.

    1. 엑솔라 통합팀은 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. 프로젝트 계정 관리자에게 연락하여 다음 정보를 제공합니다.

    매개변수유형예시:설명
    Redirect URIs스트링 배열[“https://example.com/oauth/callback”, “http://localhost:3000/oauth/callback”]Babka 로그인을 통해 인증한 후 사용자를 리디렉션하는 데 사용할 수 있는 URI 주소 목록.
    Audience문자열“https://example.com”Babka 로그인 인증이 사용될 도메인.
    Scope스트링 배열[“email”, “transactions”]Babka의 권한 목록.

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

    로그인 위젯 통합

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

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

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

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

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

    위젯 코드 예시::

    Copy
    Full screen
    Small screen

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

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

    Babka 계정 버튼 코드 예시:

    Copy
    Full screen
    Small screen

    <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. 탐색 페이지에서 인증 섹션으로 이동한 후 소셜 로그인 섹션을 선택합니다.

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

    이 기사가 도움이 되었나요?
    감사합니다!
    개선해야 할 점이 있을까요? 메시지
    유감입니다
    이 기사가 도움이 안 된 이유를 설명해 주세요. 메시지
    의견을 보내 주셔서 감사드립니다!
    메시지를 검토한 후 사용자 경험 향상에 사용하겠습니다.
    이 페이지 평가
    이 페이지 평가
    개선해야 할 점이 있을까요?

    답하기 원하지 않습니다

    의견을 보내 주셔서 감사드립니다!
    마지막 업데이트: 2023년 5월 30일

    오자 또는 기타 텍스트 오류를 찾으셨나요? 텍스트를 선택하고 컨트롤+엔터를 누르세요.

    문제 보고
    콘텐츠를 항상 검토합니다. 여러분의 피드백은 콘텐츠를 개선에 도움이 됩니다.
    후속 조치를 위해 이메일을 제공해 주세요
    의견을 보내 주셔서 감사드립니다!