Web SDK 統合ガイド

互換性

項目 説明
互換性 IE9+、Chrome、Firefox、Safari、Opera、主流のモバイルブラウザ、iOSおよびAndroidの埋め込みWebview

検証形式

["slide","icon","nine","match"]
              
              ["slide","icon","nine","match"]

            
このコードブロックはフローティングウィンドウ内に表示されます

現在サポートされている形式:

名称 説明
slide スライディングパズル
icon 順次アイコンクリック
nine 9グリッド
match マッチ3ゲーム

クイックスタート

インポート

gt4.js ファイル

EngageLab 提供

gt4.js をインポートすると、初期化関数 initGeetest がグローバルにマウントされます。

<script src="https://captcha-stat.engagelab.com/www/gt4.js"></script>
              
              <script src="https://captcha-stat.engagelab.com/www/gt4.js"></script>

            
このコードブロックはフローティングウィンドウ内に表示されます

キャプチャの初期化

💡 ヒント

初期化前に、サーバーから Verification ID を取得する必要があります。設定パラメータの詳細を参照してください。

initGeetest 関数を使用して キャプチャインスタンス を取得します。この関数の最初のパラメータはキャプチャの 設定パラメータ で、2番目のパラメータは 初期化完了後のコールバック関数 です。

var config = { captchaId:'xxxx',// 検証ID apiServers:['https://captcha-api.engagelab.com'],// 検証サーバーアドレスリスト、必須設定 staticServers:['https://captcha-stat.engagelab.com/www/js']// 静的リソースサーバーアドレスリスト、必須設定 } /** * @desc 初期化完了後のコールバック * @param { Object } gt キャプチャインスタンス */ var callback=function(gt){ // キャプチャインスタンスに応じて関連業務を処理する、例:キャプチャウィンドウのトリガー、検証成功イベントのリスニングなど... } initGeetest(config, callback)
              
              var config = {
    captchaId:'xxxx',// 検証ID
    apiServers:['https://captcha-api.engagelab.com'],// 検証サーバーアドレスリスト、必須設定
    staticServers:['https://captcha-stat.engagelab.com/www/js']// 静的リソースサーバーアドレスリスト、必須設定
    }
/**
 * @desc 初期化完了後のコールバック
 * @param { Object } gt キャプチャインスタンス
 */
var callback=function(gt){
  // キャプチャインスタンスに応じて関連業務を処理する、例:キャプチャウィンドウのトリガー、検証成功イベントのリスニングなど...
  }
  initGeetest(config, callback)

            
このコードブロックはフローティングウィンドウ内に表示されます

キャプチャウィンドウのトリガー

💡 ヒント

設定パラメータ product により、キャプチャウィンドウをトリガーする方法は2つあります:

  • 提供された組み込みボタンをクリックしてトリガーします。(product の値が bind ではない場合)
  • キャプチャインスタンスの showCaptcha メソッドを呼び出します。(product の値が bind の場合)
<div id="captch_wrap" class="captch-wrap"></div> var config = { captchaId:'xxxx',// 検証ID apiServers:['https://captcha-api.engagelab.com'],// 検証サーバーアドレスリスト、必須設定 staticServers:['https://captcha-stat.engagelab.com/www/js'],// 静的リソースサーバーアドレスリスト、必須設定 product:'bind'// シナリオ2 } /** * @desc 初期化完了後のコールバック * @param { Object } gt キャプチャインスタンス */var callback=function(gt){ gt.onReady(function(){ // シナリオ1、EngageLab 提供の組み込みボタンを使用してキャプチャウィンドウをトリガー // 組み込みボタンを指定エリアに追加 gt.appendTo("#captch_wrap") // シナリオ2、キャプチャウィンドウのカスタムトリガー // インスタンスの `showCaptcha` メソッドを指定イベントで呼び出す // 例:キャプチャが準備完了後に即時トリガー gt.showCaptcha() }) } initGeetest(config, callback)
              
               <div id="captch_wrap" class="captch-wrap"></div>
 var config = {
    captchaId:'xxxx',// 検証ID
    apiServers:['https://captcha-api.engagelab.com'],// 検証サーバーアドレスリスト、必須設定
    staticServers:['https://captcha-stat.engagelab.com/www/js'],// 静的リソースサーバーアドレスリスト、必須設定
    product:'bind'// シナリオ2
}
/**
 * @desc 初期化完了後のコールバック
 * @param { Object } gt キャプチャインスタンス
 */var callback=function(gt){
    gt.onReady(function(){
      // シナリオ1、EngageLab 提供の組み込みボタンを使用してキャプチャウィンドウをトリガー
      // 組み込みボタンを指定エリアに追加
         gt.appendTo("#captch_wrap")
      // シナリオ2、キャプチャウィンドウのカスタムトリガー
      // インスタンスの `showCaptcha` メソッドを指定イベントで呼び出す
      // 例:キャプチャが準備完了後に即時トリガー
        gt.showCaptcha()
        })
        }
      initGeetest(config, callback)

            
このコードブロックはフローティングウィンドウ内に表示されます

検証結果の取得

/** * @desc 初期化完了後のコールバック * @param { Object } gt キャプチャインスタンス */ var callback = function(gt){ // キャプチャウィンドウをトリガー... // 検証結果をリスニング gt.onSuccess(function(res){ console.log(res) }) } initGeetest({...}, callback)
              
              /**
 * @desc 初期化完了後のコールバック
 * @param { Object } gt キャプチャインスタンス
 */
var callback = function(gt){
// キャプチャウィンドウをトリガー...
// 検証結果をリスニング
    gt.onSuccess(function(res){
        console.log(res)
    })
}
initGeetest({...}, callback)

            
このコードブロックはフローティングウィンドウ内に表示されます

設定パラメータ

設定パラメータ

パラメータ 説明 デフォルト値
captchaId string 検証ID、EngageLab バックエンドから取得 必須
product string キャプチャウィンドウの表示モード、選択可能な値:float, popup, bind float
language string 優先的に渡された値を使用し、次に現在のブラウザ言語を使用。それらが一致しない場合はデフォルト値を使用 zh
protocol string ネットワークプロトコル //
apiServers array 検証リクエストサービスアドレス(プロトコルを除く)、必須設定:['https://captcha-api.engagelab.com'] -
staticServers array 検証に必要な静的リソースサービスアドレス(プロトコルを除く)、必須設定:['https://captcha-stat.engagelab.com/www/js'] -
post boolean true に設定するとリクエストメソッドが ajax になり、それ以外は jsonp false
showSuccessTip boolean product が bind の場合の成功通知ウィンドウを制御 true
riskType string スライド、クリックなどの検証形式を指定(バックエンドシステムの検証モードがリスクコントロール融合モードに設定されている場合のみ有効) -
timeout number 検証リクエストのタイムアウト 30000
offlineCb function ダウンタイム時のカスタム処理関数 -
onError function キャプチャ初期化前のエラーキャプチャ -
mask Object キャプチャウィンドウマスクの設定
nativeButton Object 組み込みボタンに関連する設定
toolbar Array ツールバーの設定
clientType string クライアントタイプ、選択可能な値:web
width string キャプチャウィンドウの幅を設定。最大幅は340px(キャプチャウィンドウの高さは自動調整、アスペクト比は約) 340px
zoom number 特殊なシナリオでのスケーリング値、最大値の制限なし(Firefoxブラウザでは固定値1) 1

マスクオブジェクト設定

パラメータ 説明 デフォルト値
backgroundColor string 有効な色値 -
outside boolean キャプチャエリア外をクリックするとキャプチャを閉じる -

ネイティブボタンオブジェクト設定

パラメータ 説明 デフォルト値
width string 組み込みトリガーボタンの幅 -
height string 組み込みトリガーボタンの高さ -

ツールバー配列設定

initGeetest({...,toolbar:['close','refresh']},function(){...})
              
              initGeetest({...,toolbar:['close','refresh']},function(){...})

            
このコードブロックはフローティングウィンドウ内に表示されます

言語設定

initGeetest({...,language:'zh'},function(){...})
              
              initGeetest({...,language:'zh'},function(){...})

            
このコードブロックはフローティングウィンドウ内に表示されます
有効値 説明
close string キャプチャウィンドウの閉じるボタン
refresh string キャプチャウィンドウのリフレッシュボタン

言語(18種類)

選択可能な値 言語
ara アラビア語
deu ドイツ語
eng 英語
fra フランス語
ind インドネシア語
jpn 日本語
kor 韓国語
msa マレー語
pon ブラジルポルトガル語
por ヨーロッパポルトガル語
rus ロシア語
spa スペイン語
tha タイ語
udm ウイグル語
vie ベトナム語
zh 簡体字中国語
zho-hk 繁体字中国語(香港)
zho-tw 繁体字中国語(台湾)

行動検証ダウンタイムモード

ダウンタイムモードは、極端な状況で異常なキャプチャ検証プロセスが通常の業務プロセスに影響を与えないようにするための緊急処理モードです。

ダウンタイムモードは主に、ウェブサイトのメインサーバーが検証サーバーに接続できず、接続タイムアウトなどの問題が発生した場合に発生します。

ダウンタイムモードでは、すべての検証プロセスが検証サーバーを通過しません。アクセス側は検証ロジックを追加するか、製品のダウングレードプランを用意する必要があります。

image

検証サーバーがダウンタイムモードに入ると、

クライアントプロセスは変更されず、キャプチャをトリガーすると即座に成功し、onSuccess に入ります。

業務システムはキャプチャシステムに二次検証を送信し、タイムアウトした場合はダウンタイムと確認されます。

initGeetest({...},function(gt){... gt.onSuccess(function(res){ console.log(res)// 検証成功結果の例 { captcha_id: "59bbe0f128f0624fdd185a6a2207aa54", captcha_output: "X000Q5p.....i-SFRyH1", client_type: "web", gen_time: "1648204854", lot_number: "200e2e58e1d3a6906e08cc9ff5c6e0b5", offline: true, pass_token: "e000b4dc372c1397976f7b8f12d66ea8d5c993ab2db5810258e835429f6fa4ae" }// 業務システムに送信... })})
              
              initGeetest({...},function(gt){...
    gt.onSuccess(function(res){
        console.log(res)// 検証成功結果の例
        {  captcha_id: "59bbe0f128f0624fdd185a6a2207aa54",
             captcha_output: "X000Q5p.....i-SFRyH1",
          client_type: "web",
              gen_time: "1648204854",
                lot_number: "200e2e58e1d3a6906e08cc9ff5c6e0b5",	
              offline: true,
                  pass_token: "e000b4dc372c1397976f7b8f12d66ea8d5c993ab2db5810258e835429f6fa4ae"
                 }// 業務システムに送信...
                 })})

            
このコードブロックはフローティングウィンドウ内に表示されます
icon
お問い合わせ