Avatar
Juan
  • Updated

For developers: Integrate the login screen with your webpage

If you have a web page that describes your tracking solution and want a login box for direct login to your GpsGate installation, you can do it using the following methods:

Method 1: Javascript AJAX Login

Paramaters to change:


SOMEHOST_WITH_GPSGATESERVER/GpsGateServer - The domain you have installed GpsGate Server on + any sub folder.
appId=1 - Set this to 1 independent on which application the user is member of. The login mechanism will find the right application for the logged in user.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
   <head>
       <title>XSS - Login</title>
       <script type="text/javascript" src="http://SOMEHOST_WITH_GPSGATESERVER/GpsGateServer/Services/Auth.ashx?xssproxy&appId=1&namespace=MyService"></script>
       <script type="text/javascript">
           function login()
           {
               var username = document.getElementById('inUsername').value;
               var password = document.getElementById('inPassword').value;

               GpsGate.Server.MyService.login(username, password,
                   function(result)
                   {
                       if(result == true) // OK login
                           window.location.href = 'http://SOMEHOST_WITH_GPSGATESERVER/GpsGateServer/AppGateway.aspx';
                       else
                           alert('Login not ok');
                   }
               );
           }
       </script>
       <style type="text/css">
       <!--
       .text
       {
           font-family: Verdana, Arial, Helvetica, sans-serif;
           font-size: 10px;
           color: #000000;
       }
       .blue-link
       {
           font-family: Verdana, Arial, Helvetica, sans-serif;
           font-size: 10px;
           color: #466f93;
           text-decoration:none;
       }
       -->
       </style>
   </head>
   <body>
       <table>
           <tr>
               <td>
                   <input type="text" id="inUsername" />
               </td>
               <td>
                   <input type="password" id="inPassword" />
               </td>
               <td>
                   <input type="button" id="btnLogin" value="Login" onclick="login()"/>
               </td>
           </tr>
       </table>
       <a href="http://gpsgate.com/" id="gpsgate" alt="gpsgate tracking" class="blue-link" target="_blank">
<img src="http://apps.gpsgate.com/images/ggc_small.gif" hspace="0" vspace="0" align="texttop" class="blue-link" style="border:none;" />
<span class="blue-link"> GPS Tracking</span></a>
   </body>
</html>

 

Method 2: Traditional HTML form posting

Sample page that does a HTML form post login. 

Error handling: Wrong logins using a custom HTML post form will be redirected to the same custom login page with a error query string.

Paramaters to change:
SOMEHOST_WITH_GPSGATESERVER/GpsGateServer - The domain you have installed GpsGate Server on + any sub folder.

Note:
The name of the username textfield have to be set to "inUsername" and the password field to "inPassword". (see example code)

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
   <head>
      <title>Form Login</title>
   </head>
   <body>
      <form action="http://SOMEHOST_WITH_GPSGATESERVER/GpsGateServer/Login.aspx" method="post">
         <table>
            <tr>
               <td>
                  <input type="text" name="inUsername" />
               </td>
               <td>
                  <input type="password" name="inPassword" />
               </td>
               <td>
                  <input type="submit" value="Login" />
               </td>
            </tr>
         </table>
      </form>
      <div id="error" style="color: red;"></div>
   </body>
   <script>
      function getParameterByName(name) {
         var regex = new RegExp("[\\?&]" + name + "=([^#]*)");
         var results = regex.exec(location.search);
         return results === null ? null : decodeURIComponent(results[1].replace(/\+/g, " "));
      }
      
      var error = getParameterByName('error');
      if(error){
       document.getElementById('error').innerHTML = "YOUR CUSTOM ERROR MESSAGE";
      }
   </script>
</html>

Troubleshooting

I would like to enable a client to log into the mobile app by just clicking a link in my WEB page, without having to input the user name and password

Use this format for the link:

http:\\hostname\index.aspx?username=kalle&password=VerySecretAndSecure 

Where "hostname" is the domain name of your server.
Where "kalle" is the username.
Where "VerySecretAndSecure" is the password.



Related articles