위젯 설정 JSON 파일

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

settingsJSON — 메인 설정
socialsJSON — 소셜 로그인 설정
themeJSON — 테마 설정

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

Copy

Full screen

Small screen

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

메인 설정

메인 위젯 설정:

권한 부여 방법(authorization_methods 개체)
등록 필드(registration_fields 개체)
이메일 주소 유효성 검사(email_validation 개체)
추가 설정

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

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

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

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	프로모션 자료 수신에 동의.

배열은 하나 이상의 필드를 포함해야 합니다. 필드는 배열에 전달되는 것에 따라 표시됩니다.

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

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	boolean	`email` 필드에 입력된 추가 데이터 유효성 검사 사용 여부. `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`가 기본 설정입니다.
consent_url	string	사용자 정책 동의 링크.
cookie_policy	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	string	JWT 권한 부여가 사용되는 경우의 소셜 네트워크 열기 링크.
oauth2	string	OAuth 2.0 프로토콜 기반 권한 부여가 사용되는 경우의 소셜 네트워크 열기 링크.

모든 소셜 네트워크는 한 번 이상 배열에 나타나야 합니다. 배열은 비어 있을 수 있습니다.

예시:

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_socials 및 secondary_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	string	RGB 또는 HEX 형식의 기본 위젯 색상(버튼 색상 및 활성 입력 필드 테두리). 기본값은 `#0073F7`입니다.
secondary_color	string	RGB 또는 HEX 형식의 보조 위젯 색상(비활성 입력 필드 색상). 기본값은 `#DADADA`입니다.
error_color	string	RGB 또는 HEX 형식의 오류 텍스트 색상. 기본값은 `#EB002F`입니다.
text_color	string	RGB 또는 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	string	RGB 또는 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_socials 및 secondary_socials 개체는 위젯에서 기본 및 보조 소셜 네트워크 표시를 관리하는 hide 매개 변수를 포함합니다.

매개 변수	유형	설명
hide	boolean	소셜 네크워트 숨김 여부. 기본값은 `false`입니다.

예시:

Copy

Full screen

Small screen

{
  // Other theme settings

  "primary_socials": {
    "hide": true
  },
  "secondary_socials": {
    "hide": false
  }
}

장면

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

매개 변수	유형	설명
color	string	RGB 또는 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"
    }
  }
}

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

메시지를 검토한 후 사용자 경험 향상에 사용하겠습니다.

마지막 업데이트: 2024년 1월 22일

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

Your browser is not supported. Please try a different browser

다음 소스를 바탕으로 답해주세요:

피드백을 남겨주세요(선택 사항)

피드백을 남겨주세요(선택 사항)

로그인

위젯 설정 JSON 파일

메인 설정

권한 부여 방법

등록 필드

email

username

password

password_confirm

given-name

family-name

nickname

bday

gender

country-name

platform

promo_email_agreement

이메일 주소 유효성 검사

use_xsolla_email_validator

추가 설정

can_register

can_reset_password

consent_url

cookie_policy

privacy_policy

tos_url

game_name

소셜 네트워크 설정

name

jwt

oauth2

테마 설정

위젯 색상 및 크기

primary_color

secondary_color

error_color

text_color

라운딩

inputs

buttons

widget

배경

color

image

헤더

image

탭

hide

소셜 네트워크 표시

hide

장면

color

image