ウィジェット設定を含むJSONファイル

ウィジェットの設定は、次のJSONファイルに含まれています：

settingsJSON — 主な設定
socialsJSON — ソーシャルログイン設定
themeJSON — テーマ設定

ファイル内の設定を再利用して，同じウィジェットを異なる設定で表示することができます。設定URLは，ウィジェットの初期化コードで指定します。

Copy

Full screen

Small screen

1<script>
2const xl = new XsollaLogin.Widget({
3  // Other settings
4  settingsJSON: "url_string",
5  socialsJSON: "url_string",
6  themeJSON: "url_string"
7});
8</script>

主な設定

主なウィジェット設定は次のとおり：

認証方法（authorization_methodsオブジェクト）
登録フィルド（registration_fieldsオブジェクト）
メールアドレス検証（email_validationオブジェクト）
追加設定

settingsJSONファイルのテンプレートは：

Copy

Full screen

Small screen

 1{
 2  "authorization_methods": {
 3    // Authorization methods
 4  },
 5  "registration_fields": {
 6    // Registration fields
 7  },
 8  "email_validation": {
 9    // Settings for email validation
10  }
11
12  // Other widget settings
13}

認証方法

authorization_methodsオブジェクトには、利用可能な認証方法を含む配列が含まれています。渡された設定に従って、ログインページが表示されます。

配列には少なくとも1つのメソッドを渡す必要があります。すべてのメソッドを複数回、配列で表現することはできません。

利用可能な認証方法：

email — 電子メールアドレスとパスワード経由での認証。このパラメータは、メソッドの明確なリストを持つauthorization_methodsオブジェクトが存在しない場合、デフォルトで渡されます。
social — ソーシャルログイン。メソッドの明確なリストを持つauthorization_methodsオブジェクトがない場合、パラメータはデフォルトで渡されます。
username — ユーザー名とパスワード経由での認証。
phone — 電話番号とSMSコード経由での認証。
passwordless-email-code — メールアドレスとメールに記載されたコード経由での認証。

例：

Copy

Full screen

Small screen

1{
2  "authorization_methods": ["email", "phone"]
3}

登録フィルド

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	プロモーション資料を受け取ることへの同意。

配列には、少なくとも1つのフィールドを含める必要があります。フィールドは、配列に渡された順番に従って表示されます。

さらに、フィールドには以下のパラメータを指定することができます：

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

 1{
 2  "registration_fields": [
 3    {
 4      "name": "username",
 5      "required": false,
 6      "type": "str",
 7      "validation": {
 8        "allowed_characters": "A-Z, a-z, 0-9",
 9        "max_length": 16,
10        "min_length": 5,
11        "regexps": ["^.{5,16}$"]
12      }
13    },
14    { "name": "email", "required": true, "type": "email", "validation": {} },
15    { "name": "bday", "required": true, "type": "date", "validation": {} },
16    {
17      "name": "platform",
18      "default_value": ["MacOS", "Nintendo Switch", "Steam"],
19      "required": false,
20      "type": "multi-select",
21      "validation": {}
22    },
23    {
24      "name": "country-name",
25      "default_value": ["US", "GB", "DE"],
26      "required": false,
27      "type": "select",
28      "validation": {}
29    },
30    { "name": "password", "required": true, "type": "pass", "validation": {} },
31    {
32      "name": "password_confirm",
33      "required": false,
34      "type": "pass",
35      "validation": {}
36    },
37    {
38      "name": "promo_email_agreement",
39      "required": false,
40      "type": "bool",
41      "validation": {}
42    }
43  ]
44}

メールアドレスの検証

email_validationオブジェクトには、emailフィールドに入力されたデータを検証するse_xsolla_email_validatorパラメータが含まれています。

パラメータ	種類	説明文
use_xsolla_email_validator	boolean	`email`フィールドに入力されたデータの追加の検証を使用するかどうか。`true`の場合、メールアドレスはフロントエンド側とバックエンド側でSMTP、RFC、Greylistなどの機能を使って検証されます。`false`の場合、メールアドレスはフロントエンド側でのみ検証されます。デフォルトでは`false`です。

例：

Copy

Full screen

Small screen

1{
2  "email_validation": {
3    "use_xsolla_email_validator": true
4  }
5}

追加設定

追加の設定は、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

1{
2  "can_register": true,
3  "can_reset_password": true,
4  "cookie_policy": "https://someurl.com"
5}

ソーシャルネットワークの設定

ソーシャルログインの場合、次のパラメータがsocialsJSONファイルで渡されます：

