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 | 繁体字中国語(台湾) |
行動検証ダウンタイムモード
ダウンタイムモードは、極端な状況で異常なキャプチャ検証プロセスが通常の業務プロセスに影響を与えないようにするための緊急処理モードです。
ダウンタイムモードは主に、ウェブサイトのメインサーバーが検証サーバーに接続できず、接続タイムアウトなどの問題が発生した場合に発生します。
ダウンタイムモードでは、すべての検証プロセスが検証サーバーを通過しません。アクセス側は検証ロジックを追加するか、製品のダウングレードプランを用意する必要があります。

検証サーバーがダウンタイムモードに入ると、
クライアントプロセスは変更されず、キャプチャをトリガーすると即座に成功し、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"
}// 業務システムに送信...
})})
このコードブロックはフローティングウィンドウ内に表示されます










