위젯 설정으로 JSON 연결 방법

위젯 설정이 포함된 JSON 파일:

파일 설정 재사용 및 다른 설정을 같은 위젯에 표시하기가 가능합니다. 위젯 초기화 코드에서 지정된 설정 URL:

Copy
Full screen
Small screen
<script>
const xl = new XsollaLogin.Widget({
  // Other settings
  settingsJSON: "url_string",
  socialsJSON: "url_string",
  themeJSON: "url_string"
});
</script>

메인 설정

메인 위젯 설정:

settingsJSON 파일 템플릿:

Copy
Full screen
Small screen
{
  "authorization_methods": {
    // Authorization methods
  },
  "registration_fields": {
    // Registration fields
  },
  "email_validation": {
    // Settings for email validation
  }

  // Other widget settings
}

권한 부여 방법

authorization_methods 개체는 사용할 수 있는 권한 부여 방법이 있는 배열을 포함합니다. 로그인 페이지는 전달된 설정에 따라 표시됩니다.

Note
적어도 하나의 방법이 배열에 전달되어야 합니다. 모든 방법은 배열에 두 번 이상 표시될 수 없습니다.

사용할 수 있는 권한 부여 방법:

  • email — 이메일 주소 및 암호로 권한 부여. 명확한 방법 목록이 있는 authorization_methods 개체가 없다면 매개 변수가 기본적으로 전달됩니다.
  • social — 소셜 로그인. 명확한 방법 목록이 있는 authorization_methods 개체가 없다면 매개 변수가 기본적으로 전달됩니다.
  • username — 사용자 이름 및 암호로 권한 부여.
  • phone — 전화번호 및 SMS 코드로 권한 부여.
  • passwordless-email-code — 이메일 주소 및 이메일로 전송된 코드로 권한 부여.

예시:

Copy
Full screen
Small screen
{
  "authorization_methods": {
    ["email", "phone"]
  }

  // Other widget settings
}

등록 필드

registration_fields 개체는 위젯 등록 페이지에 표시되는 필드 배열을 포함합니다.

파라미터유형설명
email
email사용자 이메일 주소.
username
string사용자 계정.
password
pass암호.
password_confirm
pass암호 확인.
given-name
string사용자 이름.
family-name
string사용자의 성(이름).
nickname
string사용자 닉네임.
bday
date생년월일.
gender
string성별.
country-name
select국가.
platform
multi-select플랫폼.
promo_email_agreement
boolean프로모션 자료 수신에 동의.
Note
배열은 하나 이상의 필드를 포함해야 합니다. 필드는 배열에 전달되는 것에 따라 표시됩니다.

추가로 필드에 지정할 수 있는 매개 변수:

  • required(boolean) — 필드 필수 여부.
  • default_value(array) — 배열 기본값(국가 또는 플랫폼 목록용).
  • validation(object) — 유효성 검증 매개 변수:
    • allowed_characters(string) — 필드용 문자를 허용합니다. 정규식값으로 목록에서 쉼표로 분리됩니다.
    • max_length(number) — 문자 최대 수.
    • min_length(number) — 문자 최소 수.
    • regexps(array with strings) — 입력한 값의 유효성 검사용 정규식.

예시:

Copy
Full screen
Small screen
{
  // Other widget settings

  "registration_fields": [
    {
      "name": "username",
      "required": false,
      "type": "str",
      "validation": {
        "allowed_characters": "A-Z, a-z, 0-9",
        "max_length": 16,
        "min_length": 5,
        "regexps": ["^.{5,16}$"]
      }
    },
    { "name": "email", "required": true, "type": "email", "validation": {} },
    { "name": "bday", "required": true, "type": "date", "validation": {} },
    {
      "name": "platform",
      "default_value": ["MacOS", "Nintendo Switch", "Steam"],
      "required": false,
      "type": "multi-select",
      "validation": {}
    },
    {
      "name": "country-name",
      "default_value": ["US", "GB", "DE"],
      "required": false,
      "type": "select",
      "validation": {}
    },
    { "name": "password", "required": true, "type": "pass", "validation": {} },
    {
      "name": "password_confirm",
      "required": false,
      "type": "pass",
      "validation": {}
    },
    {
      "name": "promo_email_agreement",
      "required": false,
      "type": "bool",
      "validation": {}
    }
  ]
}

