[ABAP] 修改SAP网页端登录界面

文章目录

  • 前言
  • 一、配置服务
  • 二、Class实现
    • 1. 创建类
    • 2. 重写方法
  • 三、测试
  • 四、附 - 自动登录

前言

我们在SICF配置一些HTTP服务使用之后使用时，打开网页会提示输入账号密码，但是这个会以弹窗形式出现。
这对客户体验是很不友好的，这篇文章将会介绍如何修改自定义验证页面。
在这里插入图片描述

一、配置服务

  • 事务代码：SICF， 定义一个新服务LOGIN
    在这里插入图片描述
  • 点击Error Pages中的Configuration在这里插入图片描述
  • 选择Service-Specific Settings并如下设置
    我们会在YYCL_CUSTOM_LOGIN_HTM_DEMO中实现方法
    在这里插入图片描述

二、Class实现

1. 创建类

  • 我们需要继承CL_ICF_SYSTEM_LOGIN类
    在这里插入图片描述

2. 重写方法

  • 下面几个方法我们都需要重写（因为是abstract方法），但是只需要把HTM_LOGIN里实现逻辑就可以，别的方法不用实现
    HTM_CHANGE_PASSWD
    HTM_LOGIN
    HTM_MESSAGE_BOX
    HTM_SESSION_QUERY
    HTM_SYSTEM_MESSAGE    在这里插入图片描述
  • HTM_LOGIN里我们需要返回HTML页面代码。
method HTM_LOGIN.


  data: ls_mes    like line of me->m_logmessages[],
        e_message type string.

*--------------------------------------------------------------------*

  free: e_message.
  clear: e_message.



*--
  if me->m_logmessages[] is not initial.

    loop at me->m_logmessages into ls_mes.
      concatenate e_message
                  ls_mes-message
                  into e_message separated by space.
    endloop.

    rv_html = `{"error":"` && e_message && `"}`.

*    RETURN.

  endif.


*
**-- 登录界面 HTML+CSS
  concatenate
  `<!DOCTYPE html>`
`<html>`

`<head>`
    `<title>Login Page</title>`

    `<style>`
        `* {`
            `margin: 0;`
            `padding: 0;`
            `box-sizing: border-box;`
        `}`

        `body {`
            `background: #191919;`
            `font-family: sans-serif;`
        `}`

        `.login-box {`
            `width: 280px;`
            `position: absolute;`
            `top: 50%;`
            `left: 50%;`
            `transform: translate(-50%, -50%);`
            `color: #fff;`
        `}`

        `.login-box2 {`
            `width: 600px;`
            `position: absolute;`
            `top: 65%;`
            `left: 50%;`
            `transform: translate(-50%, -50%);`
            `color: #fff;`
            `text-align: center;`
        `}`

        `.login-box h2 {`
            `text-align: center;`
            `margin-bottom: 30px;`
        `}`

        `.user-box {`
            `position: relative;`
            `margin-bottom: 30px;`
        `}`

        `.user-box input {`
            `width: 100%;`
            `padding: 10px 0;`
            `font-size: 16px;`
            `color: #fff;`
            `border: none;`
            `border-bottom: 1px solid #fff;`
            `outline: none;`
            `background: transparent;`
        `}`

        `.user-box label {`
            `position: absolute;`
            `top: 0;`
            `left: 0;`
            `padding: 10px 0;`
            `font-size: 16px;`
            `color: #fff;`
            `pointer-events: none;`
            `transition: 0.5s;`
        `}`

        `.user-box input:focus~label,`
        `.user-box input:valid~label {`
            `top: -20px;`
            `left: 0;`
            `color: #03a9f4;`
            `font-size: 12px;`
        `}`

        `a {`
           `display: inline-block;`
            `text-align: center;`
            `padding: 14px 110px;`
            `margin-top: 1px;`
            `color: #fff;`
            `text-transform: uppercase;`
            `text-decoration: none;`
            `position: relative;`
            `overflow: hidden;`
            `transition: 0.5s;`
        `}`

        `a:hover {`
            `background: #03a9f4;`
            `cursor: pointer;`
        `}`

        `a span {`
            `position: absolute;`
            `display: block;`
        `}`

        `a span:nth-child(1) {`
            `top: 0;`
            `left: -100%;`
            `width: 100%;`
            `height: 2px;`
            `background: linear-gradient(90deg, transparent, #03a9f4);`
            `animation: animate1 1s linear infinite;`
        `}`

        `@keyframes animate1 {`
            `0% {`
                `left: -100%;`
            `}`

            `50%,`
            `100% {`
                `left: 100%;`
            `}`
        `}`

        `a span:nth-child(2) {`
            `top: -100%;`
            `right: 0;`
            `width: 2px;`
            `height: 100%;`
            `background: linear-gradient(180deg, transparent, #03a9f4);`
            `animation: animate2 1s`
        `}`
    `</style>`

