Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Building a Secure App with Google Polymer and Java / Spring

13,279 views

Published on

Polymer is the latest web framework out of Google. Designed completely around the emerging Web Components standards, it has the lofty goal of making it easy to build apps based on these low level primitives. Along with Polymer comes a new set of Elements (buttons, dialog boxes and such) based on the ideas of "Material Design". These technologies together make it easy to build responsive, componentized "Single Page" web applications that work for browsers on PCs or mobile devices. But what about the backend, and how do we make these apps secure? In this talk Scott Deeg will take you through an introduction to Polmyer and its related technologies, and then through the build out of a full blown cloud based app with a secure, ReSTful backend based on Spring ReST, Spring Cloud, and Spring Security and using Thymeleaf for backend rendering jobs. At the end he will show the principles applied in a tool he's currently building. The talk will be mainly code walk through and demo, and assumes familiarity with Java/Spring and JavaScript.

Published in: Software
  • Be the first to comment

Building a Secure App with Google Polymer and Java / Spring

  1. 1. 1 Unless otherwise indicated, these slides are © 2013-2014 Pivotal Software, Inc. and licensed under a Creative Commons Attribution-NonCommercial license: http://creativecommons.org/licenses/by-nc/3.0/Unless otherwise indicated, these slides are © 2013-2014 Pivotal Software, Inc. and licensed under a Creative Commons Attribution-NonCommercial license: http://creativecommons.org/licenses/by-nc/3.0/ Writing a Secure App with Google Polymer Frontend and Java / Spring “Micro-Service” Backend Scott Deeg, Sr. Field Engineer, Pivotal
  2. 2. 2 Unless otherwise indicated, these slides are © 2013-2014 Pivotal Software, Inc. and licensed under a Creative Commons Attribution-NonCommercial license: http://creativecommons.org/licenses/by-nc/3.0/ What we’re talking about §  Agenda, It’s all about Me!, Introduction §  Google Polymer and WebComponents §  General backend: UI delivery and “Micro-Services” §  Security (HTTP, Session … maybe a little OAuth) §  Demo, demo, demo §  Q/A
  3. 3. 3 Unless otherwise indicated, these slides are © 2013-2014 Pivotal Software, Inc. and licensed under a Creative Commons Attribution-NonCommercial license: http://creativecommons.org/licenses/by-nc/3.0/ Who Am I? Plain Old Java Geek (POJG) §  Java since 1996, Symantec Visual Café 1.0 §  Professional Services Consultant §  Hacker on Java based BPM product for 10 years §  Joined VMW 2009, Rolled into Pivotal 2013 §  Livin’ life in the enterprise
  4. 4. 4 Unless otherwise indicated, these slides are © 2013-2014 Pivotal Software, Inc. and licensed under a Creative Commons Attribution-NonCommercial license: http://creativecommons.org/licenses/by-nc/3.0/ Why Am I Talking About This? §  Started with a tool I was writing §  I needed a UI •  Initially Angular •  Discussions of Polymer (others) suggested other paths §  I needed some security •  Running it on Pivotal WebServices (public cloud) §  Saw Dave’s series •  Decided to take the “Dave Syer Challenge”
  5. 5. 5 Unless otherwise indicated, these slides are © 2013-2014 Pivotal Software, Inc. and licensed under a Creative Commons Attribution-NonCommercial license: http://creativecommons.org/licenses/by-nc/3.0/ Rivals MCP
  6. 6. 6 Unless otherwise indicated, these slides are © 2013-2014 Pivotal Software, Inc. and licensed under a Creative Commons Attribution-NonCommercial license: http://creativecommons.org/licenses/by-nc/3.0/ What are we building? §  An application with the components and architecture of todays “modern app” §  UI is Single Page Application (SPA) built with Polymer •  JavaScript in the browser making AJAX calls §  Micro-Services Backend in Java/Spring •  Boot •  Web/Rest •  Security •  Others…
  7. 7. 7 Unless otherwise indicated, these slides are © 2013-2014 Pivotal Software, Inc. and licensed under a Creative Commons Attribution-NonCommercial license: http://creativecommons.org/licenses/by-nc/3.0/ Polymer/Spring Demo App: Simple UI (http) Resource (ReST) Client (Polymer)
  8. 8. 8 Unless otherwise indicated, these slides are © 2013-2014 Pivotal Software, Inc. and licensed under a Creative Commons Attribution-NonCommercial license: http://creativecommons.org/licenses/by-nc/3.0/ What Is Polymer?
  9. 9. 9 Unless otherwise indicated, these slides are © 2013-2014 Pivotal Software, Inc. and licensed under a Creative Commons Attribution-NonCommercial license: http://creativecommons.org/licenses/by-nc/3.0/ Quote Slide “The Polymer core provides a thin layer of API on top of web components. It expresses Polymer’s opinion, provides the extra sugaring that all Polymer elements use, and is meant to help make developing web components much easier. Philosophy: Everything is an Element! Polymer-Project website
  10. 10. 10 Unless otherwise indicated, these slides are © 2013-2014 Pivotal Software, Inc. and licensed under a Creative Commons Attribution-NonCommercial license: http://creativecommons.org/licenses/by-nc/3.0/ WebComponents are … §  A set of w3c standards •  Custom components •  Shadow DOM •  Templates •  Html imports §  “Polyfill” exists to address browsers that don’t support it the standards •  Google donated webcomponents.js to WebComponents.org •  Chrome already has full support (Polyfill = library that implements features in a browser that will be supported natively in the future.)
  11. 11. 11 Unless otherwise indicated, these slides are © 2013-2014 Pivotal Software, Inc. and licensed under a Creative Commons Attribution-NonCommercial license: http://creativecommons.org/licenses/by-nc/3.0/ Custom Elements §  Mechanism to define your own html element •  <my-cool-element foo=‘bar’></my-cool-element> §  Goals •  Reduce the amount of code you have to write. •  Express the function of the code. •  Encapsulate internal details. •  Implement APIs per element type. •  Increase productivity by letting you reuse elements. •  Use inheritance to create element tags based on other tags https://www.polymer-project.org/0.5/platform/custom-elements.html
  12. 12. 12 Unless otherwise indicated, these slides are © 2013-2014 Pivotal Software, Inc. and licensed under a Creative Commons Attribution-NonCommercial license: http://creativecommons.org/licenses/by-nc/3.0/ WebComponents cont. §  Shadow DOM •  Enables isolation of an object sub-tree •  Main DOM tree does not see the children of the sub-tree §  Templates •  Declare fragments of HTML that can be cloned and inserted in the document by script. §  HTML import •  Allows a page to include the content of another by reference
  13. 13. 13 Unless otherwise indicated, these slides are © 2013-2014 Pivotal Software, Inc. and licensed under a Creative Commons Attribution-NonCommercial license: http://creativecommons.org/licenses/by-nc/3.0/ Polymer Sugar §  Frameworks sit on top of standards, and makes them consumable §  Create elements declaratively •  Templates define an elements shadow DOM §  2 way data binding §  Events •  Capture standard events •  Fire custom events this.fire(‘event-name’, detail) §  Property Observation •  Property foo will trigger fooChanged() handler if it exists §  Inheritance
  14. 14. 14 Unless otherwise indicated, these slides are © 2013-2014 Pivotal Software, Inc. and licensed under a Creative Commons Attribution-NonCommercial license: http://creativecommons.org/licenses/by-nc/3.0/ Polymer’s Set of Elements §  Core •  General set of UI and non-UI elements •  Extends set of standard elements (buttons, lists, etc.) §  Paper •  Based on Google’s idea of “Material Design”
  15. 15. 15 Unless otherwise indicated, these slides are © 2013-2014 Pivotal Software, Inc. and licensed under a Creative Commons Attribution-NonCommercial license: http://creativecommons.org/licenses/by-nc/3.0/ A bit on data binding §  Polymer separates the UI (DOM) from the data (model) §  The data model is bound to the element §  The template •  Maintains a single copy of the contents •  Has 2 way bindings with the DOM •  When you update the model the DOM changes •  When you update the DOM the model changes
  16. 16. 16 Unless otherwise indicated, these slides are © 2013-2014 Pivotal Software, Inc. and licensed under a Creative Commons Attribution-NonCommercial license: http://creativecommons.org/licenses/by-nc/3.0/ Demo 1 §  Create app •  Project •  Index.html §  Add UI •  Greeting element •  Add polymer •  Create component •  Add data •  Layout •  Styles
  17. 17. 17 Unless otherwise indicated, these slides are © 2013-2014 Pivotal Software, Inc. and licensed under a Creative Commons Attribution-NonCommercial license: http://creativecommons.org/licenses/by-nc/3.0/ WebComponents: Best Practices 1.  Use a dash in an elements name. EG: app-pages 2.  Follow existing patterns (mimic other elements) 3.  Fail silently (like other DOM components) 4.  Use attributes to pass data in 5.  Use events to pass data out 6.  Include dependencies 7.  Document your component 8.  Don’t put too much in shadow DOM 9.  Don’t create more custom elements than you need 10.  Harmonize declarative/imperative APIs 11.  Don’t assume the context the component will operate in http://webcomponents.org/articles/web-components-best-practices/
  18. 18. 18 Unless otherwise indicated, these slides are © 2013-2014 Pivotal Software, Inc. and licensed under a Creative Commons Attribution-NonCommercial license: http://creativecommons.org/licenses/by-nc/3.0/ Backend Services Creating / Consuming ReSTful data
  19. 19. 19 Unless otherwise indicated, these slides are © 2013-2014 Pivotal Software, Inc. and licensed under a Creative Commons Attribution-NonCommercial license: http://creativecommons.org/licenses/by-nc/3.0/ Spring for the Backend §  We need a backend service to deliver data to our app §  Spring uses a Controller to create a “ReSTful” endpoint §  Simply add the controller annotation to our Boot app and define the end point
  20. 20. 20 Unless otherwise indicated, these slides are © 2013-2014 Pivotal Software, Inc. and licensed under a Creative Commons Attribution-NonCommercial license: http://creativecommons.org/licenses/by-nc/3.0/ On the front end §  We’ll use the core-ajax non-UI element to define a service §  Data binding will automatically update the DOM
  21. 21. 21 Unless otherwise indicated, these slides are © 2013-2014 Pivotal Software, Inc. and licensed under a Creative Commons Attribution-NonCommercial license: http://creativecommons.org/licenses/by-nc/3.0/ Demo 2 §  Add ReSTful resource to the app §  Create an instance of core-ajax §  Use the ready life cycle event to load it §  Add a button to refresh it §  Add paper §  Add toast and error handler for ajax call •  Test with button
  22. 22. 22 Unless otherwise indicated, these slides are © 2013-2014 Pivotal Software, Inc. and licensed under a Creative Commons Attribution-NonCommercial license: http://creativecommons.org/licenses/by-nc/3.0/ Adding Security Spring Session and OAuth2
  23. 23. 23 Unless otherwise indicated, these slides are © 2013-2014 Pivotal Software, Inc. and licensed under a Creative Commons Attribution-NonCommercial license: http://creativecommons.org/licenses/by-nc/3.0/ Lets add Security §  Security is a very complex topic •  For the basics, just want user/password protection §  Common Options •  HTTP •  Spring Session •  OAuth2
  24. 24. 24 Unless otherwise indicated, these slides are © 2013-2014 Pivotal Software, Inc. and licensed under a Creative Commons Attribution-NonCommercial license: http://creativecommons.org/licenses/by-nc/3.0/ Demo 3 §  Add HTTP security to the app §  Template and pages •  More data binding §  Use the login/out control §  Use life cycle and component events
  25. 25. 25 Unless otherwise indicated, these slides are © 2013-2014 Pivotal Software, Inc. and licensed under a Creative Commons Attribution-NonCommercial license: http://creativecommons.org/licenses/by-nc/3.0/ Polymer/Spring Demo App: Spring Session UI (Zuul Proxy) Resource (ReST)Client (Polymer) Session Store (Redis) Request protected by Spring Security Authorized path using Zuul Service Proxy
  26. 26. 26 Unless otherwise indicated, these slides are © 2013-2014 Pivotal Software, Inc. and licensed under a Creative Commons Attribution-NonCommercial license: http://creativecommons.org/licenses/by-nc/3.0/ Demo 4 §  General app structure §  How is the resource secured §  How is the UI server secured §  How is the proxy turned on §  Extended UI •  Core-scaffold •  Data binding •  JS setup §  CSRF and Auth token
  27. 27. 27 Unless otherwise indicated, these slides are © 2013-2014 Pivotal Software, Inc. and licensed under a Creative Commons Attribution-NonCommercial license: http://creativecommons.org/licenses/by-nc/3.0/ This And That
  28. 28. 28 Unless otherwise indicated, these slides are © 2013-2014 Pivotal Software, Inc. and licensed under a Creative Commons Attribution-NonCommercial license: http://creativecommons.org/licenses/by-nc/3.0/ Net Results §  Overall very positive experience §  I like the focus on components §  Polymer made using WebComponents easy •  Room for additional functionality •  Easy to extend with new components §  Easy to use with Spring backend §  Some funkyness •  EG: setting style for primary visual elements in core-scaffold.
  29. 29. 29 Unless otherwise indicated, these slides are © 2013-2014 Pivotal Software, Inc. and licensed under a Creative Commons Attribution-NonCommercial license: http://creativecommons.org/licenses/by-nc/3.0/ How Real is Polymer? §  Haven’t we seen this picture before? •  Do we trust the G-Man again? GWT anyone? §  There are many indicators that Polymer is heading to success •  Production track •  Use by other teams (eg: YouTube (according to Polymer guys)) §  Can still make use of additional frameworks and element sets §  Guaranteed to evolve into something else quickly •  It is Google after all J
  30. 30. 30 Unless otherwise indicated, these slides are © 2013-2014 Pivotal Software, Inc. and licensed under a Creative Commons Attribution-NonCommercial license: http://creativecommons.org/licenses/by-nc/3.0/ Where to go from here … §  Polymer website: http://polymer-project.org §  WebComponents: http://webcomponents.org/ §  All things Spring: http://spring.io §  Demo code: •  https://github.com/sdeeg-pivotal/spring-polymer-demo §  Dave Syer’s series: •  https://spring.io/blog/2015/01/12/spring-and-angular-js-a-secure-single-page-application
  31. 31. 31 Unless otherwise indicated, these slides are © 2013-2014 Pivotal Software, Inc. and licensed under a Creative Commons Attribution-NonCommercial license: http://creativecommons.org/licenses/by-nc/3.0/Unless otherwise indicated, these slides are © 2013-2014 Pivotal Software, Inc. and licensed under a Creative Commons Attribution-NonCommercial license: http://creativecommons.org/licenses/by-nc/3.0/ Thanks!
  32. 32. 32 Unless otherwise indicated, these slides are © 2013-2014 Pivotal Software, Inc. and licensed under a Creative Commons Attribution-NonCommercial license: http://creativecommons.org/licenses/by-nc/3.0/ Abstract Polymer is the latest web framework out of Google. Designed completely around the emerging Web Components standards, it has the lofty goal of making it easy to build apps based on these low level primitives. Along with Polymer comes a new set of Elements (buttons, dialog boxes and such) based on the ideas of "Material Design". These technologies together make it easy to build responsive, componentized "Single Page" web applications that work for browsers on PCs or mobile devices. But what about the backend, and how do we make these apps secure? In this talk Scott Deeg will take you through an introduction to Polmyer and its related technologies, and then through the build out of a full blown cloud based app with a secure, ReSTful backend based on Spring ReST, Spring Cloud, and Spring Security and using Thymeleaf for backend rendering jobs. At the end he will show the principles applied in a tool he's currently building. The talk will be mainly code walk through and demo, and assumes familiarity with Java/Spring and JavaScript.
  33. 33. 33 Unless otherwise indicated, these slides are © 2013-2014 Pivotal Software, Inc. and licensed under a Creative Commons Attribution-NonCommercial license: http://creativecommons.org/licenses/by-nc/3.0/ Bio Calling himself just a Plain Old Java Geek (POJG), Scott Deeg began his journey with Java in 1996 as a member of the Visual Café team at Symantec. From there he worked primarily as a consultant and solution architect in the world of enterprise Java applications. Now a part of Pivotal, he continues to work with large enterprises on their application platform and data needs. A big fan of open source software and technology, he tries to occasionally get out of the corporate world to talk about interesting things happening in the Java/ OSS community, and has delivered technical talks at Pivotal OSS meetups, Silicone Valley Code Camp, SVForum, and SpringOne.

×