이메일 주소 유효성 검사

email_validation 개체는 email 필드에 입력된 데이터의 유효성을 검증하는 se_xsolla_email_validator 매개 변수를 포함합니다.

파라미터유형설명
use_xsolla_email_validator
booleanemail 필드에 입력된 추가 데이터 유효성 검사 사용 여부. true인 경우 이메일 주소가 프런트 엔드 및 백 엔드 측에서 SMTP, RFC, Greylist 같은 기능으로 유효성 검증이 됩니다. false인 경우 이메일 주소는 프런트 엔드 측에서만 유효성 검증이 됩니다. 기본 설정은 false입니다.

예시:

Copy
Full screen
Small screen
{
  // Other widget settings

  "email_validation": {
    "use_xsolla_email_validator": true
  }
}

추가 설정

추가 설정은 settingsJSON 파일의 JSON 개체 루트에서 전달됩니다.

파라미터유형설명
can_register
boolean사용자 등록 활성화 여부. true가 기본 설정입니다.
can_reset_password
boolean사용자 암호 재설정 활성화 여부. true가 기본 설정입니다.
string사용자 정책 동의 링크.
string쿠키 정책 링크.
privacy_policy
string개인 정보 정책 링크.
tos_url
string이용 약관 링크.
game_name
string프로젝트 또는 게임의 이름. 일부 권한 부여 방법에 표시됨.

예시:

Copy
Full screen
Small screen
{{
  // Other widget settings

  "can_register": true,
  "can_reset_password": true,
  "cookie_policy": "https://someurl.com"
}

소셜 네트워크 설정

소셜 로그인용으로 socialsJSON 파일에서 전달되어야 하는 매개 변수:

  • 지역 목록
  • 모든 지역에 대한 소셜 네트워크 매개 변수 및 유형

socialsJSON 파일 템플릿:

Copy
Full screen
Small screen
{
  "1": {
    "primary": [
      // Array of social networks for primary type
    ],
    "secondary": [
      // Array of social networks for secondary type
    ]
  },
  "2": {
    "primary": [
      // Array of social networks for primary type
    ],
    "secondary": [
      // Array of social networks for secondary type
    ]
  },
  "3": {
    "primary": [
      // Array of social networks for primary type
    ],
    "secondary": [
      // Array of social networks for secondary type
    ]
  },
  "4": {
    "primary": [
      // Array of social networks for primary type
    ],
    "secondary": [
      // Array of social networks for secondary type
    ]
  },
  "5": {
    "primary": [
      // Array of social networks for primary type
    ],
    "secondary": [
      // Array of social networks for secondary type
    ]
  },
  "6": {
    "primary": [
      // Array of social networks for primary type
    ],
    "secondary": [
      // Array of social networks for secondary type
    ]
  }
}

각 지역의 숫자:

  • 1 — 유럽
  • 2 — 중국
  • 3 — 북한 및 남한
  • 4 — CIS
  • 5 — 북미 및 남미
  • 6 — 나머지 국가

소셜 네트워크 유형이 모든 지역에 대하여 정의되어 있습니다. 2가지 유형의 소셜 네트워크: 기본 (primary) 및 보조(secondary). 기본 소셜 네트워크는 큰 버튼으로 표시되며 위젯 페이지에서 더 뚜렷하게 보입니다. 보조 소셜 네트워크는 작은 버튼으로 덜 뚜렷하게 표시됩니다.

개체 배열을 포함하고 있는 모든 소셜 네트워크 유형:

파라미터유형설명
name
string소셜 네트워크 이름. 사용할 수 있는 옵션: amazon, apple, baidu, battlenet, china_telecom, discord, email, epicgames, facebook, github, google, google-plus, instagram, kakao, linkedin, mailru, microsoft, msn, naver, ok, paradox, paypal, pinterest, qq, reddit, steam, slack, twitch, twitter, vimeo, vk, wechat, weibo, xbox, yahoo, yandex, youtube.
jwt
stringJWT 권한 부여가 사용되는 경우의 소셜 네트워크 열기 링크.
oauth2
stringOAuth 2.0 프로토콜 기반 권한 부여가 사용되는 경우의 소셜 네트워크 열기 링크.
Note
모든 소셜 네트워크는 한 번 이상 배열에 나타나야 합니다. 배열은 비어 있을 수 있습니다.

예시:

Copy
Full screen
Small screen
{
  "1": {
    "primary": [{
      "name": "google",
      "jwt": "https://login.xsolla.com/api/social/google/login_redirect",
      "oauth2": "https://login.xsolla.com/api/oauth2/social/google/login_redirect"
    }],
    "secondary": [{
        "name": "facebook",
        "jwt": "https://login.xsolla.com/api/social/facebook/login_redirect",
        "oauth2": "https://login.xsolla.com/api/oauth2/social/facebook/login_redirect"
      },
      {
        "name": "twitter",
        "jwt": "https://login.xsolla.com/api/social/twitter/login_redirect",
        "oauth2": "https://login.xsolla.com/api/oauth2/social/twitter/login_redirect"
      }
    ]
  },
  "2": {
    "primary": [{
      "name": "wechat",
      "jwt": "https://login.xsolla.com/api/social/wechat/login_redirect",
      "oauth2": "https://login.xsolla.com/api/oauth2/social/wechat/login_redirect"
    }],
    "secondary": [{
        "name": "facebook",
        "jwt": "https://login.xsolla.com/api/social/facebook/login_redirect",
        "oauth2": "https://login.xsolla.com/api/oauth2/social/facebook/login_redirect"
      },
      {
        "name": "twitter",
        "jwt": "https://login.xsolla.com/api/social/twitter/login_redirect",
        "oauth2": "https://login.xsolla.com/api/oauth2/social/twitter/login_redirect"
      },
      {
        "name": "steam",
        "jwt": "https://login.xsolla.com/api/social/steam/login_redirect",
        "oauth2": "https://login.xsolla.com/api/oauth2/social/steam/login_redirect"
      }
    ]
  }

  // More regions
}

테마 설정

위젯 테마 설정에 포함된 사항:

  • 위젯 색상 및 크기 설정
  • 라운딩 설정(rounding 개체)
  • 위젯 배경 설정(background 개체)
  • 헤더 설정( header 개체)
  • 위젯 탭 설정(tabs 개체)
  • 소셜 네트워크 표시 설정(primary_socialssecondary_socials 개체)
  • 장면 설정( scene 개체)
  • themeJSON 파일 템플릿:

    Copy
    Full screen
    Small screen
    {
      // Color and size settings
    
      "header": {
        // Header settings
      },
      "background": {
        // Widget background settings
      },
      "rounding": {
        // Rounding settings
      },
      "tabs": {
        // Tab settings
      },
      "primary_socials": {
        // Display settings for the primary social networks
      },
      "secondary_socials": {
        // Display settings for the secondary social networks
      },
      "scene": {
        // Scene settings
      }
    }

    위젯 색상 및 크기

    themeJSON 파일의 JSON 개체 루트에서 위젯 색상 및 크기가 전달됩니다.

    파라미터유형설명
    primary_color
    stringRGB 또는 HEX 형식의 기본 위젯 색상(버튼 색상 및 활성 입력 필드 테두리). 기본값은 #0073F7입니다.
    secondary_color
    stringRGB 또는 HEX 형식의 보조 위젯 색상(비활성 입력 필드 색상). 기본값은 #DADADA입니다.
    error_color
    stringRGB 또는 HEX 형식의 오류 텍스트 색상. 기본값은 #EB002F입니다.
    text_color
    stringRGB 또는 HEX 형식의 메인 텍스트 색상. 기본값은 #000000입니다.

    예시:

    Copy
    Full screen
    Small screen
    {
      // Other theme settings
    
      "primary_color": "#708090",
      "secondary_color": "#4682B4"
    }

    라운딩

    rounding 개체는 여러 위젯 요소용 라운딩 매개 변수를 포함합니다. 4개의 모든 코너에 속성이 동시에 적용됩니다.

    파라미터유형설명
    inputs
    string활성 필드 픽셀 라운딩. 기본값은 6px입니다.
    buttons
    string버튼 픽셀 라운딩. 기본값은 100px입니다.
    widget
    string위젯용 픽셀 라운딩. 기본값은 6px입니다.

    예시:

    Copy
    Full screen
    Small screen
    {
      // Other theme settings
    
      "rounding": {
        "inputs": "8px",
        "widget": "8px"
    
      }
    }

    배경

    background 개체는 위젯 배경 매개 변수를 포함합니다.

    파라미터유형설명
    color
    stringRGB 또는 HEX 형식 배경 색상. 기본값은 #FFFFFF입니다.
    image
    object배경 이미지. 해당 개체는 이미지 및 불투명도 설정 링크를 포함합니다. 기본 불투명값은 1입니다.

    예시:

    Copy
    Full screen
    Small screen
    {
      // Other theme settings
    
      "background": {
        "color": "#708090",
        "image": {
          "url": "https://someurl.com",
          "opacity": "3"
        }
      }
    }

    헤더

    header 개체는 위젯 헤더 매개 변수를 포함합니다(모든 위젯 필드 위의 영역).

    파라미터유형설명
    image
    object헤더 배경 이미지. 해당 개체는 이미지, 불투명도 설정, 배경 이미지 크기 링크를 포함합니다. 기본 불투명도값은 1입니다.
    사용할 수 있는 배경 이미지 크기의 값은 background-size CSS 속성값과 일치합니다(cover로 기본 설정되어 있습니다).

    예시:

    Copy
    Full screen
    Small screen
    {
      // Other theme settings
    
      "header": {
        "image": {
          "url": "https://someurl.com",
          "opacity": "3",
          "size": "cover"
        }
      }
    }

    tabs 개체는 hide매개 변수를 포함합니다. 이 매개 변수는 위젯에 등록 또는 권한 부여 탭 표시를 관리합니다.

    파라미터유형설명
    hide
    boolean위젯에 권한 부여 또는 등록 탭 숨김 여부. true 값을, 예를 들어 일시적으로 등록 탭을 숨기거나 등록 및 권한 부여 페이지를 따로 표시하거나 하는 데에 사용하세요. 기본값은 false입니다.

    예시:

    Copy
    Full screen
    Small screen
    {
      // Other theme settings
    
      "tabs": {
        "hide": true
      }
    }

    소셜 네트워크 표시

    primary_socialssecondary_socials 개체는 위젯에서 기본 및 보조 소셜 네트워크 표시를 관리하는 hide 매개 변수를 포함합니다.

    파라미터유형설명
    hide
    boolean소셜 네크워트 숨김 여부. 기본값은 false입니다.

    예시:

    Copy
    Full screen
    Small screen
    {
      // Other theme settings
    
      "primary_socials": {
        "hide": true
      },
      "secondary_socials": {
        "hide": false
      }
    }

    장면

    scene 개체는 장면용 매개 변수를 포함합니다(위젯 주변 영역).

    파라미터유형설명
    color
    stringRGB 또는 HEX 형식 배경 색상. 기본값은 #FFFFFF입니다.
    image
    object배경 이미지. 해당 개체는 이미지, 불투명도 설정, 배경 이미지 크기 링크를 포함합니다. 사용할 수 있는 배경 이미지 크기의 값은 background-size CSS 속성값과 일치합니다(cover로 기본 설정되어 있습니다).

    예시:

    Copy
    Full screen
    Small screen
    {
      // Other theme settings
    
      "scene": {
        "color": "#708090",
        "image": {
          "url": "https://someurl.com",
          "size": "cover"
        }
      }
    }

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

    답하기 원하지 않습니다

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

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

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