首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

使用单点登录在JSF网站上创建PWA

单点登录(Single Sign-On,简称SSO)是一种身份验证机制,允许用户使用一组凭据(例如用户名和密码)登录到一个系统后,可以无需再次输入凭据即可访问其他相关系统或应用。这种机制提供了便利性和安全性,减少了用户需要记住多个凭据的负担,并且简化了用户的登录流程。

JSF(JavaServer Faces)是一种用于构建Java Web应用程序的Java EE(Enterprise Edition)的用户界面框架。它提供了一组组件和API,用于开发动态、可重用和可扩展的Web界面。JSF使用Java编程语言,支持MVC(Model-View-Controller)架构模式,使开发人员能够轻松地构建交互式和响应式的Web应用程序。

PWA(Progressive Web App)是一种结合了Web和原生应用程序功能的Web应用程序。它使用现代Web技术,如Service Worker和Web App Manifest,使应用程序具有离线访问、推送通知、本地缓存等功能,提供类似原生应用程序的用户体验。PWA可以在各种设备和平台上运行,无需安装即可访问,并且可以通过Web浏览器进行更新。

在JSF网站上创建PWA可以通过以下步骤实现:

  1. 添加Service Worker:在JSF网站的根目录下创建一个JavaScript文件,用于注册和管理Service Worker。Service Worker是一个后台线程,可以拦截和处理网络请求,实现离线缓存和推送通知等功能。
  2. 创建Web App Manifest:Web App Manifest是一个JSON文件,描述了PWA的元数据,如应用程序的名称、图标、主题颜色等。在JSF网站的根目录下创建一个manifest.json文件,并在HTML页面中添加link标签引用该文件。
  3. 添加离线缓存:通过Service Worker,可以将JSF网站的核心资源缓存到本地,使用户在离线状态下仍然可以访问网站内容。在Service Worker的安装阶段,将需要缓存的资源添加到缓存列表中,并在fetch事件中从缓存中响应请求。
  4. 实现推送通知:通过使用Service Worker和Web Push API,可以向用户发送推送通知。在Service Worker中注册推送服务,并在用户同意接收通知后,向推送服务器发送订阅请求。当有新的通知需要发送时,服务器将推送通知发送到Service Worker,然后Service Worker将通知显示给用户。

推荐的腾讯云相关产品和产品介绍链接地址:

  1. 腾讯云云服务器(CVM):提供可扩展的云计算实例,用于部署和运行JSF网站和PWA。详情请参考:https://cloud.tencent.com/product/cvm
  2. 腾讯云云开发(CloudBase):提供全托管的云原生应用开发平台,支持快速构建和部署PWA应用。详情请参考:https://cloud.tencent.com/product/tcb
  3. 腾讯云CDN加速(CDN):提供全球加速服务,加速JSF网站和PWA的内容分发,提升用户访问速度。详情请参考:https://cloud.tencent.com/product/cdn

请注意,以上推荐的腾讯云产品仅供参考,具体选择应根据实际需求和项目要求进行评估和决策。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

单点登录SSO的实现原理

单点登录SSO(Single Sign On)说得简单点就是在一个多系统共存的环境下,用户在一处登录后,就不用在其他系统中登录,也就是用户的一次登录能得到其他所有系统的信任。...单点录在大型网站里使用得非常频繁,例如像阿里巴巴这样的网站,在网站的背后是成百上千的子系统,用户一次操作或交易可能涉及到几十个子系统的协作,如果每个子系统都需要用户认证,不仅用户会疯掉,各子系统也会为这种重复认证授权的逻辑搞疯掉...不然发现以上的方案是把信任存储在客户端的Cookie里,这种方法虽然实现方便但立马会让人质疑两个问题: Cookie不安全 不能跨域免 对于第一个问题一般都是通过加密Cookie来处理,第二个问题是硬伤...对于第二个问题,一般采取数字签名的方法,要么通过数字证书签名,要么通过像md5的方式,这就需要SSO系统返回免URL的时候对需验证的参数进行md5加密,并带上token一起返回,最后需免的系统进行验证信任关系的时候...文章转载自走向架构师之路 其他可供学习的链接 单点登录SSO的实现原理 使用 CAS 在 Tomcat 中实现单点登录 CAS实现SSO单点登录原理

2K30

