一、SPA前端应用接入文档
此文档适用于前端原生js，react，vue，angular开发的单页面应用接入。
一、向於晓荻申请clientId
目前，clientId是手动申请，后续会搬迁到运营管理后台或开放平台进行自主申请。
需要提供参数是，前端工程的地址，参数类型是array，可以提供多个供不同的环境使用。
['http://localhost:8000/','http://test:8000/','http://online:8000/']
二、在入口文件引入js
在index.html 或者 document.ejs 引入 js文件
<script src="https://cdn.eazytec-cloud.com/EFS_gcs/cdn/eazytecAuth.js"></script>
三、在public文件夹引入html文件
新建html文件，命令 silent-check-sso.html
编辑文件，输入以下内容：
<html><body><script>parent.postMessage(location.href, location.origin)</script></body></html>
四、新建认证中心的工具类
import constant from '@/utils/constant';
const eazytecAuth = new EazytecAuth({
realm: constant.realm,
url: constant.eazytecAuthURL,
clientId: constant.comClientId,
});
const doLogin = eazytecAuth.login;
/**
* 站内登录，调用平台的登录方法
*/
const dohandLogin = ()=>{
window.parent.postMessage({
type:"platform-sso",
action:"doLogin"
},'*');
}
const doLogout = eazytecAuth.logout;
const getToken = () => eazytecAuth.token;
const updateToken = successCallback =>
eazytecAuth
.updateToken(5)
.then(successCallback)
.catch(doLogin);
const getUsername = () => eazytecAuth.subject;
/**
* Initializes eazytecAuth instance and calls the provided callback function if successfully authenticated.
*
* @param onAuthenticatedCallback
* @param event
*/
const init = (onAuthenticatedCallback, event, inWhiteList, noLogin) => {
eazytecAuth
.init({
onLoad: 'check-sso',
silentCheckSsoRedirectUri: `${window.location.origin}/silent-check-sso.html`,
})
.then(authenticated => {
if (authenticated) {
eazytecAuth.onAuthLogout = event;
onAuthenticatedCallback();
} else if (!inWhiteList) {
doLogin();
} else {
noLogin();
}
});
};
export default {
init,
doLogin,
dohandLogin,
doLogout,
getToken,
updateToken,
getUsername,
};
五、确定白名单路由和参数，填入认证工具类
5.1、realm
| 序号 | 项目 | 地址 |
|---|---|---|
| 1.1 | 省软件（测试环境） | jszqt |
| 1.2 | 省软件（正式环境） | jszqt-online |
| 1.3 | 宜兴政企通（测试环境） | yxzqt |
| 1.4 | 宜兴政企通（正式环境） | yxzqt-online |
5.2、url
| 序号 | 项目 | 地址 |
|---|---|---|
| 1.1 | 省软件（测试环境） | https://test-auth-jszqt.eazytec-cloud.com/auth/ |
| 1.2 | 省软件（正式环境） | https://auth-jszqt.eazytec-cloud.com/auth/ |
| 1.3 | 宜兴政企通（测试环境） | https://test-auth-yxzqt.eazytec-cloud.com/auth/ |
| 1.4 | 宜兴政企通（正式环境） | https://auth-yxzqt.eazytec-cloud.com/auth/ |
5.3、clientId
询问於晓荻
六、修改之前老的接口
注意，宜兴政企通和江苏省政企通还有所区别
1、宜兴政企通
6.1、请求用户的接口
{domain}/AGCS_zqc/v2/audit/me/{openId}
替换成以下：
{domain}/tng-boot/md/eorg/user/queryByOpenId?openId=XXX&type=com
6.2、请求应用信息的接口
{domain}/AGCS_zqc/v3_1/company/app/appInfo?appId=0ea78928-d67b-4714-a5f9-c03924517741
替换成以下：
2、省软件
6.1、请求用户的接口
{domain-com}/me 或者
{domain-com}/v2/user/getUser 或者
{domain-com}/me/{usrname}
替换成以下：
{domain}/AGCS_zqc/v2/audit/me/{openId}
6.2、请求应用信息的接口
不需要变动
二、站内跳转
站内跳转是指SPA应用作为子页面嵌入到平台的组件当中，使应用和平台更像一个整体。
站内跳需要需要解决两件事情：
父页面向子页面通讯
父页面向子页面通讯采用简单的path传参形式，进行数据传递，目前支持的参数：
| 序号 | 参数 | 值 | 备注 |
|---|---|---|---|
| 1.1 | _from | platform | 表示应用是通过站内跳形式打开 |
| 1.2 | _baseid | XXX | 当前企业的baseid |
子页面向父页面通讯
子页面向父页面通讯采用postmessage，父页面监听来自子页面的信息进行响应。
父：
window.addEventListener("message", function(e) {
if (e.data.type === "platform-sso") {
if (e.data.action === "doLogin") {
dosometing();
}
}
});
子：
/**
* 站内登录，调用平台的登录方法
*/
const dohandLogin = ()=>{
window.parent.postMessage({
type:"platform-sso",
action:"doLogin"
},'*');
}
iframe自适应height调整
1、在index.html 或者 document.ejs 引入 js文件
<script src="https://cdn.eazytec-cloud.com/EFS_gcs/cdn/iframeResizer.contentWindow.min.js"></script>
2、在BasicLayout.less引入全局样式
:global {
@media screen and (min-height: 768px) {
.ant-layout {
min-height: 768px;
}
}
@media screen and (min-height: 900px) {
.ant-layout {
min-height: 900px;
}
}
@media screen and (min-height: 1080px) {
.ant-layout {
min-height: 1080px;
}
}
@media screen and (min-height: 1200px) {
.ant-layout {
min-height: 1200px;
}
}
@media screen and (min-height: 1440px) {
.ant-layout {
min-height: 1440px;
}
}
@media screen and (min-height: 1536px) {
.ant-layout {
min-height: 1536px;
}
}
body,#root{
height: auto !important;
}
}
3、注释掉BasicLayout.js中的min-height
<Layout
style={{
...this.getLayoutStyle(),
// minHeight: '100vh',
minWidth: 1200,
}}
>