地域のリスト
すべての地域のソーシャルネットワークのパラメータとタイプ

socialsJSONファイルのテンプレートは：

Copy

Full screen

Small screen

 1{
 2  "1": {
 3    "primary": [
 4      // Array of social networks for primary type
 5    ],
 6    "secondary": [
 7      // Array of social networks for secondary type
 8    ]
 9  },
10  "2": {
11    "primary": [
12      // Array of social networks for primary type
13    ],
14    "secondary": [
15      // Array of social networks for secondary type
16    ]
17  },
18  "3": {
19    "primary": [
20      // Array of social networks for primary type
21    ],
22    "secondary": [
23      // Array of social networks for secondary type
24    ]
25  },
26  "4": {
27    "primary": [
28      // Array of social networks for primary type
29    ],
30    "secondary": [
31      // Array of social networks for secondary type
32    ]
33  },
34  "5": {
35    "primary": [
36      // Array of social networks for primary type
37    ],
38    "secondary": [
39      // Array of social networks for secondary type
40    ]
41  },
42  "6": {
43    "primary": [
44      // Array of social networks for primary type
45    ],
46    "secondary": [
47      // Array of social networks for secondary type
48    ]
49  }
50}

すべての地域には番号があります：

1 — ヨーロッパ
2 — 中国
3 — 北と韓国
4 — 独立国家共同体
5 — 北アメリカと南アメリカ
6 — その他の地域

ソーシャルネットワークのタイプは、地域ごとに定義されています。ソーシャルネットワークには、プライマリー（primary）とセカンダリー（secondary）の2種類があります。プライマリソーシャルネットワークは、大きなボタンで表示され、ウィジェットページで目につきやすくなります。セカンダリーソーシャルネットワークは、小さなボタンで表示され、目立ちません。

ソーシャルネットワークの各タイプには、オブジェクトの配列が含まれています：

パラメータ	種類	説明文
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{
 2  "1": {
 3    "primary": [{
 4      "name": "google",
 5      "jwt": "https://login.xsolla.com/api/social/google/login_redirect",
 6      "oauth2": "https://login.xsolla.com/api/oauth2/social/google/login_redirect"
 7    }],
 8    "secondary": [{
 9        "name": "facebook",
10        "jwt": "https://login.xsolla.com/api/social/facebook/login_redirect",
11        "oauth2": "https://login.xsolla.com/api/oauth2/social/facebook/login_redirect"
12      },
13      {
14        "name": "twitter",
15        "jwt": "https://login.xsolla.com/api/social/twitter/login_redirect",
16        "oauth2": "https://login.xsolla.com/api/oauth2/social/twitter/login_redirect"
17      }
18    ]
19  },
20  "2": {
21    "primary": [{
22      "name": "wechat",
23      "jwt": "https://login.xsolla.com/api/social/wechat/login_redirect",
24      "oauth2": "https://login.xsolla.com/api/oauth2/social/wechat/login_redirect"
25    }],
26    "secondary": [{
27        "name": "facebook",
28        "jwt": "https://login.xsolla.com/api/social/facebook/login_redirect",
29        "oauth2": "https://login.xsolla.com/api/oauth2/social/facebook/login_redirect"
30      },
31      {
32        "name": "twitter",
33        "jwt": "https://login.xsolla.com/api/social/twitter/login_redirect",
34        "oauth2": "https://login.xsolla.com/api/oauth2/social/twitter/login_redirect"
35      },
36      {
37        "name": "steam",
38        "jwt": "https://login.xsolla.com/api/social/steam/login_redirect",
39        "oauth2": "https://login.xsolla.com/api/oauth2/social/steam/login_redirect"
40      }
41    ]
42  }
43}

テーマ設定

ウィジェットテーマの設定は以下の通り：

ウィジェットの色とサイズの設定
端数処理設定（roundingオブジェクト）
ウィジェットの背景設定（backgroundオブジェクト）
ヘッダー設定（headerオブジェクト）
ウィジェットタブの設定（tabsオブジェクト）
ソーシャルネットワークの表示設定（primary_socialsとsecondary_socialsオブジェクト）
シーン設定（sceneオブジェクト）

themeJSONファイルのテンプレートは：

Copy

Full screen

Small screen

 1{
 2  // Color and size settings
 3
 4  "header": {
 5    // Header settings
 6  },
 7  "background": {
 8    // Widget background settings
 9  },
10  "rounding": {
11    // Rounding settings
12  },
13  "tabs": {
14    // Tab settings
15  },
16  "primary_socials": {
17    // Display settings for the primary social networks
18  },
19  "secondary_socials": {
20    // Display settings for the secondary social networks
21  },
22  "scene": {
23    // Scene settings
24  }
25}

