ServicePRO Login Integration for Webpages

Overview

This document will outline steps for hosting and implementing ServicePRO Login Integration on a corporate or support webpage. Additional details will be provided regarding setup and limitations of integrated login.

Setup Steps

1. Install ServicePRO on a working Server (IIS).
2. On the Server, browse to the directory containing ServicePRO.service application files.
3. In the Web.Config file for the ServicePRO Application (residing directly under the Service main folder), the following should be displayed.

<httpProtocol>
      <customHeaders>
                <add name="Access-Control-Allow-Origin" value="*" />
                <add name="Access-Control-Allow-Credentials" value="true" />
                <add name="Access-Control-Allow-Headers" value="Content-Type, Accept"/>
              <add name="Access-Control-Allow-Methods" value="POST,GET,OPTIONS,PUT,DELETE"/>
              <add name="Access-Control-Max-Age" value="1728000"/>
          </customHeaders>
</httpProtocol>

4. On the corporate or support website page where you would like to integrate ServicePRO Web Login, add the following div section to where you want to plug in the ServicePRO login.

<div id="serviceprologin"></div>

5. Add the lines of code listed below into the header section in your web page.

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
 <script src="https://code.jquery.com/jquery-migrate-3.5.2.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.14.1/jquery-ui.min.js"> </script>

<script type="text/javascript">
 $(document).ready(function(e) {
          $.ajax({ 
               url: 'https://helpdesktechnologyangularserverapp-csffchc8gce2f0f9.eastus-01.azurewebsites.net/Login.aspx',
                 contentType: 'application/html; charset=utf-8',
                   type: 'GET', dataType: 'html' 
                     })
                  .success(function(result) {
                      $('#serviceprologin').html(result); 
                      }) 
                   .error(function(xhr, status) { 
                        document.getElementById("serviceprologin").innerHTML = "ServicePRO Web is under maintenance"; 
              }); 
              });
 </script>

In addition, the two lines listed below should be edited based on the webpage featuring login integration:

1. The following line is to be replaced with your ServicePRO Service URL and in the end append Login.aspx as shown below:

url: 'https://helpdesktechnologyangularserverapp-csffchc8gce2f0f9.eastus-01.azurewebsites.net/Login.aspx',

2. This line displays a message for when the ServicePRO Login section is down for maintenance in the ServicePRO server where ServicePRO.Service is hosted, OR when ServicePRO is being updated. The text can be customized to preference.

document.getElementById("serviceprologin").innerHTML = "ServicePRO Web is under maintenance";

6. After all other steps are completed, clear the browser cache and reload the updated webpage in a browser. Verify that the login section loads properly and allows login to ServicePRO application.

Note: Please ensure that the ServicePRO URL is updated in ServicePRO for tbloptions optionid 17068.

Limitations

1. The operations listed below will take the user back to the standard login page for ServicePRO application. It will not send them back to the corporate website page where the login was integrated.
1.        Sign Out
2.        Session Timeout
3.        Selecting the ‘Forgot Password’ option in the Login section
4.        New User Signup
2. For integrated login, CAPTCHAs will not appear even if they are enabled in the Portal Designer settings. This is due to the session being lost when the CAPTCHA is posted.