单点登录 SSO 的实现原理

单点登录SSO(Single Sign On)说得简单点就是在一个多系统共存的环境下,用户在一处登录后,就不用在其他系统中登录,也就是用户的一次登录能得到其他所有系统的信任。...单点录在大型网站里使用得非常频繁,例如像阿里巴巴这样的网站,在网站的背后是成百上千的子系统,用户一次操作或交易可能涉及到几十个子系统的协作,如果每个子系统都需要用户认证,不仅用户会疯掉,各子系统也会为这种重复认证授权的逻辑搞疯掉...系统(暂且这么称呼它)里,说起来只是简单地从客户端移到了服务端,但其中几个问题需要重点解决: 如何高效存储大量临时性的信任数据 如何防止信息传递过程被篡改 如何让SSO系统信任登录系统和免系统...对于第二个问题,一般采取数字签名的方法,要么通过数字证书签名,要么通过像md5的方式,这就需要SSO系统返回免URL的时候对需验证的参数进行md5加密,并带上token一起返回,最后需免的系统进行验证信任关系的时候...对于最后一个问题,可以通过白名单来处理,说简单点只有在白名单上的系统才能请求生产信任关系,同理只有在白名单上的系统才能被免登录。

1.2K100

sso单点登录系统实现原理(oauth2 单点登录原理)

单点登录SSO(Single Sign On)说得简单点就是在一个多系统共存的环境下,用户在一处登录后,就不用在其他系统中登录,也就是用户的一次登录能得到其他所有系统的信任。...单点录在大型网站里使用得非常频繁,例如像阿里巴巴这样的网站,在网站的背后是成百上千的子系统,用户一次操作或交易可能涉及到几十个子系统的协作,如果每个子系统都需要用户认证,不仅用户会疯掉,各子系统也会为这种重复认证授权的逻辑搞疯掉...最简单实现SSO的方法就是用Cookie,实现流程如下所示: 不然发现以上的方案是把信任存储在客户端的Cookie里,这种方法虽然实现方便但立马会让人质疑两个问题: Cookie不安全 不能跨域免...对于第二个问题,一般采取数字签名的方法,要么通过数字证书签名,要么通过像md5的方式,这就需要SSO系统返回免URL的时候对需验证的参数进行md5加密,并带上token一起返回,最后需免的系统进行验证信任关系的时候...对于最后一个问题,可以通过白名单来处理,说简单点只有在白名单上的系统才能请求生产信任关系,同理只有在白名单上的系统才能被免登录。

73730

关于如何做一个“优秀网站”的清单——规范篇

字面上直译为“先进的web应用”,而维基百科中给出的解释是——PWA是一个用来表示使用了最新技术的Web应用的术语。PWA是可靠的、迅速的、吸引人的、体验好的Web App的代名词。...确认方法:检查PWA加载时不使用应用程序安装插页式广告 改善方法: ●应该只有一个顶部或底部的应用安装横幅●将PWA添加到用户的主屏幕后,应删除任何顶部/底部横幅。...改善方法: 请参阅我们的指南,以创建用户友好的通知权限流。。...改善方法: 请参阅我们的指南,了解如何创建推荐通知。如果您的内容不及时和与此用户相关,请考虑使用电子邮件。...确保网站上有一些地方允许您管理通知权限或禁用它们。 改善方法: 创建一个UI,允许用户管理他们的通知偏好。

3.2K70

我做了一个大数据学习网站!

后续准备加上计算机基础,包括计算机网络,数据结构与算法等,除大数据文章取自五分钟学大数据公众号,网站其他内容如 java,scala,计,算法等,后续都会取自编程攻略公众号 正如网站介绍一样,编程攻略公众号主要发布计算机基础文章...也特地选了很多表情包,方便大家使用表情 4. 留言区 有好的资料分享?有问题要问?有故事要讲?来,留言区随意评论。...PWA 本网站已经引入 PWAPWA 是什么?...而 PWA 可以将 web 应用在本地存储数据与离线执行,无网络时也可阅读离线内容。 那怎么使用呢?...最后 Q:网站后续会不会收费 A:不会收费,放心使用 地址赶紧收藏一波:fivedata.cn

1.7K50

Google IO 2019,Chrome 有什么消息?