`</head>`

`<body>`
    `<div class="login-box">`
        `<h2>Login Here</h2>`
        `<form name="main" id="main" method="post">`
            `<div class="user-box">`
                `<input type="text" name="sap-user" required="true">`
                `<label>Username</label>`
            `</div>`
            `<div class="user-box">`
                `<input type="password" name="sap-password" required="true">`
                `<label>Password</label>`
            `</div>`
            `<a  onClick="login()">`
                `<span></span>`
                `<span></span>`
                `<span></span>`
                `<span></span>`
                `Submit`
            `</a>`

             `<input type="hidden" name="sap-reload" value="get" >`
        `</form>`
    `</div>`
    `<div class="login-box2">`   e_message  `</div>`
        `<script>`
        `function login(){`
            `document.getElementById('main').submit();`
        `}`
    `</script>`
`</body>`

`</html>`

  into rv_html.

endmethod.

这个方法是没法设置外部断点的，有问题没法调试。

三、测试

  • 成功渲染页面
    在这里插入图片描述
  • 登录成功
    在这里插入图片描述

四、附 - 自动登录

  • 如果想在某些场景下输入链接时直接登录（免验证），可以使用如下代码实现。(其实就是onload时提交表单)
    这样做会有安全隐患，所以不推荐使用。
  data: ls_mes    like line of me->m_logmessages[],
        e_message type string.

*--------------------------------------------------------------------*

  free: e_message.
  clear: e_message.

  data:sid type string,
       spw type string.
  sid = '账号'.
  spw = '密码'.

*--Error
  if me->m_logmessages[] is not initial.

    loop at me->m_logmessages into ls_mes.
      concatenate e_message
                  ls_mes-message
                  into e_message separated by space.
    endloop.

    rv_html = `{"error":"` && e_message && `"}`.

    return.

  endif.


*
**-- 自动登录
  concatenate
  `<!DOCTYPE html>`
`<html>`

`<head>`
    `<title>Login Page</title>`
`</head>`

`<body>`
        `<form name="main" id="main" method="post">`
              `<input type="hidden" id="sap-user" name="sap-user" value="">`
              `<input type="hidden" id="sap-password" name="sap-password" value="">`
             `<input type="hidden" id="sap-reload" name="sap-reload" value="get" >`
        `</form>`
        `<script>`

    `window.onload = function(){`
      `document.getElementById('sap-user').value = "` sid `";`
      `document.getElementById('sap-password').value = "` spw `";`
      `document.getElementById('main').submit();`
    `};`
    `</script>`
`</body>`

`</html>`

  into rv_html.
  • 看看效果（不用登录直接显示页面）
    在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

C#高级 09 IEnumerable可枚举类型--可迭代类型

C#高级 09 IEnumerable可枚举类型--可迭代类型

了解Linq操作需先了解IEnumerable可枚举类型–可迭代类型&#xff0c;因为Linq中的很多函数的返回值类型和传入的形参类型都是IEnumerable的。 IEnumerable可枚举类型–可迭代类型 只要一个类型实现了IEnumerable接口&#xff0c;就可以对这个类型进行遍历。 首选来看IEnumer…
阅读更多...
体系化的进阶学习内容

体系化的进阶学习内容

UWA学堂&#xff1a;传播游戏行业的体系化的进阶学习内容。UWA学堂作为面向开发者的在线学习平台&#xff0c;目前已经上线272门课程&#xff0c;涵盖了3D引擎渲染、UI、逻辑代码等多个模块&#xff0c;拥有完整的学习体系&#xff0c;一直致力于为广大的开发者提供更丰富、更优…
阅读更多...
BIND-DNS配置介绍

BIND-DNS配置介绍

