iPortal 注册登录模块扩展开发

作者：yx

文章目录

  • 前言
  • 一、示例代码简介
  • 二、对接 iPortal REST API 接口
    • 2.1、登录模块扩展开发
    • 2.2、注册模块扩展开发
  • 三、页面内容及样式实现
  • 四、配置启用定制页面

前言

针对注册登录模块，iPortal 允许用户通过 iFrame 方式接入自行开发的页面，对注册与登录页面的元素与样式进行完全的重写，以实现高度自由化的定制。

扩展开发 iPortal 注册登录模块的流程一般包括：对接 iPortal REST API 接口、页面内容及样式实现、配置启用定制页面等。iPortal 产品包中提供了一套简单的示例代码（位于 %SuperMap iPortal_HOME%\webapps\iportal\resources\web-ui\extend\login 目录下）以指导您如何进行注册与登录页面的扩展开发。

一、示例代码简介

示例代码的结构如下图：

其中 login.html、register.html 为定制的 HTML 页面，config.json 为扩展开发配置文件（该文件为必须文件，且不可更名），js 文件夹内为对接 iPortal 注册登录与重置密码相关 API 的 JavaScript 文件。
注意：
1、下文中示例代码中的 rootUrl 均指 http://{ip}/{port}/{contextPath}/（例：http://127.0.0.1:8190/iportal/），定义方式可以参考：

var index = window.location.href.indexOf('resources');
var rootUrl = window.location.href.slice(0,index).replace(window.location.origin,'');

2、由于定制的页面是通过 iFrame 的方式引入的，因此定制页面的 window.parent 对象所对应的是 web-ui 页面中的 window 对象。如果您需要在登录、注册两个页面间进行切换，可以调用 window.parent.changeRoute(param) 方法，其中 param的值为“login”/“register”。

二、对接 iPortal REST API 接口

iPortal 提供了门户全功能的 REST API 接口，将门户功能以资源的形式提供给客户端，您可以调用注册与登录相关的 REST API 以实现定制开发的页面与 iPortal 后端的交互，下面分别介绍登录、注册两个模块涉及的 REST API 及具体使用方法。

2.1、登录模块扩展开发

对接 iPortal 登录接口 login（http://{ip}:{port}/iportal/web/login.json），通过发送 POST 请求，在请求体中携带用户名和密码，可以登录 iPortal。login 接口的具体请求参数请参阅 REST API：login
iPortal 示范代码（SuperMap iPortal_HOME%\webapps\iportal\resources\web-ui\login\js 目录下的 index.js 文件）中定义了 login 登录方法，用于获取用户输入的账号与密码并向 iPortal 发送登录请求，iPortal 返回登录成功或失败信息，登录成功则返回首页。以下为 index.js 文件中与登录模块相关的代码：

function login(name, pass) {var url = rootUrl + 'web/login.json';var param = {username: $(".login_name").val(),password: $(".login_password").val(),rememberme: $(".login_remember").is(':checked')};if (name && pass) {param.username = name;param.password = pass;}$.ajax({type : "POST",url : url,data : JSON.stringify(param),dataType: 'json',success: function(result) {console.log(result);if ( result.succeed ) {window.parent.open(rootUrl + "web-ui/home", "_self");} else {alert("登录失败！");}},error: function () {alert("登录失败！");}});
}

2.2、注册模块扩展开发

第一步（可选）：如果您对注册功能有一些限制，如需要在用户注册时填写部门、邮箱等信息，可以从门户配置接口 portalConfig（http:// {ip}:{port}/iportal/web/config/portal.json）的响应中获取到是否开启了相关的注册配置，具体可参阅 REST API：portalConfig
若开启了注册时选择部门的功能，则还需要发送 departments 请求（http://{ip}:{port}/iportal/manager/iportalconfig/departments.json）获取 iPortal 的所有部门信息，具体可参阅 REST API：departments。如果您对注册功能无限制，可以跳过此步骤。
第二步： 对接 iPortal 注册的相关接口，具体包括：

  • 注册新用户接口 users（http://{ip}:{port}/iportal/web/users.json），向 users 接口发送 POST 请求可以注册一个新用户，user 接口的请求参数及响应体请参阅 REST API：users
  • 验证用户名接口 isRegistered（http://{ip}:{port}/iportal/web/users/registered.json），iPortal 不允许用户名重复，向 isRegistered 接口发送 GET 请求可以获取输入的用户名是否已经被占用，isRegistered 接口的请求参数及响应体请参阅 REST API：isRegistered
  • 验证昵称接口 isNickRegistered（http://{ip}:{port}/iportal/web/users/nickname/isregistered.json），iPortal 不允许用户昵称重复，向 isNickRegistered 接口发送 GET 请求可以获取输入的昵称是否已经被占用，isRegistered 接口的请求参数及响应体请参阅 REST API：isNickRegistered

