of 33 /33
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

Building a Secure App with Google Polymer and Java / Spring

  • Author
    sdeeg

  • View
    1.346

  • Download
    1

Embed Size (px)

Text of Building a Secure App with Google Polymer and Java / Spring

Page 1: Building a Secure App with Google Polymer and Java / Spring

1 Unless otherwise indicated, these sl ides are © 2013-2014 Pivotal Software, Inc. and l icensed under a Creative Commons Attr ibution-NonCommercial l icense: http://creativecommons.org/l icenses/by-nc/3.0/ Unless otherwise indicated, these sl ides are © 2013-2014 Pivotal Software, Inc. and l icensed under a

Creative Commons Attr ibution-NonCommercial l icense: http://creativecommons.org/l icenses/by-nc/3.0/

Writing a Secure App with Google Polymer Frontend and Java / Spring “Micro-Service” Backend

Scott Deeg, Sr. Field Engineer, Pivotal

Page 2: Building a Secure App with Google Polymer and Java / Spring

2 Unless otherwise indicated, these sl ides are © 2013-2014 Pivotal Software, Inc. and l icensed under a Creative Commons Attr ibution-NonCommercial l icense: http://creativecommons.org/l icenses/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

Page 3: Building a Secure App with Google Polymer and Java / Spring

3 Unless otherwise indicated, these sl ides are © 2013-2014 Pivotal Software, Inc. and l icensed under a Creative Commons Attr ibution-NonCommercial l icense: http://creativecommons.org/l icenses/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

Page 4: Building a Secure App with Google Polymer and Java / Spring

4 Unless otherwise indicated, these sl ides are © 2013-2014 Pivotal Software, Inc. and l icensed under a Creative Commons Attr ibution-NonCommercial l icense: http://creativecommons.org/l icenses/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”

Page 5: Building a Secure App with Google Polymer and Java / Spring

5 Unless otherwise indicated, these sl ides are © 2013-2014 Pivotal Software, Inc. and l icensed under a Creative Commons Attr ibution-NonCommercial l icense: http://creativecommons.org/l icenses/by-nc/3.0/

Rivals MCP

Page 6: Building a Secure App with Google Polymer and Java / Spring

6 Unless otherwise indicated, these sl ides are © 2013-2014 Pivotal Software, Inc. and l icensed under a Creative Commons Attr ibution-NonCommercial l icense: http://creativecommons.org/l icenses/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…

Page 7: Building a Secure App with Google Polymer and Java / Spring

7 Unless otherwise indicated, these sl ides are © 2013-2014 Pivotal Software, Inc. and l icensed under a Creative Commons Attr ibution-NonCommercial l icense: http://creativecommons.org/l icenses/by-nc/3.0/

Polymer/Spring Demo App: Simple

UI

(http)

Resource

(ReST)

Client

(Polymer)

Page 8: Building a Secure App with Google Polymer and Java / Spring

8 Unless otherwise indicated, these sl ides are © 2013-2014 Pivotal Software, Inc. and l icensed under a Creative Commons Attr ibution-NonCommercial l icense: http://creativecommons.org/l icenses/by-nc/3.0/

What Is Polymer?

Page 9: Building a Secure App with Google Polymer and Java / Spring

9 Unless otherwise indicated, these sl ides are © 2013-2014 Pivotal Software, Inc. and l icensed under a Creative Commons Attr ibution-NonCommercial l icense: http://creativecommons.org/l icenses/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

Page 10: Building a Secure App with Google Polymer and Java / Spring

10 Unless otherwise indicated, these sl ides are © 2013-2014 Pivotal Software, Inc. and l icensed under a Creative Commons Attr ibution-NonCommercial l icense: http://creativecommons.org/l icenses/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.)

Page 11: Building a Secure App with Google Polymer and Java / Spring

11 Unless otherwise indicated, these sl ides are © 2013-2014 Pivotal Software, Inc. and l icensed under a Creative Commons Attr ibution-NonCommercial l icense: http://creativecommons.org/l icenses/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

Page 12: Building a Secure App with Google Polymer and Java / Spring

12 Unless otherwise indicated, these sl ides are © 2013-2014 Pivotal Software, Inc. and l icensed under a Creative Commons Attr ibution-NonCommercial l icense: http://creativecommons.org/l icenses/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

Page 13: Building a Secure App with Google Polymer and Java / Spring

13 Unless otherwise indicated, these sl ides are © 2013-2014 Pivotal Software, Inc. and l icensed under a Creative Commons Attr ibution-NonCommercial l icense: http://creativecommons.org/l icenses/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

Page 14: Building a Secure App with Google Polymer and Java / Spring

14 Unless otherwise indicated, these sl ides are © 2013-2014 Pivotal Software, Inc. and l icensed under a Creative Commons Attr ibution-NonCommercial l icense: http://creativecommons.org/l icenses/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”

Page 15: Building a Secure App with Google Polymer and Java / Spring

15 Unless otherwise indicated, these sl ides are © 2013-2014 Pivotal Software, Inc. and l icensed under a Creative Commons Attr ibution-NonCommercial l icense: http://creativecommons.org/l icenses/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

Page 16: Building a Secure App with Google Polymer and Java / Spring

16 Unless otherwise indicated, these sl ides are © 2013-2014 Pivotal Software, Inc. and l icensed under a Creative Commons Attr ibution-NonCommercial l icense: http://creativecommons.org/l icenses/by-nc/3.0/

