如何自動填寫並從外部登錄頁面登錄到網站？

Question

不同的客戶使用不同的網站登錄到他們的帳戶。我想爲他們提供一個表單，將他們的憑證放到它上面，然後選擇他們想要自己登錄的域/平臺，並將這些憑證傳遞到所需網站的登錄表單中，將它們登錄到其中。所以，幫助我將憑據發送到網站。你可以看到登錄表單@ www.ubfmgps.com/login.html

這裏是我的html形式獲得憑證

<form action="#" id="gaq-form" class="form-b" method="post"> 
        <fieldset> 
         <p> 
          <span> 
           <label for="fba">Username</label> 
           <input type="text" id="txtUserName" name="txtUserName" autocomplete="on" required> 
          </span> 
          <span> 
           <label for="fbb">Password</label> 
           <input type="Password" id="txtUserPassword" name="txtUserPassword" required> 
          </span> 
         </p> 
         <p> 
          <solid>Choose Platform</solid> 
          <select name="platform" id="platform" width=100px> 
          <p> <option value="Jimishare" id="Jimishare">Jimishare</option> 
           <option value="Tracksolid" id="Tracksolid">Tracksolid</option> 
           <option value="Gpsyeah" id="Gpsyeah">Gpsyeah</option> 
          </select> 
          </p> 
         </p> 
         <p><button type="submit" onclick="login();">Log Me In</button></p> 
        </fieldset> 
       </form> 
       <script type="text/javascript"> 
         function login() 
         { 

          if(document.getElementById("platform").value=='Jimishare') 
          { 
           var txtUserName = document.getElementById("username").value; 
           var txtUserPassword = document.getElementById("password").value; 
           $.ajax({ 
            url : "http://www.jimishare.com", 
            type : 'post', 
            data : 'txtUserName=' + encodeURIComponent(username) + 'txtUserPassword=' + encodeURIComponent(password), 
            dataType : 'json', 
            error : function(data) { console.log("error"); console.error(data); }, 
            success : function(data) { console.log("success"); console.info(data); } 
           }); 
          } 
          else if (document.getElementById("platform").value=='Tracksolid') { 
           document.write("Tracksolid"); 
           var account = document.getElementById("username").value; 
           var password = document.getElementById("password").value; 
           $.ajax({ 
            url : "http://www.tracksolid.com/mainFrame", 
            type : 'post', 
            data : 'account=' + encodeURIComponent(account) + 'password=' + encodeURIComponent(password), 
            dataType : 'json', 
            error : function(data) { console.log("error"); console.error(data); }, 
            success : function(data) { console.log("success"); console.info(data); } 
           }); 

          } 
          else { 
           document.write("Gpsyeah"); 
          } 
         } 
         </script> 

Answer 1

正如大家說，你正在尋找一個單點登錄系統。無論如何，如果你想做一個快速登錄系統，你必須添加一些JavaScript來執行此操作。

您需要定義描述每個站點的用戶名和密碼字段名稱的映射。假設你有jQuery的，你可以嘗試這樣的：

$(document).ready(function() { 
    form = $("#gaq-form"); 
    websitePickerField = $("select[name='platform']"); 
    usernameField = $("#username"); 
    passwordfield = $("#password"); 
    submitBtn = $('#submit');  

    form.submit(function() { 
     updateFormAttrs($(this).val()); 
    }); 
}); 

function updateFormAttrs(currentWebsite) { 
    var options = mapping[currentWebsite]; 
    form.attr('action', options.url); 
    usernameField.attr('name', options.usernameName); 
    passwordfield.attr('name', options.passwordName); 
    submitBtn.attr('name', options.submitName); 
} 

看到這個jsfiddle