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

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

大家都說過，您正在尋找SSO系統。 無論如何，如果要創建快速登錄系統，則必須添加一些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