ウィジェットの色とサイズ

ウィジェットの色とサイズは、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

1{
2  "primary_color": "#708090",
3  "secondary_color": "#4682B4"
4}

端数処理

roundingは、異なるウィジェット要素の端数処理のパラメータを含んでいます。このプロパティは、4つのコーナーすべてに同時に適用されます。

パラメータ	種類	説明文
inputs	string	アクティブフィールドのピクセル単位の端数処理。デフォルト値は`6px`です。
buttons	string	ボタンのピクセル単位の端数処理。デフォルト値は`100px`です。
widget	string	ウィジェットのピクセル単位の端数処理。デフォルト値は`6px`です。

例：

Copy

Full screen

Small screen

1{
2  "rounding": {
3    "inputs": "8px",
4    "widget": "8px"
5
6  }
7}

背景

backgroundオブジェクトは、ウィジェットの背景パラメータを含みます。

パラメータ	種類	説明文
color	string	RGBまたはHEX形式の背景色。デフォルト値は`#FFFFFF`です。
image	object	背景画像です。このオブジェクトには、画像へのリンクと不透明度の設定が含まれています。不透明度のデフォルト値は`1`です。

例：

Copy

Full screen

Small screen

1{
2  "background": {
3    "color": "#708090",
4    "image": {
5      "url": "https://someurl.com",
6      "opacity": "3"
7    }
8  }
9}

ヘッダー

headerオブジェクトは、ウィジェットヘッダー（すべてのウィジェットフィールドの上の領域）のパラメータを含みます。

パラメータ	種類	説明文
image	object	ヘッダーの背景画像。このオブジェクトには、画像へのリンク、不透明度の設定、背景画像のサイズが含まれています。不透明度のデフォルト値は`1`です。背景画像サイズの使用可能な値は、`background-size` CSSプロパティ（デフォルトでは`cover`）の値に対応しています。

例：

Copy

Full screen

Small screen

1{
2  "header": {
3    "image": {
4      "url": "https://someurl.com",
5      "opacity": "3",
6      "size": "cover"
7    }
8  }
9}

タブ

tabsオブジェクトには、hideパラメータがあります。このパラメータは、ウィジェット上の登録または認証タブの表示を管理します。

パラメータ	種類	説明文
hide	boolean	ウィジェット上の認証または登録タブを非表示にするかどうかを指定します。`true`の値を使用して、例えば、登録タブを一時的に非表示にしたり、登録と承認のページを別々に表示したりします。デフォルト値は`false`です。

例：

Copy

Full screen

Small screen

1{
2  "tabs": {
3    "hide": true
4  }
5}

ソーシャルネットワークディスプレイ

primary_socialsおよびsecondary_socialsオブジェクトには、ウィジェット上でのプライマリおよびセカンダリのソーシャルネットワークの表示を管理するhideパラメータが含まれています。

パラメータ	種類	説明文
hide	boolean	ソーシャルネットワークを非表示にするかどうか。デフォルト値は`false`です。

例：

Copy

Full screen

Small screen

1{
2  "primary_socials": {
3    "hide": true
4  },
5  "secondary_socials": {
6    "hide": false
7  }
8}

シーン

sceneオブジェクトには、シーンのパラメータ（ウィジェットの周囲の領域）が含まれています。

パラメータ	種類	説明文
color	string	RGBまたはHEX形式の背景色。デフォルト値は`#FFFFFF`です。
image	object	背景画像。このオブジェクトは、画像へのリンク、不透明度の設定、および背景画像のサイズを含みます。背景画像サイズの使用可能な値は、`background-size` CSSプロパティ（デフォルトでは`cover`）の値に対応しています。

例：

Copy

Full screen

Small screen

1{
2  "scene": {
3    "color": "#708090",
4    "image": {
5      "url": "https://someurl.com",
6      "size": "cover"
7    }
8  }
9}

ご意見ありがとうございました！

あなたのメッセージを確認し、体験を向上させるために利用させていただきます。

最終更新日: 2025年9月19日

誤字脱字などのテキストエラーを見つけましたか？テキストを選択し、Ctrl+Enterを押します。

内容

主な設定
認証方法
登録フィルド
メールアドレスの検証
追加設定
ソーシャルネットワークの設定
テーマ設定
ウィジェットの色とサイズ
端数処理
背景
ヘッダー
タブ
ソーシャルネットワークディスプレイ
シーン

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