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

利用可能な認証方法:

  • 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
配列には、少なくとも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
{
  // 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 — 独立国家共同体
  • 5 — 北アメリカと南アメリカ
  • 6 — その他の地域

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

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

パラメータ種類説明文
name
stringソーシャルネットワークの名前。利用可能なオプション:amazonapplebaidubattlenetchina_telecomdiscordemailepicgamesfacebookgithubgooglegoogle-plusinstagramkakaolinkedinmailrumicrosoftmsnnaverokparadoxpaypalpinterestqqredditsteamslacktwitchtwittervimeovkwechatweiboxboxyahooyandexyoutube
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_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
    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日

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

問題を報告する
当社は常にコンテンツを見直しています。お客様のご意見は改善に役立ちます。
フォローアップ用のメールをご提供してください
ご意見ありがとうございました!