正值 Chrome 诞生第 10 年、谷歌诞生 20 周年,同时也是万维 30 周岁,演讲就在这样宏大的背景下展开。“万维的诞生拉近了人们的距离,我们可以自由地联系,一切只需要一个链接。...使用该机制,页面加载速度可以提升 18%-35%。 ? Chrome 75 默认启用延迟加载功能。...接着分享者介绍了其致力于推动发展的 PWA 的应用场景。PWA 概念由 Chrome 提出,开发团队在 Service Workers 和 Web App Manifest 规范上不断发力。...分享者表示开发团队当前希望改进系统对于 PWA 应用的发现能力,比如在网站上弹出安装提示,使得用户可以更加简便地发现并安装网站 PWA 应用。 ?...Site Isolation(站点隔离) Site Isolation 可针对某些类型的安全漏洞提供额外保护,它可以使不受信任的网站更难从其它网站上的帐户访问或窃取信息。

69830

SSO统一身份认证——SSO都有哪些常用的协议

SSO统一身份认证——SSO都有哪些常用的协议 单点登录(SingleSignOn,SSO),就是通过用户的一次性鉴别登录。...单点登录的使用场景有很多,C/S、B/S架构的系统均可使用,通常是支持快速配置使用。...SAML解决的最重要的需求是网页浏览器单点登录(SSO)。单点录在内部层面比较常见,(例如使用Cookie),但将其扩展到内部之外则一直存在问题,并使得不可互操作的专有技术激增。...WebAuthn全称Web Authentication API 使用asymmetric (public-key) cryptography (不对称加密)替代密码或SMS文本在网站上注册,验证, second-factor...88x31.png 知识共享许可协议 本作品由 cn華少 采用 知识共享署名-非商业性使用 4.0 国际许可协议 进行许可。

3K20

Butterfly主题的PWA实现方案

装配了PWA以后,用户可以将网站作为WEB APP安装到自己的设备上,以原生应用般的方式浏览博客,同时借助PWA的缓存机制,能够更快速的浏览。本文讨论的是使用两种方案实现PWA。...图标设计 在使用PWA之前,我们最好先行设计一个符合网站主题的图标。 本站使用的是brandmark图标设计网站,访问 brandmark进行图标设计。下载需要收费,不过可以截图。...运行hexo clean之后hexo generate,使用hexo server本地查看或者hexo deploy部署到网站上。...这会导致PWA无法加载索引文件,也就是说无法从PWA加载index.html,最终影响离线观看博客的体验。 安装必要插件 既然要使用gulp配合workbox实现PWA,自然少不了安装这两个插件。...创建gulpfile.js 在Hexo的根目录,创建一个gulpfile.js文件,打开[Blogroot]/gulpfile.js, 输入 创建在Hexo的根目录,创建一个sw-template.js

1.6K20

什么是单点登录,主要会应用于哪些场景?

单点录在大型网站里使用得非常频繁,例如,阿里旗下有淘宝、天猫、支付宝,阿里巴巴,阿里妈妈,阿里妹妹等网站,还有背后的成百上千的子系统,用户一次操作或交易可能涉及到几十个子系统的协作,如果每个子系统都需要用户认证...事实上,还用一个层面 上的集成变得越来越重要,那就是“身份认证”的整合,也就是“单点登录”。 另外,使用单点登录”还是SOA时代的需求之一。...我先从cookie的实现谈起,你就能很清楚的知道为什么需要分布式session方式实现单点登录。 基于Cookie的单点登录 最简单的单点登录实现方式,是使用cookie作为媒介,存放用户凭证。...不难发现以上方式把信任存储在客户端的Cookie中,这种方式很容易令人质疑: Cookie不安全 不能跨域实现免 对于第一个问题,通过加密Cookie可以保证安全性,当然这是在源代码不泄露的前提下...对于第二个问题,不能跨域实现免更是硬伤。所以,才有了以下的分布式session方案。

3.3K30

在项目中使用Service Worker 与 PWA

