iPortalSecurity.html 19 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417
  1. <!--********************************************************************
  2. * Copyright© 2000 - 2021 SuperMap Software Co.Ltd. All rights reserved.
  3. *********************************************************************-->
  4. <!DOCTYPE html>
  5. <html>
  6. <head>
  7. <meta charset="UTF-8">
  8. <title data-i18n="resources.title_iPortalSecurity"></title>
  9. <script type="text/javascript" src="../../dist/ol/include-ol.js"></script>
  10. <style>
  11. .panel {
  12. margin-bottom: 0;
  13. }
  14. </style>
  15. </head>
  16. <body style=" margin: 0;overflow: auto;background: #fff;width: 100%;height:100%;position: absolute;top: 0;">
  17. <div class="container">
  18. <div class="page-header">
  19. <h4 data-i18n="resources.title_iPortalSecurity"></h4>
  20. </div>
  21. <div class="row">
  22. <table class="table table-bordered col-md-6">
  23. <thead>
  24. <tr>
  25. <th class="text-center" data-i18n="resources.text_function"></th>
  26. <th class="text-center" data-i18n="resources.text_instance"></th>
  27. </tr>
  28. </thead>
  29. <tbody>
  30. <!--登录-->
  31. <tr>
  32. <td class="text-center text-success" data-i18n="resources.text_login"></td>
  33. <td>
  34. <div class="col-md-10 col-md-offset-1">
  35. <form class="form-horizontal">
  36. <fieldset>
  37. <div class="form-group">
  38. <label for="loginUrl_iportal" class="col-md-2 control-label" data-i18n="resources.text_serviceAddress"></label>
  39. <div class="col-md-8">
  40. <input type="text" class="form-control" id="loginUrl_iportal"
  41. data-i18n="[placeholder]resources.text_input_tips_serviceDomainName">
  42. </div>
  43. </div>
  44. <div class="form-group">
  45. <label for="username_iportal" class="col-md-2 control-label" data-i18n="resources.text_userName"></label>
  46. <div class="col-md-8">
  47. <input type="text" class="form-control" id="username_login">
  48. </div>
  49. </div>
  50. <div class="form-group">
  51. <label for="password_iportal" class="col-md-2 control-label" data-i18n="resources.text_password"></label>
  52. <div class="col-md-8">
  53. <input type="password" class="form-control" id="password_login">
  54. </div>
  55. </div>
  56. <div class="form-group">
  57. <div class="col-md-12 text-center">
  58. <a class="btn btn-success" onclick="loginPortal()" data-i18n="resources.text_login"></a>
  59. <a class="btn btn-success" onclick="logoutPortal()" data-i18n="resources.text_logout"></a>
  60. </div>
  61. </div>
  62. </fieldset>
  63. </form>
  64. </div>
  65. </td>
  66. </tr>
  67. <!--token 申请-->
  68. <tr>
  69. <td class="text-center text-success" data-i18n="resources.text_applyForToken"></td>
  70. <td>
  71. <div class="col-md-10 col-md-offset-1">
  72. <form class="form-horizontal">
  73. <fieldset>
  74. <div class="form-group">
  75. <label for="serviceUrlToken_iportal" class="col-md-2 control-label" data-i18n="resources.text_serviceAddress"></label>
  76. <div class="col-md-8">
  77. <input type="text" class="form-control" id="serviceUrlToken_iportal"
  78. data-i18n="[placeholder]resources.text_input_tips_serviceDomainName">
  79. </div>
  80. </div>
  81. <div class="form-group">
  82. <label for="username_iportal" class="col-md-2 control-label" data-i18n="resources.text_userName"></label>
  83. <div class="col-md-8">
  84. <input type="text" class="form-control" id="username_iportal">
  85. </div>
  86. </div>
  87. <div class="form-group">
  88. <label for="password_iportal" class="col-md-2 control-label" data-i18n="resources.text_password"></label>
  89. <div class="col-md-8">
  90. <input type="password" class="form-control" id="password_iportal">
  91. </div>
  92. </div>
  93. <div class="form-group">
  94. <label for="clientType_iportal" class="col-md-2 control-label" data-i18n="resources.text_clientID"></label>
  95. <div class="col-md-8">
  96. <select class="form-control" id="clientType_iportal" name="clientType">
  97. <option value="Referer" selected="selected">HTTP Referer</option>
  98. <option value="IP" data-i18n="resources.text_clientIP"></option>
  99. <option value="RequestIP" data-i18n="resources.text_currentRequestIP"></option>
  100. <option value="NONE" data-i18n="resources.text_noClientLimit"></option>
  101. </select>
  102. </div>
  103. </div>
  104. <div class="form-group">
  105. <label for="referer_iportal" class="col-md-2 control-label" data-i18n="resources.text_refererIPEmpty"></label>
  106. <div class="col-md-8">
  107. <input class="form-control" id="referer_iportal">
  108. </div>
  109. </div>
  110. <div class="form-group">
  111. <label for="expiration_iportal" class="col-md-2 control-label" data-i18n="resources.text_termValid"></label>
  112. <div class="col-md-8">
  113. <select class="form-control" id="expiration_iportal" name="expiration">
  114. <option value="60" selected="selected" data-i18n="resources.text_oneHour"></option>
  115. <option value="1440" data-i18n="resources.text_oneDay"></option>
  116. <option value="10080" data-i18n="resources.text_oneWeek"></option>
  117. <option value="43200" data-i18n="resources.text_oneMonth"></option>
  118. <option value="525600" data-i18n="resources.text_oneYear"></option>
  119. </select>
  120. </div>
  121. </div>
  122. <div class="form-group">
  123. <div class="col-md-12 text-center">
  124. <a class="btn btn-success" onclick="generatePortalToken()" data-i18n="resources.text_applyForToken"></a>
  125. </div>
  126. </div>
  127. </fieldset>
  128. </form>
  129. </div>
  130. </td>
  131. </tr>
  132. <!-- 注册token -->
  133. <tr>
  134. <td class="text-center text-success" data-i18n="resources.text_tokenAuthorized"></td>
  135. <td>
  136. <div class="col-md-10 col-md-offset-1">
  137. <form class="form-horizontal">
  138. <fieldset>
  139. <div class="form-group">
  140. <label for="tokenServiceUrl_iportal" class="col-md-2 control-label" data-i18n="resources.text_serviceAddress"></label>
  141. <div class="col-md-8">
  142. <input type="text" class="form-control" id="tokenServiceUrl_iportal"
  143. placeholder="http://localhost:8090/web/services/32">
  144. </div>
  145. </div>
  146. <div class="form-group">
  147. <label for="token_iportal" class="col-md-2 control-label">token</label>
  148. <div class="col-md-8">
  149. <input type="text" class="form-control" id="token_iportal">
  150. </div>
  151. </div>
  152. <div class="col-md-12 text-center">
  153. <a class="btn btn-success" onclick="registerPortalTokenAndRequestService()" data-i18n="resources.text_accessing"></a>
  154. </div>
  155. </fieldset>
  156. </form>
  157. </div>
  158. </td>
  159. </tr>
  160. <!-- 注册key -->
  161. <tr>
  162. <td class="text-center text-success" data-i18n="resources.text_keyAuthorized"></td>
  163. <td>
  164. <div class="col-md-10 col-md-offset-1">
  165. <form class="form-horizontal">
  166. <fieldset>
  167. <div class="form-group">
  168. <label for="serviceUrl_iportal" class="col-md-2 control-label" data-i18n="resources.text_serviceAddress"></label>
  169. <div class="col-md-8">
  170. <input type="text" class="form-control" id="serviceUrl_iportal"
  171. data-i18n="[placeholder]resources.text_iPortalServicesAddress">
  172. </div>
  173. </div>
  174. <div class="form-group">
  175. <label for="key_iportal" class="col-md-2 control-label">key</label>
  176. <div class="col-md-8">
  177. <input type="text" class="form-control" id="key_iportal">
  178. </div>
  179. </div>
  180. <div class="col-md-12 text-center">
  181. <a class="btn btn-success" onclick="registerPortalKeyAndRequestService()" data-i18n="resources.text_accessing"></a>
  182. </div>
  183. </fieldset>
  184. </form>
  185. </div>
  186. </td>
  187. </tr>
  188. <!-- 出图 -->
  189. <tr>
  190. <td class="text-center text-success" data-i18n="resources.text_keyAuthorizedGetMap"></td>
  191. <td>
  192. <div class="col-md-10 col-md-offset-1">
  193. <form class="form-horizontal">
  194. <fieldset>
  195. <div class="form-group">
  196. <label for="serviceUrlMap_iportal" class="col-md-2 control-label" data-i18n="resources.text_serviceAddress"></label>
  197. <div class="col-md-8">
  198. <input type="text" class="form-control" id="serviceUrlMap_iportal">
  199. </div>
  200. </div>
  201. <div class="form-group">
  202. <label for="mapKey_iportal" class="col-md-2 control-label">key</label>
  203. <div class="col-md-8">
  204. <input type="text" class="form-control" id="mapKey_iportal">
  205. </div>
  206. </div>
  207. <div class="form-group">
  208. <div class="col-md-12 text-center">
  209. <a class="btn btn-success" onclick="showMapWithPortalKey()" data-i18n="resources.text_getMap"></a>
  210. </div>
  211. </div>
  212. </fieldset>
  213. </form>
  214. </div>
  215. </td>
  216. </tr>
  217. <tr>
  218. <td colspan="3">
  219. <div class="row">
  220. <div class="col-md-12 text-center">
  221. <div class="col-md-12" id="iportal_map" style=" height: 300px;"></div>
  222. </div>
  223. </div>
  224. </td>
  225. </tr>
  226. </tbody>
  227. </table>
  228. </div>
  229. </div>
  230. <script type="text/javascript" include="jquery,bootstrap,widgets.alert" src="../js/include-web.js"></script>
  231. <script>
  232. //若示例与SuperMap iPortal不在同一域下,欲查看示例效果请打开该句注释
  233. //SuperMap.Support.cors = false;
  234. $(document).ready(function () {
  235. $("#loginUrl_iportal").val("http://localhost:8090/iportal");
  236. $("#tokenServiceUrl_iportal").val("https://iportal.supermap.io/iportal/web/services/707656630");
  237. $("#token_iportal").val("_Bo_ksR9DC56MvnAXc6liuhAdWmmt1SuoLX758QIeBJUvteLqHqUeeHnQ6OU0i0VBoN5FjNP_SOQ2o1xyudBjA..");
  238. $("#serviceUrl_iportal").val("http://support.supermap.com.cn:8099/ywutslmu/iserver/services/map-china400/rest/maps/China_4326");
  239. $('#key_iportal').val("CBIrkfXEAjydLrfp364qgM3P");
  240. $("#serviceUrlMap_iportal").val("http://support.supermap.com.cn:8099/ywutslmu/iserver/services/map-china400/rest/maps/China_4326");
  241. $('#mapKey_iportal').val("CBIrkfXEAjydLrfp364qgM3P");
  242. });
  243. /*登录*/
  244. function loginPortal() {
  245. var loginUrl = $("#loginUrl_iportal").val();
  246. var userName = $('#username_login').val();
  247. var password = $('#password_login').val();
  248. if (!checkUrl(loginUrl)) {
  249. return;
  250. }
  251. SuperMap.SecurityManager.loginiPortal(loginUrl, userName, password).then(function (result) {
  252. if (result.succeed)
  253. widgets.alert.showAlert(resources.msg_loginSuccess, true);
  254. });
  255. }
  256. /*登出*/
  257. function logoutPortal() {
  258. var loginUrl = $("#loginUrl_iportal").val();
  259. SuperMap.SecurityManager.logoutiPortal(loginUrl).then(function (succeed) {
  260. if (succeed) {
  261. widgets.alert.showAlert(resources.msg_logoutSuccess, true);
  262. }
  263. });
  264. }
  265. /*登录 end*/
  266. /*申请token*/
  267. function generatePortalToken() {
  268. var serverTokenUrl = $("#serviceUrlToken_iportal").val();
  269. if (!checkUrl(serverTokenUrl)) {
  270. return;
  271. }
  272. var serverInfo = new SuperMap.ServerInfo(SuperMap.ServerType.IPORTAL, {
  273. server: serverTokenUrl
  274. });
  275. SuperMap.SecurityManager.registerServers([serverInfo]);
  276. var userName = $('#username_iportal').val();
  277. var password = $('#password_iportal').val();
  278. var clientType = $('#clientType_iportal').val();
  279. var referer = $('#referer_iportal').val();
  280. var expiration = $('#expiration_iportal').val();
  281. SuperMap.SecurityManager.generateToken(serverTokenUrl, new SuperMap.TokenServiceParameter({
  282. userName: userName,
  283. password: password,
  284. clientType: clientType,
  285. referer: referer,
  286. ip: referer,
  287. expiration: expiration
  288. })).then(function (result) {
  289. widgets.alert.showAlert(result, true);
  290. });
  291. }
  292. /*申请token end*/
  293. /*注册token*/
  294. function registerPortalTokenAndRequestService() {
  295. var key = $('#token_iportal').val();
  296. var serviceUrl = getPortalTokenServiceUrl();
  297. if (!checkUrl(serviceUrl)) {
  298. return;
  299. }
  300. SuperMap.SecurityManager.destroyToken(serviceUrl);
  301. SuperMap.SecurityManager.registerToken(serviceUrl, key);
  302. var iPortalService = new SuperMap.iPortalService(serviceUrl);
  303. iPortalService.load().then(function (json) {
  304. if (json && json.error) {
  305. widgets.alert.showAlert(JSON.stringify(json.error), false);
  306. } else {
  307. widgets.alert.showAlert("proxiedUrl:" + iPortalService.proxiedUrl, true);
  308. }
  309. });
  310. }
  311. function getPortalTokenServiceUrl() {
  312. return $("#tokenServiceUrl_iportal").val();
  313. }
  314. /*注册token end*/
  315. /*注册key*/
  316. function registerPortalKeyAndRequestService() {
  317. var key = $('#key_iportal').val();
  318. var serviceUrl = getPortalKeyServiceUrl();
  319. if (!checkUrl(serviceUrl)) {
  320. return;
  321. }
  322. SuperMap.SecurityManager.destroyKey(serviceUrl);
  323. SuperMap.SecurityManager.registerKey(serviceUrl, key);
  324. requestService(serviceUrl);
  325. }
  326. function requestService(url) {
  327. if (!checkUrl(url)) {
  328. return;
  329. }
  330. new ol.supermap.MapService(url, {
  331. serverType: SuperMap.ServerType.IPORTAL
  332. }).getMapInfo(function (json) {
  333. if (json.error) {
  334. widgets.alert.showAlert(JSON.stringify(json.error), false);
  335. } else {
  336. widgets.alert.showAlert(JSON.stringify(json.result), true);
  337. }
  338. });
  339. }
  340. function getPortalKeyServiceUrl() {
  341. return $("#serviceUrl_iportal").val();
  342. }
  343. /*注册key end*/
  344. /*出图*/
  345. function showMapWithPortalKey() {
  346. var key = $('#mapKey_iportal').val();
  347. var mapUrl = $('#serviceUrlMap_iportal').val();
  348. if (!checkUrl(mapUrl)) {
  349. return;
  350. }
  351. SuperMap.SecurityManager.registerKey(mapUrl, key);
  352. var map = new ol.Map({
  353. target: 'iportal_map',
  354. controls: ol.control.defaults({attributionOptions: {collapsed: false}})
  355. .extend([new ol.supermap.control.Logo()]),
  356. view: new ol.View({
  357. center: [0, 0],
  358. maxZoom: 18,
  359. zoom: 2,
  360. projection: 'EPSG:4326'
  361. }),
  362. });
  363. var layer = new ol.layer.Tile({
  364. source: new ol.source.TileSuperMapRest({
  365. serverType: SuperMap.ServerType.IPORTAL,
  366. url: mapUrl
  367. }),
  368. projection: 'EPSG:4326'
  369. });
  370. map.addLayer(layer);
  371. }
  372. /*出图 end*/
  373. function checkUrl(url) {
  374. if (url === "") {
  375. widgets.alert.showAlert(resources.msg_fillInURL, false);
  376. return false;
  377. }
  378. return true;
  379. }
  380. </script>
  381. </body>
  382. </html>