如何从外部登录页面自动填充并登录网站？

Question

Different customers use different websites to log-in to their account. i want to provide them a single form to put their credentials onto it, and select the domain/platform t they want themselves log in to and those credentials are passed to the desired website's login form log them into it. So, help me to send the credentials to the website. You can see the login form @ www.ubfmgps.com/login.html

Here is my html form to get the credentials

 <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

As everyone said, you are looking for a SSO system. Anyway, if you want to make a quick login system, you have to add some javascript to perform this operation.

You need to define a mapping which describe the username and password fields name for each sites. Assuming you have jQuery, you can try like this :

$(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);
}

See this jsfiddle