I. Overview
1) For the single sign-on of FineReport in OA system, the user needs to pass the user name and password into the authentication address of the report in the OA login interface for authentication. If the OA system and the reporting system are not deployed on the same server, and cross-domain is carried out during login
2) how to achieve cross-domain sign-on of OA system and reporting system through iframe?
II. Steps
In JS of the login interface of OA system, the report will first embed the permission verification address in an iframe to solve the JS cross-domain problem, and then trigger the form login event in the iframe to realize the jump of the login page.
Note: if the report is embedded in the way of cross-domain iframe and cannot be accessed, please turn off the [Click Attack Protection] in the advanced setting of "Security Headers", please see:
Through the simplified OA login page, explain the implementation steps of iframe cross-domain single sign-on:
The report platform system authentication address of FineReport is:
scr.src = " <a href="http://localhost:8075/webroot/decision/login/cross/domain?fine_username=" "="">http://localhost:8075/webroot/decision/login/cross/domain?fine_username=" + username + "&fine_password=" + password + "&validity=" + -1 + "&callback=callback";
Login button event Settings
User input user name password and then click the submit or login button, the trigger doSubmit () method, this method first create a iframe, then report to verify the user name password authentication address pointing to the iframe SRC, and to use the browser to determine for each browser registered of writing is different, then this iframe tags added to the head, the implementation report forms authentication code is as follows:
function doSubmit() {
var username = document.getElementById("username").value;// Gets the username entered
var password = document.getElementById("password").value; // Gets the entered password
var scr = document.createElement("iframe"); //Create iframe
scr.src = " <a href="http://localhost:8075/webroot/decision/login/cross/domain?fine_username=" "="">http://localhost:8075/webroot/decision/login/cross/domain?fine_username=" + username + "&fine_password=" + password + "&validity=" + -1 + "&callback=callback"; // Points the address to which the report authenticates the username and password to this iframe
if (scr.attachEvent){ // Determine if you are an Internet explorer browser
scr.attachEvent("onload", function(){
// If the browser is ie, the page will be executed immediately after loading
window.location=" <a href="http://localhost:8075/webroot/decision" ;"="">http://localhost:8075/webroot/decision"; // Jump directly to the data decision system
});
} else {
scr.onload = function(){
// Other browsers reload the onload event
/* Jumps to the specified login success page,index.jsp
var f = document.getElementById("login");
f.submit(); */
window.location=" <a href="http://localhost:8075/webroot/decision" ;"="">http://localhost:8075/webroot/decision"; // Jump directly to the data decision system
};
} document.getElementsByTagName("head")[0].appendChild(scr); // Embed the iframe tag in the head
}
Put the submission time of the above iframe single sign-on 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 can be realized as follows:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=10" />
<script type="text/javascript">
function doSubmit() {
var username = document.getElementById("username").value; // Gets the username entered
var password = document.getElementById("password").value; // Gets the entered password
var scr = document.createElement("iframe"); //Create iframe
scr.src = "<a href="http://192.168.1.40:8075/webroot/decision/login/cross/domain?fine_username=" "="">http://192.168.1.40:8075/webroot/decision/login/cross/domain?fine_username=" + username + "&fine_password=" + password + "&validity=" + -1 + "&callback=callback"; // Points the address to which the report authenticates the username and password to this iframe
if (scr.attachEvent) {
// Determine if you are an Internet explorer browser
scr.attachEvent("onload", function(){
// If the browser is ie, the page will be executed immediately after loading
window.location="<a href="http://192.168.1.40:8075/webroot/decision" ;"="">http://192.168.1.40:8075/webroot/decision"; // Jump directly to the data decision system
});
} else {
scr.onload = function(){ // Other browsers reload the onload event
/* Jumps to the specified login success page,index.jsp
var f = document.getElementById("login");
f.submit(); */
window.location="<a href="http://192.168.1.40:8075/webroot/decision" ;"="">http://192.168.1.40:8075/webroot/decision"; // Jump directly to the data decision system
};
}
document.getElementsByTagName("head")[0].appendChild(scr); // Embed the iframe tag in the head
}
</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>
III. Matters need attention
Since IE11 does not have the attachEvent property, we can add a meta tag to set the browser's default compatibility mode by adding it in the HTML head tag
<meta http-equiv="X-UA-Compatible" content="IE=10" />
This meta TAB sets the browser's default compatibility mode to IE10.This allows you to still use the attachEvent attribute.
In addition, Internet explorer needs to add the address of the report server to the trusted site, as shown below:
IV. Log out
When FineReport is integrated into the project, log out the project user, and also want to log out the user name session of the system, exit the system. The logout method is as follows:
http://192.168.1.40:8075/webroot/decision/logout/cross/domain to log out of the FR system.