引言 最近next项目有使用pwa技术,使用起来也不复杂,目前浏览器的兼容性也比较良好 Service Worker是浏览器中独立于网页运行的脚本,而PWA(渐进式Web应用程序)是一种Web应用程序...Web Worker 的作用是允许主线程创建 worker 线程,使它们可以同时运行。Worker 线程主要负责处理复杂的计算任务,然后将结果返回给主线程。...离线支持 Service Worker 可以缓存 Web 应用程序的资源,使其在断或低网络质量环境下仍能够加载和运行。这意味着用户可以随时访问应用程序,无需依赖网络连接。 2....当网站上当前打开的页面关闭时,旧 Service Worker 将会被终止,新 Service Worker 将会取得控制权。...PWA 是一种使用现代 Web API 和传统的渐进性增强策略来创建跨平台 Web 应用程序的方法。它结合了 Web 应用程序的可发现性、易安装性和可链接性,以及原生应用的性能和交互体验。

34410

开发一个渐进式Web应用程序(PWA)前都需要了解什么?

转载请注明出处:葡萄城官,葡萄城为开发者提供专业的开发工具、解决方案和服务,赋能开发者。...最重要的是,渐进式Web应用程序在手机上创建方式也很简单,因为它们只是对你网站的增强,当有人在第一次访问你的网站时,PWA的功能在经过你授权后就会自动为你创建在手机上。...下面, 我们会一起来看看如何来创建一个属于自己的PWA应用。...此激活事件可用于清理SW早期版本的中使用的资源。 ? 实际操作应该首先创建一个和index.html同级,名为sw.js的空文件。...在开发过程中,你可以通过localhost使用SW 。但如果将其部署在网站上时,则需要启用HTTPS。 SW的路径不正确。 没有勾选Update on reload。   ?

1.6K20

PWA 实践应用(Google Workbox)

PWA 主要特点如下: 可靠 - 即使在网络不稳定甚至断的环境下,也能瞬间加载并展现。 用户体验 - 快速响应,具有平滑的过渡动画及用户操作的反馈。...站点需要使用 HTTPS。 页面需要响应式,能够在平板和移动设备上都具有良好的浏览体验。 所有的 URL 在断的情况下有内容展现,不会展现浏览器默认页面。.../ PWA使用 Google Workbox(CDN) 支持添加到桌面,manifest。...当一起使用 Service Worker 和 CacheStorage API 时,可以控制网站上使用的资源(HTML、CSS、JS、图像等)如何从网络或缓存中请求,甚至允许在离线时返回缓存的内容。...缓存策略可以是 Workbox 的一种预定义策略,也可以创建自己的策略。如下是一个使用路由和缓存的基本 Service Worker。

1.4K40

什么是单点登录?单点登录的三种实现方式

单点录在大型网站里使用得非常频繁,例如像阿里巴巴这样的网站,在网站的背后是成百上千的子系统,用户一次操作或交易可能涉及到几十个子系统的协作,如果每个子系统都需要用户认证,不仅用户会疯掉,各子系统也会为这种重复认证授权的逻辑搞疯掉...实现单点登录说到底就是要解决如何产生和存储那个信任,再就是其他系统如何验证这个信任的有效性,因此要点也就以下两个: 存储信任 验证信任 如果一个系统做到了开头所讲的效果,也就算单点登录,单点登录有不同的实现方式...以Cookie作为凭证媒介 最简单的单点登录实现方式,是使用cookie作为媒介,存放用户凭证。...不难发现以上方式把信任存储在客户端的Cookie中,这种方式很容易令人质疑: Cookie不安全 不能跨域实现免 对于第一个问题,通过加密Cookie可以保证安全性,当然这是在源代码不泄露的前提下。...通过JSONP实现 对于跨域问题,可以使用JSONP实现。

66910

PWA实战:面向下一代的Progressive Web APP

PWA有什么优势 回溯到 1990 年的圣诞节,Tim Berners-Lee 爵士和他在 CERN 的团队创建了使Web 正常工作所需的所有工具。...当然,现在我们有了像CSS 和JavaScript 这样的功能,但网页的核心依旧是使用 HTML、HTTP 以及其他一些模块来构建,这些都是 Berners-Lee 和他的团队在多年前所创建的。...这也正是 PWA 成为 Web 颠覆者的契机。主要的浏览器厂商一直在努力改进构建 Web 的方式, 并创建了一组新功能以使 Web 开发者能够创建快速、可靠和吸引人的网站。...通过 ADD TO HOME SCREEN 图标到达的用户最终在网站上购买的可能性高达 70%。 ?...当使用为 Web 构建的应用时,用户可以轻松访问你网站服务的一部分,而无须先下载庞大的安装文件。使用正确的缓存技术的 PWA 可以保存用户数据并立即为用户提供功能。

