ajax跨域异步单点登录

电玩女神 2022-04-25 09:28 260阅读 0赞

[https://help.finereport.com/doc-view-881.html][https_help.finereport.com_doc-view-881.html]

1. 问题描述

OA系统与报表系统集成，将报表绑定在OA系统的节点上，对于OA系统中想实现对FineReport的单点登录，用户需要在OA的登录界面中将用户名和密码传入到报表的认证地址进行认证，若OA系统和报表系统不是部署在同一台服务器上，在进行登录时进行跨域，那么要如何通过ajax实现OA系统和报表系统的跨域登录呢？

ajax：即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML），是指一种创建交互式网页应用的网页开发技术。通过在后台与服务器进行少量数据交换，ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

iframe方式和ajax方式的区别

iframe方式和ajax方式均可以实现跨域单点登录，ajax可以实现异步的单点登录，并且可对报表系统验证的结果进行处理，如登录超时，但是iframe不可以异步处理，并且在进行报表验证的时候，无法对验证的结果进行处理。

2. 实现思路

在[平台系统单点登录接口][Link 1]中介绍了3种单点登录的方式，iframe方式、ajax方式以及表单提交，其中iframe方式和ajax方式两种登陆方式均可实现单点登录的跨域，下面简单介绍ajax单点登录的使用方法，iframe单点登录方式请查看[iframe跨域单点登录][iframe]

ajax登录方式天然支持跨域，故在OA系统的登录界面中直接通过ajax将用户名密码发送到报表服务器进行后台验证，则可解决跨域单点登录问题。

3. 示例

通过简化的OA登录页面说明ajax的实现步骤。

3.1 ajax实现步骤

1）登陆按钮事件设置

用户输入用户名密码后点击提交或登录按钮时，触发doSubmit()方法，该方法中实现登录事件并且通过ajax将用户名密码发送到报表系统进行验证，并且在验证成功时，触发html中的表单提交事件，实现登录成功页面的跳转，实现报表认证代码如下：

![20190531083746146.png][]function **doSubmit**() \{

var username = document.getElementById("username").value.trim();

var password = document.getElementById("password").value.trim();

if (username === "") \{

window.alert("请输入用户名");

return false;

if (password === "") \{

window.alert("请输入密码");

return false;

var url = "http://localhost:8080/webroot/decision/login/cross/domain" \+ "?fine\_username=" \+ username + "&fine\_password=" \+ password + "&validity=" \+ -1;

jQuery.ajax(\{

url: url,*//**单点登录的管理平台报表服务器*

timeout: 5000,*//**超时时间（单位：毫秒）*

dataType:"jsonp",*//**跨域采用jsonp方式*

jsonp:"callback",

success: function (res) \{

console.log(res);

if (res.errorCode) \{

window.alert(res.errorMsg);

\}else \{

*//* *保存token并跳转到对应链接*

window.location.href = "http://localhost:8080/webroot/decision";

\},

error: function () \{

alert("超时或服务器其他错误");*//* *登录失败（超时或服务器其他错误） *

\});

注：由于使用了ajax，需要引入jquery.js。

另：如果在win8下单点登录异常，在ajax传递用户名密码的时候转码一下即可，比如说fine\_password":encodeURIComponent(password)。

![20190531083746161.png][]<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>

3.2 完整代码

将上述ajax单点登录的提交事件放到原来OA系统登录页面中，是指点击登录按钮时，触发该事件，修改后即可以实现跨域单点异步登录的代码如下：

![20190531083746171.png][]<!DOCTYPE html>

<head>

function **doSubmit**() \{

var username = document.getElementById("username").value.trim();

var password = document.getElementById("password").value.trim();

if (username === "") \{

window.alert("请输入用户名");

return false;

if (password === "") \{

window.alert("请输入密码");

return false;

var url = "http://localhost:8080/webroot/decision/login/cross/domain" \+ "?fine\_username=" \+ username + "&fine\_password=" \+ password + "&validity=" \+ -1;

jQuery.ajax(\{

url: url,*//**单点登录的管理平台报表服务器*

timeout: 5000,*//**超时时间（单位：毫秒）*

dataType:"jsonp",*//**跨域采用jsonp方式*

jsonp:"callback",

success: function (res) \{

console.log(res);

if (res.errorCode) \{

window.alert(res.errorMsg);

\}else \{

*//* *保存token并跳转到对应链接*

window.location.href = "http://localhost:8080/webroot/decision";

\},

error: function () \{

alert("超时或服务器其他错误");*//* *登录失败（超时或服务器其他错误） *

\});

</script>

</head>

<body>

</form>

</body>

</html>

注：用户名密码表单中使用button来触发doSubmit()，您只要将doSubmit()方法加入到您的OA的登录页面中即可，为了简化操作，上面的完整代码没有跳转到指定页面，而是跳转到平台页面。

4. 注销用户

当注销项目用户时，同时也希望注销报表用户名的session，这时可在点击退出按钮时的同时也可以实现FR报表的退出登录：

![20190531083746177.png][]jQuery.ajax(\{

url:"http://localhost:8075/webroot/decision/logout/cross/domain",*//**单点登录的报表服务器*

dataType:"jsonp",*//**跨域采用jsonp方式*

jsonp:"callback",

timeout:5000,*//**超时时间（单位：毫秒）*

success:function(data) \{

if (data.status === "success") \{

*//**登出成功  *

\},

error:function()\{

*//* *登出失败（超时或服务器其他错误）*

\});

5. 安全性

报表通过url传用户名和密码进行验证，传到报表服务器是以session的方式保存，防止被人中途拦截会导致系统泄密，可以对登录进来的密码进行加密，可参考文档[权限之密码加密][Link 2]；或者使用https证书，让请求在传输过程中加密，配置方法也很简单，修改下服务器的配置文件就行了。这种方式还存在一个证书合法性问题，用自己生成的证书，客户端在访问报表中浏览器会显示证书非法警告，所以需要去购买合法证书。目前国内最便宜的证书一年是一千多元。

6. 注意事项

跨域单点登录需改将管理系统>安全管理-安全防护的【内容嗅探攻击防护】关闭，否则会报错，如下图所示：

![https://help.finereport.com/uploads/201811/20181106154044\_1150.png][https_help.finereport.com_uploads_201811_20181106154044_1150.png]

[https_help.finereport.com_doc-view-881.html]: https://help.finereport.com/doc-view-881.html
[Link 1]: http://help.finereport.com/doc-view-884.html
[iframe]: http://help.finereport.com/doc-view-879.html
[20190531083746146.png]: /images/20220125/2e67879988ab4b0b926688b83afefd2f.png
[20190531083746161.png]: /images/20220125/96e04a0a5eab4469898c1179c206a6d7.png
[20190531083746171.png]: /images/20220125/27a6540fbbec43688e73335f45945b5d.png
[20190531083746177.png]: /images/20220125/d4528e9fb423419ea1cd0faad6a7f5f7.png
[Link 2]: http://help.finereport.com/doc-view-875.html
[https_help.finereport.com_uploads_201811_20181106154044_1150.png]: /images/20220125/bbd3fe8a4fa84f54b050599c4963a89c.png