apache syncope 2.0 enduser ui
TRANSCRIPT
![Page 1: Apache Syncope 2.0 Enduser UI](https://reader035.vdocuments.mx/reader035/viewer/2022062302/58a247181a28ab7b3c8b7243/html5/thumbnails/1.jpg)
Apache Syncope IdM 2.0 Enduser UI
Andrea Patricelli, Software Engineer, Tirasa s.r.l
![Page 2: Apache Syncope 2.0 Enduser UI](https://reader035.vdocuments.mx/reader035/viewer/2022062302/58a247181a28ab7b3c8b7243/html5/thumbnails/2.jpg)
Apache Syncope committer since 2013→ PMC member in October 2016
➔ Apache Syncope dev since 1.1.X release
➔ Apache Syncope Enduser UI➔ Syncope Docker
https://github.com/andrea-patricelli/syncope-docker
About me
![Page 3: Apache Syncope 2.0 Enduser UI](https://reader035.vdocuments.mx/reader035/viewer/2022062302/58a247181a28ab7b3c8b7243/html5/thumbnails/3.jpg)
Agenda
Introduction to the IdM worldWho is the end user and why a consoleEnduser UI: from 1.0 to 2.0How we made itInnovations broughtFuture perspectives
![Page 4: Apache Syncope 2.0 Enduser UI](https://reader035.vdocuments.mx/reader035/viewer/2022062302/58a247181a28ab7b3c8b7243/html5/thumbnails/4.jpg)
What's IdM about?
● Data records that contains a collection of data about a person
● “Data record” → Account
● “A person” → Identity
● The joint effort of business
![Page 5: Apache Syncope 2.0 Enduser UI](https://reader035.vdocuments.mx/reader035/viewer/2022062302/58a247181a28ab7b3c8b7243/html5/thumbnails/5.jpg)
● Identity Stores○ Storage of user information
● Provisioning○ Synchronize account data across identity stores
and a broad range of data formats, models, meanings and purposes
● Access Management○ Security mechanisms that take place when a
user is accessing a specific system or functionality
IdM technologies
![Page 6: Apache Syncope 2.0 Enduser UI](https://reader035.vdocuments.mx/reader035/viewer/2022062302/58a247181a28ab7b3c8b7243/html5/thumbnails/6.jpg)
IdM in practice: before...
![Page 7: Apache Syncope 2.0 Enduser UI](https://reader035.vdocuments.mx/reader035/viewer/2022062302/58a247181a28ab7b3c8b7243/html5/thumbnails/7.jpg)
IdM in practice: ...after!
![Page 8: Apache Syncope 2.0 Enduser UI](https://reader035.vdocuments.mx/reader035/viewer/2022062302/58a247181a28ab7b3c8b7243/html5/thumbnails/8.jpg)
Apache Syncope● Inception by Tirasa in 2010● Entered ASF incubator in February 2012● Graduated as TLP in November 2012● Active community
○ 18 committers, 6 contributors
○ ~200 mailing list subscribers, stable traffic
○ 37 releases
![Page 9: Apache Syncope 2.0 Enduser UI](https://reader035.vdocuments.mx/reader035/viewer/2022062302/58a247181a28ab7b3c8b7243/html5/thumbnails/9.jpg)
Who is the end user
“Users whose identities are stored into Apache Syncope IdM, but that are not directly involved into other identities (administration) management flow. They interact with Apache Syncope IDM only to manage their own profile.
The set of the operations provided to end users can be addressed as self-management.”
![Page 10: Apache Syncope 2.0 Enduser UI](https://reader035.vdocuments.mx/reader035/viewer/2022062302/58a247181a28ab7b3c8b7243/html5/thumbnails/10.jpg)
➔ Intuitive and Easy-to-use admin console developedwith Apache Wicket.
➔ Complete frontend interface of all Apache Syncope features.
➔ Role-based access to the console features: user can access to console sections only if provided with determined entitlements associated to admin specified roles.
➔ Born mainly to manage identities from an admin POV.
Once upon a time the Console 1.X...
![Page 11: Apache Syncope 2.0 Enduser UI](https://reader035.vdocuments.mx/reader035/viewer/2022062302/58a247181a28ab7b3c8b7243/html5/thumbnails/11.jpg)
And “simple” end users?
![Page 12: Apache Syncope 2.0 Enduser UI](https://reader035.vdocuments.mx/reader035/viewer/2022062302/58a247181a28ab7b3c8b7243/html5/thumbnails/12.jpg)
Console 1.X for self-managementIntroduced since Apache Syncope 1.0.0
Self-management as integrating part of the Console.
Enabled/Disabled through Apache Syncope properties, accessible from the same Console.
★ Self-registration★ Self-update★ Password reset
![Page 13: Apache Syncope 2.0 Enduser UI](https://reader035.vdocuments.mx/reader035/viewer/2022062302/58a247181a28ab7b3c8b7243/html5/thumbnails/13.jpg)
Once upon a time the Enduser UI 1.X
![Page 14: Apache Syncope 2.0 Enduser UI](https://reader035.vdocuments.mx/reader035/viewer/2022062302/58a247181a28ab7b3c8b7243/html5/thumbnails/14.jpg)
Isn’t this enough?
![Page 15: Apache Syncope 2.0 Enduser UI](https://reader035.vdocuments.mx/reader035/viewer/2022062302/58a247181a28ab7b3c8b7243/html5/thumbnails/15.jpg)
The need for a more dedicated tool was raising➔ Need to have an application completely separated from the Console.➔ Self-management operations must be unrelated to the Core.➔ Enduser UI should be an highly customizable component, though you can
use it as-is.➔ You can provide it with Syncope or not (i.e enable or disable self-
management features).➔ Enduser UI should also provide a certain level of configurability (we will
clarify later...)
Yes but...
![Page 16: Apache Syncope 2.0 Enduser UI](https://reader035.vdocuments.mx/reader035/viewer/2022062302/58a247181a28ab7b3c8b7243/html5/thumbnails/16.jpg)
A client-side application very near to the end-user would bring (generally speaking) some not negligible advantages:
★ Parsed by the user’s browser.★ Reacts to user input.★ Can be seen and edited by the user in full.★ Cannot store anything that lasts beyond a page refresh (except cookies).★ Cannot read files off of a server directly, must communicate
via HTTP requests.
Why not a client-side JS application?
![Page 17: Apache Syncope 2.0 Enduser UI](https://reader035.vdocuments.mx/reader035/viewer/2022062302/58a247181a28ab7b3c8b7243/html5/thumbnails/17.jpg)
It would have guaranteed all requirements needed
High customizability
Decoupling of the self-management features from the Console and the Core.
Modularization of self-management features
Better fit to customers needs about frontend console appearance
From Apache Syncope architectural POV
![Page 18: Apache Syncope 2.0 Enduser UI](https://reader035.vdocuments.mx/reader035/viewer/2022062302/58a247181a28ab7b3c8b7243/html5/thumbnails/18.jpg)
Enduser console 2.0: how we thought it...
![Page 19: Apache Syncope 2.0 Enduser UI](https://reader035.vdocuments.mx/reader035/viewer/2022062302/58a247181a28ab7b3c8b7243/html5/thumbnails/19.jpg)
...how we made it
![Page 20: Apache Syncope 2.0 Enduser UI](https://reader035.vdocuments.mx/reader035/viewer/2022062302/58a247181a28ab7b3c8b7243/html5/thumbnails/20.jpg)
AngularJS Frontend
![Page 21: Apache Syncope 2.0 Enduser UI](https://reader035.vdocuments.mx/reader035/viewer/2022062302/58a247181a28ab7b3c8b7243/html5/thumbnails/21.jpg)
Development challenges
It was not sunshine and rainbows…
Integration AngularJS → Apache Wicket little exploredE2E testing integration with Maven lifecycleEndUser UI and Admin console: sometimes similar
requirements but distinct implementations because of different technologies
Client-side JS application security issues.
![Page 22: Apache Syncope 2.0 Enduser UI](https://reader035.vdocuments.mx/reader035/viewer/2022062302/58a247181a28ab7b3c8b7243/html5/thumbnails/22.jpg)
Main functional requirements...
➔ Login page simple and linear like admin Console one➔ Wizard-like form➔ Form validation with custom messages➔ Session and authentication management➔ Integration Tests suite, integrated into Maven lifecycle➔ User Self create/update➔ User Self password reset
![Page 23: Apache Syncope 2.0 Enduser UI](https://reader035.vdocuments.mx/reader035/viewer/2022062302/58a247181a28ab7b3c8b7243/html5/thumbnails/23.jpg)
…and not functional➔ Highly customizable interface➔ Easy to use➔ Enduser console should be a “proposal”, from which the
customer can start to develop his own UI➔ Should implement all the functionalities required to self-
management → not incomplete.➔ Follow admin console evolution and replicate some core
functionalities➔ Provide client-side application security features
![Page 24: Apache Syncope 2.0 Enduser UI](https://reader035.vdocuments.mx/reader035/viewer/2022062302/58a247181a28ab7b3c8b7243/html5/thumbnails/24.jpg)
Enduser UI innovations: Usage★ Interactive and intelligent breadcrumb★ Configurable wizard panels, possibility to
add/remove them★ Configurable validation★ Configurable Password strength validator★ Easy to configure i18n
“playgound zone” at syncope-vm.apache.org:9080/syncope-enduser
![Page 25: Apache Syncope 2.0 Enduser UI](https://reader035.vdocuments.mx/reader035/viewer/2022062302/58a247181a28ab7b3c8b7243/html5/thumbnails/25.jpg)
Enduser UI innovations: Security
★ Authentication delegated to Apache Syncope★ XSRF-token validation★ Captcha validation before submitting form★ Possibility to integrate with Google re-Captcha★ Possibility to enable/disable security features
![Page 26: Apache Syncope 2.0 Enduser UI](https://reader035.vdocuments.mx/reader035/viewer/2022062302/58a247181a28ab7b3c8b7243/html5/thumbnails/26.jpg)
Enduser UI innovations: Testing★ IT made with ProtractorJS★ Maven-driven build process★ Tests executed in a real browser, simulating user
interaction
→ ProtractorJS is and e2e testing framework for web-based application written in AngularJS
![Page 27: Apache Syncope 2.0 Enduser UI](https://reader035.vdocuments.mx/reader035/viewer/2022062302/58a247181a28ab7b3c8b7243/html5/thumbnails/27.jpg)
ProtractorJS workflow
![Page 28: Apache Syncope 2.0 Enduser UI](https://reader035.vdocuments.mx/reader035/viewer/2022062302/58a247181a28ab7b3c8b7243/html5/thumbnails/28.jpg)
Apache Maven to run them all!
![Page 29: Apache Syncope 2.0 Enduser UI](https://reader035.vdocuments.mx/reader035/viewer/2022062302/58a247181a28ab7b3c8b7243/html5/thumbnails/29.jpg)
And now, is it over?
![Page 30: Apache Syncope 2.0 Enduser UI](https://reader035.vdocuments.mx/reader035/viewer/2022062302/58a247181a28ab7b3c8b7243/html5/thumbnails/30.jpg)
Enduser UI will follow Apache Syncope evolution, they are indissolubly related, but (at the same time) it will ever follow a parallel flow.
➔ Social registration (Google, Facebook, LinkedIn)➔ Deploy on lightweight containers (Payara) VS full JS backend➔ AngularJS 2.0 support➔ Google re-Captcha easy enabling➔ HTML templating → custom themes
Join the discussion! https://s.apache.org/syncopeEnduserDiscuss
Enduser UI future perspectives
![Page 31: Apache Syncope 2.0 Enduser UI](https://reader035.vdocuments.mx/reader035/viewer/2022062302/58a247181a28ab7b3c8b7243/html5/thumbnails/31.jpg)
Questions?