80540

PWA 入门

PWA 出现之后,添加到桌面的图标我们可以自定义,还可以自定义首次进入 app 的画面,而且它不再使用浏览器打开,而是像原生应用一样打开,没有 url 地址输入框。...manifest manifest 就是一个 json 配置文件,它的使用步骤如下: 在项目根目录下创建一个 manifest.json 文件; 在 HTML 文件中引入这个文件: <link rel=...它可以创建有效的离线体验,拦截网络请求并基于网络是否可用以及更新的资源是否驻留在服务器上来采取适当的动作。...当然,也可以使用其他策略,比如在有时就主动请求服务器的数据,如果断了,则使用缓存中的数据。...安装 PWA 但目前为止,网站可以离线访问了,但是可能还不能安装它。在有 PWA 的网站上,搜索栏的右侧一般有一个 + 图标,提示你可以安装到桌面。 ?

1.5K21

DecoHack #016 独立产品灵感周刊 - 苹果 WWDC 这周来了

Journalistic - 这是一个 PWA 简洁日记应用,多端都可用。不得不说 PWA 应用还是有很多优势的。 bookmarz - 这是一个可以共享浏览器书签的网站。...瓦尔 - 这个 App 是集合了待办计划、进度管理和笔记的软件,界面设计很不错。和时光进度这个产品的定位非常像。支持 iCloud 自动同步、屏幕小组件。...看了一下官设计的挺不错的。图标都有 SVG 动画,很用心作者 @amolkmr05 也是两年 Apple WWDC 奖学金获得者。...ASCII Art Paint - 免费的在线工具,可以用于创建和编辑 ASCII 艺术。 开源项目 Todonest - 这是开源的一个待办事项 Web 项目。使用 Vue.js 开发。...你可以使用它在一个页面中打开 Facebook、Instagram、Messenger 和 Telegram。类似的 Mac 端可以用 Franz 5。

30110

轻量级jQuery网格插件——ParamQuery

ParamQuery是一种轻量级的jQuery网格插件,基于用于用户界面控制、具有一致API的优秀设计模式jQueryUI Widget factory创建,能够在网页上展示各种类似于Excel和Google...使用ParamQuery,开发者可以轻松地实现以下特性: 排序 分页浏览 可以调整数据栏的大小 可以调整表格的高度和宽度 自定义主题 隐藏或显示列 像Excel那样冻结任意多列 显示任意数据源格式...,像HTML、数组、XML、JSON等 可以用于任意服务端框架,像ASP.NET、MVC3、JSP、JSF、PHP等等 虚拟滚动和渲染 直接编辑单元格 在所有主流浏览器(IE 6+、Firefox...、Chrome、Opera等等)上拥有一致的外观和功能 …… 在ParamQuery的网站上对各种各样的特性都做了示例展示,你可以浏览各种效果,以确定它是否能够满足你的具体需要。

1.9K60

澄清对AMP的十个误解

我现有的网站上无法使用 AMP 我们已经澄清过第 4 点,并没有什么特别的理由让你现在的网站无法使用 AMP,因为当你读完第一个问题后,就知道了 AMP 只是一个 web 组件类库而已。...我得在 AMP 和 PWA 中做出选择 AMP 和 PWA 是互补的技术,它们的使用场景完全不一样。...如果将它们结合在一起使用,你就能使用它们创建出我认为目前最完美的内容站点: 用户发现了你的内容的链接,点进来了 内容被瞬间加载完毕,并且看起来很舒服 阅读完之后,用户被邀请阅读更多内容,或者邀请用户使用一个更好体验的版本...应用外壳(PWA app shell) 当用户点击网站上的其它链接的时候(例如,在类似 App 的体验中,点击底部的按钮),Service Worker 接管请求,然后加载 PWA 应用外壳 最后,已经加载好的...PWA 应用外壳可以将 AMP 作为数据源嵌入到页面,这将使得你只需要为相同内容创建一个后台(既可以作为单独的 AMP 浏览,也可以作为 PWA 的数据源) 如果同时谈到 AMP 和 PWA 的话,还有更多话题可以说

96430
领券