Ajax Asynchronous Cross-domain SSO

OA system and report system integration, to bind the report on the OA system of nodes, the OA system to realize single sign-on for FineReport, users need a user name and password in the login interface of OA incoming certification address authentication to the report, if the OA system and reporting system is not deployed on the same server, how to achieve cross-domain login of OA system and reporting system through Ajax?

Note:

Ajax:” Asynchronous Javascript And XML”, a web development technique for creating interactive web applications. Ajax enables asynchronous updates to web pages by exchanging a small amount of data with the server in the background. This means that you can update parts of a web page without reloading the entire page.

The difference between iframe and Ajax function

Both iframe and Ajax can achieve cross-domain single sign-on. Ajax can achieve asynchronous single sign-on and handle the results of the report system validation, such as a login timeout, but an iframe cannot handle this asynchronously and cannot handle the results of the validation when the report is validated.

Three ways of single sign-on, iframe, Ajax and form submission, are introduced in the single sign-on interface of decision platform, Among them, both the iframe mode and Ajax mode can achieve the cross-domain single sign-on. The following is a brief introduction to the use of Ajax single sign-on. For the single sign-on mode of iframe, please check the cross-domain single sign-on mode of iframe.

Ajax login mode naturally supports cross-domain, so the problem of cross-domain single sign-on can be solved by sending the user name and password directly to the report server for background verification through Ajax in the login interface of OA system.

Explain the ajax implementation steps through the simplified OA login page.

Login button event Settings

When the user clicks the submit or login button after entering the username and password, the doSubmit() method is triggered. In this method, the login event is realized and the user name and password are sent to the reporting system through Ajax for verification. When the authentication is successful, the form submission event in HTML is triggered to realize the jump of the login success page, the report authentication code is as follows:

function doSubmit() {
    var username = document.getElementById("username").value.trim();    
     var password = document.getElementById("password").value.trim();    
     if (username === "") {        
           window.alert("Please input username");        
           return false;    
     }    
     if (password === "") {
        window.alert("Please input password");
        return false;
    }
    var url = "<a href="http://localhost:8080/webroot/decision/login/cross/domain" "="">http://localhost:8080/webroot/decision/login/cross/domain" + "?fine_username=" + username + "&fine_password=" + password + "&validity=" + -1;
    jQuery.ajax({
        url: url,        // Single sign-on management platform report server
        timeout: 5000,      // Timeout time (in milliseconds)
        dataType:"jsonp",       // The jsonp approach is adopted across domains
        jsonp:"callback",
        success: function (res) {
            console.log(res);
            if (res.errorCode) {
                window.alert(res.errorMsg);
            }else {
                // Save the token and jump to the corresponding link
                window.location.href = "<a href="http://localhost:8080/webroot/decision" ;"="">http://localhost:8080/webroot/decision";
            }

        },
        error: function () {
            alert("Timeout or other server error");       // Fail to login
        }
    });
}

Note: because of the use of Ajax, we need to introduce jquery.js.

<script src="<a href="http://code.jquery.com/jquery-2.1.4.min.js" "="">http://code.jquery.com/jquery-2.1.4.min.js"></script>

The above Ajax single sign-on submission event is placed on the original OA system login page, which means that the event will be triggered when the login button is clicked. After modification, the code of cross-domain single sign-on asynchronous login can be realized as follows:

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; " charset="UTF-8">
    <script src="<a href="http://code.jquery.com/jquery-2.1.4.min.js" "="">http://code.jquery.com/jquery-2.1.4.min.js"></script>
    <script type="text/javascript">
        function doSubmit() {
            var username = document.getElementById("username").value.trim();
            var password = document.getElementById("password").value.trim();
            if (username === "") {
                window.alert("Input your username");
                return false;
            }
            if (password === "") {
                window.alert("Input your password");
                return false;
            }
            var url = "<a href="http://localhost:8080/webroot/decision/login/cross/domain" "="">http://localhost:8080/webroot/decision/login/cross/domain" + "?fine_username=" + username + "&fine_password=" + password + "&validity=" + -1;
            jQuery.ajax({
                url: url,      // Single sign-on management platform report server
                timeout: 5000,     // Timeout time (in milliseconds)
                dataType:"jsonp", //The jsonp approach is adopted across domains
                jsonp:"callback",
                success: function (res) {
                    console.log(res);
                    if (res.errorCode) {
                        window.alert(res.errorMsg);
                    }else {
                        // Save token and jump to the corresponding link                        
                        window.location.href = "<a href="http://localhost:8080/webroot/decision" ;"="">http://localhost:8080/webroot/decision";
                    }
                },
                error: function () {
                    alert("Timeout or other server error ");   //Fail to login
                }
            });
        }
    </script></head><body><p>Please login</p><form id="login" name="login" method="POST" action="">
    <p>username:<input id="username" type="text" name="username"/></p>
    <p>password:<input id="password" type="password" name="password"/></p>
    <input type="button" value="Login" onClick="doSubmit()"/>
</form>
</body>
</html>

Note: the user name and password form USES a button to trigger doSubmit(). You only need to add the doSubmit() method to the login page of your OA. To simplify the operation, the complete code above does not jump to the specified page, butto the platform page.

When the project user is logged out, you also want to log out the Session of the report user name. At this time, you can also log out the FR report when you click the exit button:

jQuery.ajax({
     url:"<a href="http://localhost:8075/webroot/decision/logout/cross/domain" , "="">http://localhost:8075/webroot/decision/logout/cross/domain",  // Single sign-on management platform report server
     dataType:"jsonp",   //The jsonp approach is adopted across domains
     jsonp:"callback",
     timeout:5000,      // Timeout time (in milliseconds)
     success:function(data) {
         if (data.status === "success") {
              //Succeed to logout
           }
     },
     error:function(){
         // Fail to logout（Timeout or other server error）
     }
});

You need close the [Click Attack Protection] and [Content sniffing attack] in Manage system > Security-Security to achieve cross-domain single click sign-on (the picture is as follow), or you will get an error.