iPortal 示范代码（SuperMap iPortal_HOME%\webapps\iportal\resources\web-ui\login\js 目录下的 index.js 文件）中定义了 sign_up 注册方法，记录用户在注册界面输入的信息并验证其合法性，验证通过后向 iPortal 发送注册用户请求，iPortal 返回注册成功或失败信息。

三、页面内容及样式实现

示例代码中 login.html、register.html、resetPwd.html 文件为自定义开发的页面范例，采用 HTML+JavaScript+CSS 技术栈实现，包含了注册、登录、重置密码页面所需的最基本元素。这里以登录页面为例：

<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>登录示例</title>
</head>
<body bgcolor="#ffffff">
<div class="login"><h2>LOGIN</h2><input type="name" placeholder="Name" class="login_name"/><input type="password" placeholder="Password" class="login_password"/><span class="reset"><input type="checkbox" class="login_remember"/>Remember Me<a href="javascript:void(0)" class="openResetPwd" onclick="openResetPwdPage()">Forgot Password?</a></span><br/><button class="btn_login" onClick="login()">LOGIN</button>
</div>
<script src="js/jquery-3.4.1.min.js"></script>
<script src="js/index.js"></script>
<style>.login {margin: 100px auto;width: 280px;height: 400px;}h2{text-align: center;}.login > input{width: 280px;height: 30px;margin-bottom: 20px; }.reset{display: inline-block; width: 280px;margin-bottom: 20px;font-size: 14px;text-align: left}.reset > a{display: inline-block;float: right;color: #000;cursor: pointer;}.btn_login {width: 285px;height: 35px;}
</style>
</body>
</html>

其中 login_name、login_password、login_remember、openResetPwdPage()、login() 等 id 与方法名需要与上述2.1小节“登录模块扩展开发”中定义的名称保持一致。 为 JavaScript 文件的路径。
效果如下图：
在这里插入图片描述
以上作为入门教程，页面元素与样式相对简单。由于 iPortal 是以 iFrame 形式引入扩展页面，因此您完全可以使用更丰富的前端技术栈与可视化库来定制专属页面。

四、配置启用定制页面

在您开发完成注册登录以及重置密码页面的定制开发后，还需修改 %SuperMap iPortal_HOME%\webapps\iportal\resources\web-ui\extend\login 目录下的 config.json 文件，将定制后的页面应用至 iPortal，config.js 代码如下：

{"enable": true,"extendType": "IFRAME","loginUrl": "{portalRoot}/resources/web-ui/extend/login/login.html","registerUrl": "{portalRoot}/resources/web-ui/extend/login/register.html"
}

参数介绍：

  • enable：是否使用用户扩展定制的登录注册及重置密码页面。默认值：false，使用 iPortal 内置的登录注册页面。使用用户扩展开发的页面时，需要将该值设置为：true。
  • extendType：扩展的方式，目前支持以 iFrame 形式扩展。
  • loginUrl：定制的登录页面路径。
  • registerUrl：定制的注册页面路径。

修改并保存上述配置后，即可在 iPortal 中使用定制开发的注册登录界面。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/7502.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

macOS 下安装brew、nvm

macOS 下安装brew、nvm

1、brew&#xff1a; /bin/zsh -c "$(curl -fsSL https://gitee.com/cunkai/HomebrewCN/raw/master/Homebrew.sh)" brew -v 查看版本 示例&#xff1a; 安装jdk brew search jdk 查询可用的jdk版本 brew install openjdk11 安装制定版本jdk 更换源&#xff1…
阅读更多...
经典面试题（力扣，接雨水）

经典面试题（力扣，接雨水）

接雨水 方法一思路测试代码复杂度测试结果 方法二思路测试代码复杂度测试结果 给定 n 个非负整数表示每个宽度为 1 的柱子的高度图&#xff0c;计算按此排列的柱子&#xff0c;下雨之后能接多少雨水。 示例1&#xff1a; 输入&#xff1a;height [0,1,0,2,1,0,1,3,2,1,2,1]…
阅读更多...
vue之vue-base组件

vue之vue-base组件

功能描述 业务页面基类组件，提供给业务开发的继承基类 #方法 初始化方法 init(); 校验表单 validateForm(); 事件绑定，可覆盖原有事件 bindEvent(event, bindfunction, target); 解绑事件 unbindEvent(event); 跳转路径 link(linkUrl); 参数输入，将全局管道中 （session\…
阅读更多...
设计模式之迭代器模式

设计模式之迭代器模式

写在前面 本文一起看下一种行为型设计模式&#xff0c;迭代器模式。 1&#xff1a;介绍 1.1&#xff1a;什么时候使用迭代器设计模式 当对象的内部有一批数据&#xff0c;希望能够对外暴露访问&#xff0c;但因为如下的原因不希望外部直接访问内部的具体存储数据的元素&…
阅读更多...
[JAVAee]线程安全

[JAVAee]线程安全

目录 线程安全的理解 线程不安全的原因 ①非原子性 ②可见性 ③代码重排序 体会何为不安全的线程 保证线程安全 一个代码在多线程的环境下就很容易出现错误. 线程安全的理解 线程安全是什么呢?通俗的来讲,线程安全就是在多线程的环境下,代码的结果是符合我们预期的,就…
阅读更多...
MFC第二十一天 CS架构多页面开发与数据交互、CImageList图像列表介绍 、CListCtrl-SetItem设置列表项的方法

MFC第二十一天 CS架构多页面开发与数据交互、CImageList图像列表介绍 、CListCtrl-SetItem设置列表项的方法

文章目录 CImageList图像列表介绍CListCtrl图标的原理CListCtrl列表图标设置CListCtrl-SetItem设置列表项的方法 CS架构多页面开发与数据交互添加用户实现向导多页数据交互pch.hCLientXq.h CAppCPage1.hCPage1.cppCPage2.hCPage2.cppCWorkerDlg .hCWorkerDlg.cpp 多页数据修改C…
阅读更多...
【高危】Atlassian Confluence 远程代码执行漏洞

【高危】Atlassian Confluence 远程代码执行漏洞

漏洞描述 Confluence 是由 Atlassian 开发的知识管理与协同软件&#xff0c;通常在企业内部用作wiki系统。 Confluence 7.19.8到8.2.0之前的版本中存在远程代码执行漏洞&#xff0c;具有登录权限的攻击者无需用户交互即可在 Confluence 服务器中执行任意命令。 漏洞名称Atlass…
阅读更多...
微服务之配置中心

微服务之配置中心

什么是配置中心 配置&#xff1a;就是springboot中的application.yml/properties文件 比如&#xff1a;项目名、端口号、数据库连接参数、启动参数等。 配置中心&#xff1a;配置中心就是用来管理项目当中所有配置的系统&#xff0c;也是微服务系统当中不可或缺的一部分。 只需…
阅读更多...
C++---string模拟实现

C++---string模拟实现

string模拟实现 构造函数和析构函数begin和endreserve和resizepush_back和appendc_strempty&#xff0c;size&#xff0c;capacity&#xff0c;clear拷贝构造和赋值和比较大小[]重载insert和erasefind查找 前面我们已经对string进行了简单的介绍&#xff0c;只要会用各个函数即…
阅读更多...
【Boost搜索引擎项目】

【Boost搜索引擎项目】

文章目录 一、项目流程二、项目展示 一、项目流程 1.编写数据去标签模块–parser.cc 将去标签之后干净文档以title\3content\3url\ntitle\3content\3url\n格式放入同一文件中。 2.建立索引模块–index.hpp 读取处理好的行文本文件进行分词、权重计算等操作&#xff0c;在内存中…
阅读更多...
war包读取properties配置文件错误，返回null

war包读取properties配置文件错误，返回null

现象&#xff1a;使用intellij Idea编写java项目&#xff0c;debug调试时&#xff0c;使用redis.properties文件的类A&#xff0c;A的代码可以使用 “InputStream in RedisUtils.class.getClass().getResourceAsStream("/" proPath);” 方式正常读取redis.propert…
阅读更多...
【云驻共创】CodeArts Repo ---高效代码协同开发之旅

【云驻共创】CodeArts Repo ---高效代码协同开发之旅

目录 一、代码托管发展史 1.1 第一代 1.2 第二代 1.3 第三代 二、CodeArts Repo 介绍 二、CodeArts Repo 功能架构 2.1 研发协同 2.2 代码管理功能 2.3 代码存储特性 三、CodeArts Repo 技术能力 三、华为云代码托管技术发展历程 四、CodeAr…
阅读更多...
ubuntu挂载ext4文件系统

ubuntu挂载ext4文件系统

文章目录 1.虚拟机分配10G磁盘用来挂载ext4文件系统2.磁盘分区3.创建文件系统4.挂载文件系统5.卸载文件系统6.使用ior测试ext4三种日志模式&#xff08;1&#xff09;ordered&#xff08;2&#xff09;journal&#xff08;3&#xff09;writeback 1.虚拟机分配10G磁盘用来挂载e…
阅读更多...
SpringBoot项目修改Tomcat版本号

SpringBoot项目修改Tomcat版本号

SpringBoot项目修改Tomcat版本号 前言如果项目是以jar包形式打包部署如果项目是以war包形式打包部署示例 仰天大笑出门去&#xff0c;我辈岂是蓬蒿人 前言 Springboot项目,默认是使用内嵌Tomcat servlet容器形式打包部署。关于怎么修改默认的版本号&#xff0c;捣鼓了好久终于…
阅读更多...
PostgreSQL 设置时区，时间/日期函数汇总

PostgreSQL 设置时区，时间/日期函数汇总

文章目录 前言查看时区修改时区时间/日期操作符和函数时间/日期操作符日期/时间函数&#xff1a;extract&#xff0c;date_part函数支持的field 数据类型格式化函数用于日期/时间格式化的模式&#xff1a; 扩展 前言 本文基于 PostgreSQL 12.6 版本&#xff0c;不同版本的函数…
阅读更多...
基于STM32设计的人体健康监护系统(华为云IOT)

基于STM32设计的人体健康监护系统(华为云IOT)

一、设计需求 1.1 设计需求总结 根据需求，要求设计一款基于 STM32 的人体健康监护系统。采用系统模块化思路进行，将多个数模传感器收集到的数据和操作指令一并送至 STM32 中心处理器进行处理分析。 该系统可以实时监测被测者的心率、体温以及周围环境的温度，也同时可以通…
阅读更多...
(vue)vue项目中引入外部字体

(vue)vue项目中引入外部字体

(vue)vue项目中引入外部字体 效果&#xff1a; 第一步 放置字体包&#xff0c;在assets下创建一个fonts文件夹&#xff0c;放入下载的字体文件 第二步 创建一个font.css文件用于定义这个字体包的名字 第三步 在App.vue的css中将这个css文件引入 第四步 页面使用 font-famil…
阅读更多...
Qt : day1

Qt : day1

1.聊天界面 #include "widget.h"Widget::Widget(QWidget *parent): QWidget(parent) {qDebug() << this->size(); //获取当前页面尺寸this->setFixedSize(500, 600); //设置固定尺寸this->setWindowTitle("聊天框"); //设置窗口…
阅读更多...
单Bank OTA升级：STM32G071 APP (二)

单Bank OTA升级：STM32G071 APP (二)

接上一篇文章&#xff1a;单Bank OTA升级&#xff1a;STM32G071 BootLoader (一)&#xff1a;跳转链接 什么是单Bank升级&#xff1a;将Flash划分为以下3个区域。 BootLoader区&#xff1a;程序进行升级的引导程序&#xff0c;根据Upade_Flag来判断跳转Bank区运行程序或是接收…
阅读更多...
SSL证书是什么？

SSL证书是什么？

SSL证书是什么&#xff1a;SSL证书&#xff08;Secure Sockets Layer Certificate&#xff09;是一种数字证书&#xff0c;用于在计算机网络上进行安全通信。它可以验证通信双方的身份&#xff0c;并通过加密传输数据来实现安全通信。 SSL证书申请&#xff1a;通常&#xff0c…
阅读更多...
最新文章

Copyright @ 2022~2023