一、主要配置文件 /etc/named.conf options { //Option 段全部配置 listen-on port 53 { 127.0.0.1; };//表示BIND将在53端口监听&#xff0c;若需要对所有IP进行监听&#xff0c;则修改为// listen-on port 53 { any; }; directory "/var/named"…
阅读更多...
解锁测试性能瓶颈：深度探讨JMeter分布式性能测试！

解锁测试性能瓶颈：深度探讨JMeter分布式性能测试！

在做后端服务器性能测试中&#xff0c;我们会经常听到分布式。但你是否了解分布式呢&#xff1f;今天&#xff0c;我们就来给大家讲讲&#xff0c;在企业实战中&#xff0c;如何使用分布式进行性能测试&#xff0c;实战过程中&#xff0c;又有哪些地方要特别注意&#xff1f; 0…
阅读更多...
书生·浦语大模型全链路开源体系 学习笔记 第一课

书生·浦语大模型全链路开源体系 学习笔记 第一课

背景 大模型是发展人工通用人工智能的一个重要途径&#xff0c;能够解决多种任务和多种模态&#xff0c;展示了一个更面向更高阶的智能的潜在途径。大模型的发展历程是从专用模型到通用模型的过程&#xff0c;从语音识别、图像识别、人脸识别等专用模型&#xff0c;到通用的大…
阅读更多...
大白话说区块链和通证

大白话说区块链和通证

1 区块链 简单地说&#xff0c;区块链其实就像是一个不可篡改的分布式数据库&#xff0c;该分布式数据库记录了一系列交易或事件。区块链运行在至少1个以上的节点上&#xff0c;每个节点都有自己的一个分布式数据库&#xff0c;也就是分布式账本。正常情况下&#xff0c;每个节…
阅读更多...
Python基础篇: 环境安装

Python基础篇: 环境安装

Python基础环境使用 一&#xff1a;运行环境Anaconda介绍1、Anaconda搭建1.1、下载方式1.2、安装1.3、验证是否安装成功 2、管理python环境2.1、列出所有环境2.2、创建环境2.3、进入指定虚拟环境2.4、离开虚拟环境2.5、删除虚拟环境 3、依赖管理3.1、安装依赖3.2、卸载依赖3.3、…
阅读更多...
[C#]winform部署PaddleDetection的yolo印章检测模型

[C#]winform部署PaddleDetection的yolo印章检测模型

【官方框架地址】 https://github.com/PaddlePaddle/PaddleDetection.git 【算法介绍】 PaddleDetection 是一个基于 PaddlePaddle&#xff08;飞桨&#xff09;深度学习框架的开源目标检测工具库。它提供了一系列先进的目标检测算法&#xff0c;包括但不限于 Faster R-CNN, …
阅读更多...
Prometheus-Alertmanage钉钉实现告警

Prometheus-Alertmanage钉钉实现告警

获取钉钉的webhook地址 1、注册企业钉钉 a、注册企业钉钉 浏览器打开钉钉注册页面 填入手机号码&#xff0c;填入获取到的验证码&#xff0c;点注册 填入企业资料并注册 注册成功后&#xff0c;扫描二维码下载钉钉&#xff0c;如下图&#xff1a; b、添加机器人 管理后台 因…
阅读更多...
社科院与美国杜兰大学金融管理硕士项目——为金融领域人士照亮寒冬中的新机遇

社科院与美国杜兰大学金融管理硕士项目——为金融领域人士照亮寒冬中的新机遇

随着全球金融市场的不断演变&#xff0c;金融领域的发展日新月异&#xff0c;充满了不确定性和挑战。特别是在当前的经济寒冬期&#xff0c;许多金融领域人士面临着巨大的压力和困境&#xff0c;需要寻找新的发展机遇和突破口。社科院与杜兰大学金融管理硕士项目如同明灯&#…
阅读更多...
Java学习——设计模式——行为型模式1

Java学习——设计模式——行为型模式1

文章目录 行为型模式模板方法策略模式命令模式责任链模式 行为型模式 行为型模式用于描述程序在运行时复杂的流程控制&#xff0c;即描述多个类或对象之间怎样相互协作共同完成单个对象无法单独完成的任务&#xff0c;涉及算法与对象间职责的分配。 行为型模式分为类行为模式和…
阅读更多...
PHPStudy快速搭建网站并结合内网穿透远程访问本地站点

PHPStudy快速搭建网站并结合内网穿透远程访问本地站点

文章目录 [toc]使用工具1. 本地搭建web网站1.1 下载phpstudy后解压并安装1.2 打开默认站点&#xff0c;测试1.3 下载静态演示站点1.4 打开站点根目录1.5 复制演示站点到站网根目录1.6 在浏览器中&#xff0c;查看演示效果。 2. 将本地web网站发布到公网2.1 安装cpolar内网穿透2…
阅读更多...
上门回收小程序开发的优势，顺应时代发展

上门回收小程序开发的优势，顺应时代发展

当下&#xff0c;人们的生活水平不断提高&#xff0c;相应产生的闲置物品也在不断增加&#xff0c;回收行业因此得到了快速发展。 同时&#xff0c;在互联网的发展下&#xff0c;回收行业也慢慢转到了线上&#xff0c;人们在卖闲置物品时不需要到门店内&#xff0c;只需要在手…
阅读更多...
x-cmd pkg | pdfcpu - 强大的 PDF 处理工具

x-cmd pkg | pdfcpu - 强大的 PDF 处理工具

目录 简介首次用户多功能支持性能表现安全的加密处理进一步阅读 简介 pdfcpu 是一个用 Go 编写的 PDF 处理库。同时它也提供 API 和 CLI。pdfcpu 提供了丰富的 PDF 操作功能&#xff0c;用户还能自己编写配置文件&#xff0c;用来管理和使用各种自定义字体并存储有效的默认配置…
阅读更多...
【SpringCloud】设计原则之数据一致性与设计模式

【SpringCloud】设计原则之数据一致性与设计模式

一、设计原则之数据一致性 数据一致性分以下几种情况。 强一致性 当更新操作完成之后&#xff0c;任何多个后续进程或线程的访问都会返回最新的更新过的值。这种是对用户最友好的&#xff0c;就是用户上一次写什么&#xff0c;下一次就保证能读到什么。根据 CAP 理论&#…
阅读更多...
代码随想录算法训练营第五十八天|739. 每日温度、496.下一个更大元素I

代码随想录算法训练营第五十八天|739. 每日温度、496.下一个更大元素I

代码随想录 (programmercarl.com) 739. 每日温度 栈里面存放的是元素的下标&#xff0c;确保栈里面的下标对应的元素是单调递增的。 如果栈里面存放的是元素的话&#xff0c;就没有办法定位到下标值&#xff0c;无法计算出距离&#xff0c;所以直接就存入下标。 class Solut…
阅读更多...
COCO Dataset Format

COCO Dataset Format

COCO (Common Objects in Context) dataset数据集是一个广泛应用于目标检测、语义分割的数据集&#xff0c;包含330K 图片数据 与 2.5 million 个目标实体。 1.数据集下载 !wget http://images.cocodataset.org/zips/train2017.zip -O coco_train2017.zip !wget http://image…
阅读更多...
【JAVA】深入了解 Java 中的 DelayQueue

【JAVA】深入了解 Java 中的 DelayQueue

&#x1f34e;个人博客&#xff1a;个人主页 &#x1f3c6;个人专栏&#xff1a; JAVA ⛳️ 功不唐捐&#xff0c;玉汝于成 目录 前言 Java中的DelayQueue是一个强大的工具&#xff0c;常用于处理需要延迟执行的任务或具有过期时间的元素。通过实现Delayed接口&#x…
阅读更多...
​三子棋（c语言）

​三子棋（c语言）

前言&#xff1a; 三子棋是一种民间传统游戏&#xff0c;又叫九宫棋、圈圈叉叉棋、一条龙、井字棋等。游戏规则是双方对战&#xff0c;双方依次在9宫格棋盘上摆放棋子&#xff0c;率先将自己的三个棋子走成一条线就视为胜利。但因棋盘太小&#xff0c;三子棋在很多时候会出现和…
阅读更多...
HCIP-端口隔离、arp代理、聚合vlan、QinQ

HCIP-端口隔离、arp代理、聚合vlan、QinQ

目录 一&#xff0c;端口隔离&#xff08;同vlan间同交换机下的端口隔离技术&#xff09; 端口隔离原理&#xff1a; 双向隔离配置 4&#xff0c;端口隔离特殊使用&#xff1a;单向隔离 6&#xff0c;ARP代理 6.1 路由式代理 6.2 VLAN内ARP代理 6.3 VLAN间ARP代理 6.3…
阅读更多...
最新文章

Copyright @ 2022~2023