vue足場でアリPC端末機検証フロントエンドを実現

17719 ワード
vue javascript
vue足場でアリクラウドPCページのヒューマンスライド検証を実現
ここでは、公式ドキュメントアリpcのWebページのスライド検証コードの統合を添付します.
  • public/indexに
    • を追加
    <head>
     <!--      -->
    <script type="text/JAVAscript" charset="utf-8" src="https://g.alicdn.com/sd/ncpc/nc.js?t=2015052012"></script>
    <!--             ，        js   -->
    <!-- <script type="text/JavaScript" charset="utf-8" src="//aeis.alicdn.com/sd/ncpc/nc.js?t=2015052012"></script> -->
</head>

    2.ページにhtmlコードを使う
           <div id="slide" class="nc-container"></div>//slide id    
       <div class="container">
          <form action="http://192.168.0.100/api/Verification_code" method="post">//    
              <input type="hidden" id="nc_token" name="token"/>//token
              <input type="hidden" id="csessionid" name="session_id"/>//sesson_id
              <input type="hidden" id="scene" name="scene" />//     
              <input type="hidden" id="sig" name="sig" />//  
              <!-- <div class="ln">
               <input type="submit" value="  " />
                </div> -->
           </form>
       </div>

    scriptラベルの前にscriptラベルを追加
    <script type="text/javascript"></script>//      noCaptcha

    mounted 
     mounted() {
    this.init();
  },

    methods 
     init() {
      var nc_token = [
        "FFFFXXXXXXXXXXXXXX",//appkey(    )
        new Date().getTime(),
        Math.random()
      ].join(":");
      var NC_Opt = {
        renderTo: "#slide",
        appkey: "FFXXXXXXXXXXXXXXXXX", //appkey(    )
        scene: "register", //   (  pc   )
        token: nc_token,
        customWidth: 300,
        trans: { key1: "code0" },
        elementID: ["usernameID"],
        is_Opt: 0,
        language: "cn",
        isEnabled: true,
        timeout: 3000,
        times: 5,
        apimap: {},
        callback: function(data) {
          //       
          document.getElementById("nc_token").value = nc_token;
          document.getElementById("csessionid").value = data.csessionid;
          document.getElementById("sig").value = data.sig;
          //            
          // console.log("nc_token", nc_token);
          // console.log("csessionid", data.csessionid);
          // console.log("data.sig", data.sig);
          //             
          Verification({
            token: nc_token, //token
            session_id: data.csessionid, //   session
            sig: data.sig, //  
            scene: "register" //     
          })
            .then(res => {
              console.log("    ", res);
            })
            .catch(err => {
              console.log(err);
            });
        }
      };
      var nc = new noCaptcha(NC_Opt);
      nc.upLang("cn", {
        _startTEXT: "     ，      ",
        _yesTEXT: "    ",
        _error300:
          '  ，   ，        ',
        _errorNetwork:
          '     ， クリックして  '
      });

      var self = this;
      this.nc_token = [this.appKey, new Date().getTime(), Math.random()].join(
        ":"
      );
    },

    スタイルをカスタマイズするには、ドキュメントを表示するか、要素を右クリックしてクラス名を取得し、v-deepを使用してスタイルを変更します.
    C++基礎学習(一)
    C++のCWndウィンドウフレームワークの例