Demo 1

§  Create app •  Project •  Index.html

§  Add UI • Greeting element

•  Add polymer •  Create component •  Add data

•  Layout

•  Styles

Page 17: Building a Secure App with Google Polymer and Java / Spring

17 Unless otherwise indicated, these sl ides are © 2013-2014 Pivotal Software, Inc. and l icensed under a Creative Commons Attr ibution-NonCommercial l icense: http://creativecommons.org/l icenses/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/

Page 18: Building a Secure App with Google Polymer and Java / Spring

18 Unless otherwise indicated, these sl ides are © 2013-2014 Pivotal Software, Inc. and l icensed under a Creative Commons Attr ibution-NonCommercial l icense: http://creativecommons.org/l icenses/by-nc/3.0/

Backend Services Creating / Consuming ReSTful data

Page 19: Building a Secure App with Google Polymer and Java / Spring

19 Unless otherwise indicated, these sl ides are © 2013-2014 Pivotal Software, Inc. and l icensed under a Creative Commons Attr ibution-NonCommercial l icense: http://creativecommons.org/l icenses/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

Page 20: Building a Secure App with Google Polymer and Java / Spring

20 Unless otherwise indicated, these sl ides are © 2013-2014 Pivotal Software, Inc. and l icensed under a Creative Commons Attr ibution-NonCommercial l icense: http://creativecommons.org/l icenses/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

Page 21: Building a Secure App with Google Polymer and Java / Spring

21 Unless otherwise indicated, these sl ides are © 2013-2014 Pivotal Software, Inc. and l icensed under a Creative Commons Attr ibution-NonCommercial l icense: http://creativecommons.org/l icenses/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

Page 22: Building a Secure App with Google Polymer and Java / Spring

22 Unless otherwise indicated, these sl ides are © 2013-2014 Pivotal Software, Inc. and l icensed under a Creative Commons Attr ibution-NonCommercial l icense: http://creativecommons.org/l icenses/by-nc/3.0/

Adding Security Spring Session and OAuth2

Page 23: Building a Secure App with Google Polymer and Java / Spring

23 Unless otherwise indicated, these sl ides are © 2013-2014 Pivotal Software, Inc. and l icensed under a Creative Commons Attr ibution-NonCommercial l icense: http://creativecommons.org/l icenses/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

Page 24: Building a Secure App with Google Polymer and Java / Spring

24 Unless otherwise indicated, these sl ides are © 2013-2014 Pivotal Software, Inc. and l icensed under a Creative Commons Attr ibution-NonCommercial l icense: http://creativecommons.org/l icenses/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

Page 25: Building a Secure App with Google Polymer and Java / Spring

25 Unless otherwise indicated, these sl ides are © 2013-2014 Pivotal Software, Inc. and l icensed under a Creative Commons Attr ibution-NonCommercial l icense: http://creativecommons.org/l icenses/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

Page 26: Building a Secure App with Google Polymer and Java / Spring

26 Unless otherwise indicated, these sl ides are © 2013-2014 Pivotal Software, Inc. and l icensed under a Creative Commons Attr ibution-NonCommercial l icense: http://creativecommons.org/l icenses/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

Page 27: Building a Secure App with Google Polymer and Java / Spring

27 Unless otherwise indicated, these sl ides are © 2013-2014 Pivotal Software, Inc. and l icensed under a Creative Commons Attr ibution-NonCommercial l icense: http://creativecommons.org/l icenses/by-nc/3.0/

This And That

Page 28: Building a Secure App with Google Polymer and Java / Spring

28 Unless otherwise indicated, these sl ides are © 2013-2014 Pivotal Software, Inc. and l icensed under a Creative Commons Attr ibution-NonCommercial l icense: http://creativecommons.org/l icenses/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.

Page 29: Building a Secure App with Google Polymer and Java / Spring

29 Unless otherwise indicated, these sl ides are © 2013-2014 Pivotal Software, Inc. and l icensed under a Creative Commons Attr ibution-NonCommercial l icense: http://creativecommons.org/l icenses/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

Page 30: Building a Secure App with Google Polymer and Java / Spring

30 Unless otherwise indicated, these sl ides are © 2013-2014 Pivotal Software, Inc. and l icensed under a Creative Commons Attr ibution-NonCommercial l icense: http://creativecommons.org/l icenses/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

Page 31: Building a Secure App with Google Polymer and Java / Spring

31 Unless otherwise indicated, these sl ides are © 2013-2014 Pivotal Software, Inc. and l icensed under a Creative Commons Attr ibution-NonCommercial l icense: http://creativecommons.org/l icenses/by-nc/3.0/ Unless otherwise indicated, these sl ides are © 2013-2014 Pivotal Software, Inc. and l icensed under a

Creative Commons Attr ibution-NonCommercial l icense: http://creativecommons.org/l icenses/by-nc/3.0/

Thanks!

Page 32: Building a Secure App with Google Polymer and Java / Spring

32 Unless otherwise indicated, these sl ides are © 2013-2014 Pivotal Software, Inc. and l icensed under a Creative Commons Attr ibution-NonCommercial l icense: http://creativecommons.org/l icenses/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.

Page 33: Building a Secure App with Google Polymer and Java / Spring

33 Unless otherwise indicated, these sl ides are © 2013-2014 Pivotal Software, Inc. and l icensed under a Creative Commons Attr ibution-NonCommercial l icense: http://creativecommons.org/l icenses/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.