フロントエンドVueのプロジェクト - ログインページの実装

、geetestスライディング検証

　　geetest公式文書住所：https://docs.geetest.com/

　　製品-スピード検証：学習の深さに基づいてCAPTCHAアプリケーション。ポールテスト「動作検証は、」APPのお手伝いをすることができ、サイトで識別し、遮断機のプログラムのバッチ・オートメーション・ SaaSアプリケーション。それは、それは伝統的に基づくものではない、製品の新世代を開発した非常に人間の経験によって検証された「質問-答えは」テストモードではなく、高次元データ解析をプロセスで生成した検証のための深い学習行動を使用して、人間の行動ことがわかりました行動パターンや特性の違い、人間の行動との間のより正確な区別。

1、Webデプロイメント記述

　　クライアントの公式文書：https://docs.geetest.com/install/deploy/client/web/

（1）導入初期化関数

　　gt.jsファイル、initGeetest初期化機能の導入を導入することにより。

< スクリプトSRC = "gt.js" > </ スクリプト>

　　注意：で初期動作検証要件ビジネスページの読み込み時間は同じ時に初期化され、ユーザーが読み取りまたは検証ポリシーの失敗につながる、行動データのビジネスページで動作を確認することはできません。

　　ここでは、対応する認証JSライブラリをロードするために使用されたファイルを、gt.js。各バックエンドの言語SDKのプロジェクトの使用にファイルをコピーする必要があり、実際の環境に展開するための開発者があります。

　　ファイルアドレスがある前に  https://static.geetest.com/static/tools/gt.js   、代わりにファイルをロードすることはできません静的なサーバーの問題を防ぐために、ユーザのプロジェクトに保存されています。

（2）初期化関数の初期化を呼び出します 

アヤックス（{ 
    URL： "API1インタフェース（デプロイメントサーバーを参照してください）" 、
    種類： "GET" 、
    データ型： "JSON" 、
    成功：機能（データ）{
         // data.gtを確保するために、データの検出されたデータ構造を作成し、 data.challenge、data.success値有する
        initGeetest（{
             // サーバSDKから次の設定パラメータ
            ：data.gt、GT 
            チャレンジ：data.challenge、
            オフライン：！data.success、
            ：new_captcha trueには
        、} 関数（captchaObj）を{
             // この例は、例示的な方法captchaObjを確認するために呼び出すことができます
         }）
    } 
}）

　　注：について複数の符号シーン同じページの初期化コードが別々の方法を初期化するinitGeetest各シーンリコールのために必要な、場合認証入口次のシーンが複数である、複数の初期化のために必要。

（3）製品の検証二つのパラメータ

　　動作検証、クリックするだけの検証を通じて実際のユーザーの大多数。しかし、アカウントに実際のリスク状況を取って、検証の次の段階に入り、リスク行動の検証要求であると判定されます。この場合、ポップアップ認証の動作は、ユーザーフレンドリーなインターフェイス自体は互換性があり、2つの認証対話スタイルを提供します。検証例を浮動ここフロート：

initGeetest（{
     // 省略必要な構成パラメータ

    製品： 'フロート' 
}、関数（captchaObj）{ 
    captchaObj.appendTo（ "#captchaBox"）; // ボタンは、ホスト認証ページcaptchaBox要素に挿入される 
    captchaObj.onReady（関数（）{
       // コード 
    （}）するonSuccess 関数（）{
       // コード 
    （}）のonError 関数（）{
       // コード
    }）
}）。

2、VUEプロジェクトのログインページが達成geetest

　　ログインインターフェース情報geetestページを使用して、主要なサイトの観察は、あなたがデータを返送されたリクエストは値GT、挑戦を含んで見つけることができ、成功があります。Geetestはで単一ページのアプリケーションLogin.vueを実現することを確認します。

（1）プロジェクトでグローバルgeetest導入

　　フロント/src/global/gt.jsプロジェクト内のファイルを作成し、ファイルアドレスに書き込み  https://static.geetest.com/static/tools/gt.js  コンテンツ。

　　gt.jsファイルの/src/main.jsグローバルな導入には：

インポート」../static/global/gt.js'

（2）インタフェースgeetestを追加

　　次のように/src/restful/api.jsにgeetestインタフェースを追加しました：

// geetest接口 
geetest =（）=>エクスポートのconst {
   戻り Axios.get（ 'captcha_checkを/'）、次いで（RES =>。res.data）。
}

（3）設定方法getGeetest

　　Geetestコール初期化関数はgetGeetest方法で初期化します。

<スクリプト> 
  エクスポートデフォルト{ 
    名： 'ログイン' 、
    データ（）{ 
      リターン{ 
        ユーザー名： "" 、
        パスワード： "" 
      } 
    }、
    メソッド：{ 
      getGeetest（）{ 
        これ。http.geetest $（）
          .then（RES = > { 
            にconsole.log（RES）; 
            LETデータ = res.dataが;
             // 検出データ、データ構造、data.gtを保証する、data.challengeを行い、data.success値有する
            initGeetest（{
               // サーバから次の構成パラメータをSDK
              GT：data.gt、                  // IDを確認し、バックグラウンドアプリケーションは非常検査で 
              チャレンジ：data.challenge、    // ポールテストサーバーを取得するために、シリアル番号、アプリケーション・サーバーのSDKを検証する 
              オフライン:! data.successを、       // ポールテストAPIサーバがダウンして（すなわち、フォールバック状態）である 
              new_captcha：trueに、            // ダウンタイムの場合、2.0、3.0または3.0は、真のフィールドSDKの検証を表し 
              製品を：ポップアップ、               // ポップショー
              有する：「100％ '                  // によるデフォルトの幅300ピクセル 
            }、関数（captchaObj）{
               // このインスタンスを呼び出すことができるインスタンスメソッド検証captchaObj
              captchaObj.appendTo（ "＃1 geetest"）; // ボタンは、ホスト認証ページcaptchaObj要素に挿入される 
              captchaObj.onReady（関数（）{
                 // コード 
              }）するonSuccess（関数（）{
                 // コード 
              }） .onError（関数（）{
                 // コード
              }）
            }）
          }） 
          。キャッチ（ERR => { 
            にconsole.log（ERR）; 
          }）
      } 
    }、
    作成（）{ 
      この.getGeetest（）。
    } 
  }。
</ SCRIPT>

　　次のように表示します。

　　

第二に、二次処理とデータ検証サインオンの実装