2016-12-06 65 views
0

試圖設置登錄FB IKE項目上的KIT KIT,但無法解決我遇到的錯誤。 這裏是離子page.html中的文件:Ionic FB賬戶KIT登錄短信

<html> 
    <head> 
     <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> 
     <link rel="stylesheet" href="https://code.getmdl.io/1.1.3/material.indigo-pink.min.css"> 
     <style> 
      body { 
       text-align: center; 
       background: #EEE; 
      } 
      .mdl-button { 
       width: 100%; 
      } 
     </style> 
     <script defer src="https://code.getmdl.io/1.1.3/material.min.js"></script> 

     <script src="https://sdk.accountkit.com/en_US/sdk.js"></script> 
    </head> 
    <body> 

     <div class="mdl-grid"> 
      <div class="mdl-cell mdl-cell--4-col mdl-cell--4-offset"> 
      <div class="mdl-card mdl-shadow--2dp"> 
      <div class="mdl-card__supporting-text"> 
      <h1 class="mdl-typography--title">Passwordless Authentication</h1> 
      <h2 class="mdl-typography--subhead">Facebook Account Kit</h2> 
      <p><strong>Login via:</strong></p> 
      <ul class="demo-list-icon mdl-list"> 
       <li class="mdl-list__item"> 
       <span class="mdl-list__item-primary-content"> 
        <button onclick="loginWithSMS();" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--colored mdl-typography--text-center">SMS</button> 
       </span> 
       </li> 
      </ul> 
      </div> 
      </div> 
      </div> 
     </div> 
     <form id="my_form" name="my_form" action="/sendcode" method="POST" style="display: none;"> 
      <input type="text" id="code" name="code"> 
      <input type="text" id="csrf_nonce" name="csrf_nonce"> 
      <input type="submit" value="Submit"> 
     </form> 

     <script> 
      // initialize Account Kit with CSRF protection 
      AccountKit_OnInteractive = function(){ 
      console.log("{{csrf}}") 
      AccountKit.init(
       { 
       appId:myId, 
       state:"{{csrf}}", 
       version:"v1.1" 
       } 
      ); 
      }; 
      // login callback 
      function loginCallback(response) { 
      console.log(response); 
      if (response.status === "PARTIALLY_AUTHENTICATED") { 
       document.getElementById("code").value = response.code; 
       document.getElementById("csrf_nonce").value = response.state; 
       document.getElementById("my_form").submit(); 
      } 
      else if (response.status === "NOT_AUTHENTICATED") { 
       // handle authentication failure 
      } 
      else if (response.status === "BAD_PARAMS") { 
       // handle bad parameters 
      } 
      } 
      function loginWithSMS(){ 
      AccountKit.login("PHONE",{}, loginCallback); 
      } 
     </script> 
    </body> 
</html> 

我得到錯誤,當我按下按鈕 '短信' 和錯誤看起來是這樣的: enter image description here

回答

0

我找到了解決辦法: HTML:

<html> 
    <head> 
     <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> 
     <link rel="stylesheet" href="https://code.getmdl.io/1.1.3/material.indigo-pink.min.css"> 
     <style> 
      body { 
       text-align: center; 
       background: #EEE; 
      } 
      .mdl-button { 
       width: 100%; 
      } 
     </style> 
     <script defer src="https://code.getmdl.io/1.1.3/material.min.js"></script> 

     <script src="https://sdk.accountkit.com/en_US/sdk.js"></script> 
    </head> 
    <body> 

     <div class="mdl-grid"> 
      <div class="mdl-cell mdl-cell--4-col mdl-cell--4-offset"> 
      <div class="mdl-card mdl-shadow--2dp"> 
      <div class="mdl-card__supporting-text"> 
      <h1 class="mdl-typography--title">Passwordless Authentication</h1> 
      <h2 class="mdl-typography--subhead">Facebook Account Kit</h2> 
      <p><strong>Login via:</strong></p> 
      <ul class="demo-list-icon mdl-list"> 
       <li class="mdl-list__item"> 
       <span class="mdl-list__item-primary-content"> 
        <button ng-click="loginWithSMS();" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--colored mdl-typography--text-center">SMS</button> 
       </span> 
       </li> 
      </ul> 
      </div> 
      </div> 
      </div> 
     </div> 
     <form id="my_form" name="my_form" action="/sendcode" method="POST" style="display: none;"> 
      <input type="text" id="code" name="code"> 
      <input type="text" id="csrf_nonce" name="csrf_nonce"> 
      <input type="submit" value="Submit"> 
     </form> 

    </body> 
</html> 

,我添加JS從HTML到controller.js:

AccountKit_OnInteractive = function(){ 
      console.log("{{csrf}}") 
      AccountKit.init(
       { 
       appId:appid, 
       state:"{{csrf}}", 
       version:"v1.1" 
       } 
      ); 
      }; 

    $scope.loginWithSMS = function() { 

     function loginCallback(response) { 
      console.log(response); 
      if (response.status === "PARTIALLY_AUTHENTICATED") { 
       document.getElementById("code").value = response.code; 
       document.getElementById("csrf_nonce").value = response.state; 
       document.getElementById("my_form").submit(); 
      } 
      else if (response.status === "NOT_AUTHENTICATED") { 
       // handle authentication failure 
      } 
      else if (response.status === "BAD_PARAMS") { 
       // handle bad parameters 
      } 
      } 
     AccountKit.login("PHONE",{}, loginCallback); 
    }