 Welcome everybody. Good afternoon. My name is Micah Silverman. I am a senior security hacksore ad octa and that is my official title. I like to start off with a QR code here in the bottom that will bring you to a github repository that has this deck as well as a number of other references to github projects that we're going to be talking about. So feel free to grab that QR code. I also have the same QR code on the next slide and I'll have it on the very end as well. So don't feel like you need to take pictures of the slides although you're more than welcome to do so. Just a little bit about me. I contribute to a number of open source projects including the JJWT. These are projects that I'm very proud of and I'm primarily a developer. I also contribute to octa's blog and I did a three part OIDC primer which I have the the bit.ly link for right there and as well I got to co-author a book called Mastering Enterprise Java Beams 3.0 just in time for that technology to be kind of irrelevant. All right now I'm going to move on to the next slide. If you didn't get the QR code don't worry about it. I will have it again at the end. A little more about my developer background. I started writing code back in 1980. So first of all I want to invite you to get off my lawn. I was 12 years old. I was in sixth grade and I was playing with basic on a pet computer and I wrote some games. I had a Vic 20 then I got a Commodore 64 and I did basic for quite a while until I got to college and in college my computer science program had at its language as its language of choice at the beginning Pascal if you can believe that and I can honestly say that I have never done production Pascal for anything it was only in college and fortunately soon after I started college we switched our program over to C which was much more useful and usable in the real world at least in my experience. In the 90s I picked up Pearl Pearl and Bash were my first CGI common gateway interface programs for the first websites that I launched around 1995 I helped launch the sci-fi channel's very first website and then in 1995 25 years ago Java was released and I was hooked right away I started going to some user groups that Sun put together at the time I started learning Java I even got Sun's Java programmer certification in 1998 and then after that I learned some JavaScript and then came the framework servlet no JS spring spring boot view JS I had a year of Ruby in there I worked for a company that had Ruby and I learned Ruby just to be able to work at this company I got the job and then they immediately switched over to no JS a couple of months after I joined so I had a very short run with Ruby but no JS spring spring boot have really been my main squeezes JavaScript in the browser jQuery and other such things and then along came view JS at least for me view JS was around for a while before I got into it about three years ago or so I started getting into view JS I started learning and I'm going to be talking to you today about some of those learnings but I do want to say that view JS is my newest framework so our agenda we're going start with spring boot we're going to layer in our first pass at view JS we're going to switch over to J hipster with view JS and J hipster using a progress API we'll be talking about that we'll write some view JS components we'll upgrade our security and then we'll wrap things up we have a nice tech stack here we have no JS and Java spring boot and view J hipster Docker and heroku we'll be using Docker to talk to or to set up key cloak as an initial security service for our J hipster app and we'll then switch over to octa and we'll get set up really quick with octa by using the octa heroku add-on which if anybody's interested I wrote I authored that and it's in beta right now we're looking for more beta testers so you'll see at the end and if you're interested maybe you can become one of our beta testers let's start with spring boot we're going to create a super simple API and we're going to build on that as we go the idea is it's a progress API like like you might use for a progress meter and it's very simple code it's kind of emulating a progress API so let's take a look at that first and what we're going to do here is use the spring initializer if you're not familiar with it you can go to start.spring.io it has a very nice web interface you can pick the different components of spring and spring boot and spring security that you want you can also interact with it on the command line using curl which is what I'm going to do here and we have very simple dependencies we have the web dependency so at this point we're not layering in any security I've given it a name called the progress API I've given it a basic package name it's going to be a maven project and it's using the latest version of spring boot so this grabs a tar ball I'm going to unzip that tar ball and within that tar ball it has everything that we need for a very basic project now over here in IntelliJ I'm going to open up that project and I have I have these live and preset folders just in the interest of time and making sure that we're not too reliant on the internet I have the preset folders all set up with these projects ready to go so I'm going to open up the POM as a project and in here we have a very basic spring boot application it's ready to go and I'm going to add a little something to it I'm just going to add a controller method that I'm going to call boot progress there we go and what I did is I just used a very as an aside here I used a very handy feature of IntelliJ called live templates and so I preset a bunch of these just so that you wouldn't have to watch me live type because that would be bad for everybody so let's talk about our little API here it's very straightforward it listens on slash api slash progress it returns a map of string object which is our kind of kind of keyword to clue us in that this is going to be a JSON response it accepts an optional parameter called percent so that is we're going to pass in optionally a percent value of how far the meter has progressed and then what we return a very simple singleton to map with a key of progress and then a value and the value is going to end up being five more than whatever we passed in or zero if we didn't pass anything in at all and it does a little bit of math trickery an optional trickery here so it's using optional the or else so if the optional is if there was no parameter passed in we're going to set the value to negative five and then we're going to add five to it just so that we can make it zero but if there was a percent passed in a value then that we're going to add five to that and return that as the result so let's see this in action i'm going to fire up the spring boot application this just takes a moment it's listening on port 8080 and now i'm using a command line tool called htd pi it's just a modern replacement for curl and i'm going to hit that progress endpoint uh let's see what it's complaining about oh yes i forgot one thing and that is we need to let spring boot be aware that i'm using this as a rest controller so that annotation will have spring boot react to incoming requests on that get mapping endpoint let me try that again there we go so with no parameter we get we get progress zero which is what we see here and now if i give it a parameter of percent let's say 20 percent i would expect that it's going to return progress 25 so it advances it by five percent whatever we pass in all right we're off to a good start here this is a very simple api in real life we would have a controller uh package and we'd have a separate controller class but we're keeping things nice and simple here next up we're going to take a first pass at view j s and to do that we're going to use the view cli and beforehand i did these two install commands view cli and view cli service and what we're going to do is we're going to create a project with tights type script and then we're going to install bootstrap view and axios bootstrap view is a view j s uh enabled version of bootstrap bootstrap is um used for uh for for for uh back end dwellers like myself it makes it really easy to set up a passable looking front end not a great front end um although i do have a few things in production if you if you used um if you did the developer challenge here first of all i want to encourage you to go over to the octabooth and do the developer challenge if you haven't already but that is a bootstrap view front end and then we're using axios kind of the defacto uh library for uh making making htdp calls from a view j s app all right so from here i'm going to do um view create progress front end and now we can take some defaults or we can manually select some features i'm going to manually select some features because i want this to be type script one reason is that type script gives us strongly typed java script which is pretty cool and also when we switch over to j hipster a little later on j hipster only has type script as its uh as its language so um this way everything will be consistent so after i do that i'm going to accept all the other defaults it's all about linting and where we're going to save configs now again this is going to take a little bit to load so i'm going to jump back over to intellig and i'm going to open up my preset folder here and i have a progress front end all set up and it turns out that intellig is actually a really nice environment for view j s and and type script all right so now let's just make sure that our basic view j s app is running and so i'm going to type npm run serve npm run serve that's going to launch our view j s app and i'm using a terminal right in in intellig which is super nice it's just going to take a moment to do webpack and now it's automatically listening on port 8081 because our java script api is listening on port 8080 so here is our basic view j s minimal app with uh type script so it recognizes that we're using type script all right so far so good let's keep going next we're going to have view j s make an api call we're going to use axios for this and axios uses promises which is a really great way to interact with async external services so axios is going to make a call and immediately return a promise and then when that promise resolves that is when the when the external http call finishes then we can have a function to handle the response from that and we'll see in a little bit that we're going to need to deal with cores as well that's cross origin resource sharing but let's keep things simple the first thing i'm going to do is jump over into our app dot vu e app dot view that's the main uh view here and what we have is a template that is bound to an object of the same name this is our type script object and i have some um some shortcuts here this again is a is a live template and it's complaining about axios because i haven't imported axios so let me do that import axios from axios there we go and now what we're doing here is we're calling our progress endpoint and we're passing in percent uh value of 10 when that api call resolves our then handler is going to take that response and we're going to log out the data that comes back as part of that response mounted is a standard function in view j s and what it's saying is that when this component is ready to go it's going to execute the mounted function once uh let's see it's complaining about our node path here bear with me one second i'm going to fix that maybe that's okay so let's go back and open up our console and we have good news and bad news the good news is that it is attempting to make the api call the bad news is that that api call is not successful the browser intervenes because it's blocked by cores cross origin resource sharing now if you're not familiar with cross origin resource sharing it's basically a system that makes it so that java script can connect to outside URLs to outside domains without permission so the browser intervenes when it when it receives the request to go to local host 8080 slash api progress the browser intervenes and makes what's called a pre-flight check if we look in the network we can see where is that pre-flight check that is not it all right maybe we don't see the pre oh here it is so it makes a pre-flight check and we have no control over that the browser intervenes on our behalf and it's waiting for the service in this case our spring boot app to say that this app is allowed to make a cross site request for it now we haven't configured our spring boot app for cores and so our spring boot app is saying is not responding to the pre-flight check and therefore the browser isn't allowing this to happen so uh this is a security feature of all modern browsers to make sure that you don't have rogue java script running on your page that's just trying to do malicious uh network calls to external sites now the good news is that it's super easy to uh to fix this situation and to do that i have a another shortcut here that i call bootstrap cores and what we're doing here is we're using spring boots configuration system we have an environment variable called allowed origins and that's going to resolve that's going to uh work with dependency injection that's going to resolve to be a string array and then down here we're hooking into this cores configuror bean and we have this cores registry and basically what we're saying is that we're going to add a mapping for this path so this is the universal root path and we're going to give it this list of allowed origins so that our spring boot app will now properly respond when that browser does the pre-flight check now i'm going to edit the configuration here and uh spring boot gives you a number of different ways to handle configuration one way is through application dot yaml another way is through environment variables and environment variables are super handy when you're deploying to remote services like heroku we can we can set these environment variables in heroku and not have to have them hard coded into files within our application so we want to make sure that the local host 8081 is an allowed origin and so now that i have that together we'll let this fire up one more time now i can go back to my browser and refresh it and now this time i get back a response of progress 15 so now at this point we've successfully made an api call from our view js app to our to our spring boot backend and and gotten a successful response because we've dealt with cores but this is kind of boring we want to we want to make the goal here is to make a progress meter that we can you interact with the api to advance that progress meter so the next thing that we're the next thing that we're going to do is use a bootstrap view in order to make a programmable progress meter that will reflect our api call so bootstrap view is for responsive or bootstrap is for responsive web apps bootstrap exists outside of ujs bootstrap view adds a bunch of convenience tags so that we don't have to have nested divs with lots of classes we can just use these bootstrap view tags it's got a lot of built-in components and as i said before it's really great for backend dwellers like myself so jumping back to our to our code here i'm going to add a function that will um that will that will update or advance our progress meter which we're going to add in just a moment so in order to do that i have a uh shortcut here ts advance and working with types typescript inside of this class definition this is going to become an object and now what i have is a few properties i have a max property and a value property and then i have this advance function and the advance function is going to uh hit our api backend and it's going to use the value property that's available in this component and then with the response it's going to grab the response and then it does a little bit of of uh manipulation here if the response is greater than a hundred it's going to set it to zero otherwise it's going to set the value to whatever came back in our response so what that the impact of that's going to be that once we reach a hundred the next time we call the api and it's greater than a hundred it's going to get set back to zero and we'll see our progress meter go back to zero now we can't see our progress meter yet because we haven't added it in here so let's add that in now with my boot progress no that's not what i want hold on i messed that up bear with me a second i want this one container progress there we go okay so i'm using a bunch of bootstrap view tags here i have a container i have a row that's center aligned i have a column that's taking up eight columns this is all part of the layout but here's the real meat and potatoes of what's going on first of all we're using the built-in view bootstrap view progress meter and we're setting the value and the max and typescript is automatically picking up those values from the object associated with this template which is our app object and then i have a button and when we click this button it's going to run the advanced function also found in our app pro object now this should auto refresh and it's complaining about a couple of things ah i see what it's complaining about so you'll notice it has some complaints here and this isn't rendering the way that i would want and what it's complaining about is that it doesn't recognize this tag be container well that's because i added all this bootstrap view stuff in but i didn't make my application aware of bootstrap view and in order to do that i need to go to main ts this is the main typescript and this is where we can set up some global environment and i'm going to use this ts bootstrap live template and it added these lines so it's importing bootstrap view and bootstrap view icons it's importing the css that goes along with bootstrap which we could customize and it's telling view to use it globally so these this is a global configuration now if i jump back over and this should auto refresh there we go now we have our very nicely rendered progress meter with an initial value that we set and now each time i hit the advance button it's going to hit our spring boot back end and now we see the result updating and when i get to 100 and hit advance again it goes back down to zero because i can see the response here was 105 and because the response was greater than 100 our code said to to automatically put it back down to zero so this is now kind of a complete application front end to back end there's no security there will be in just a minute but we have a view j s component that's talking to a back end and reacting to to what's going on there pretty cool we're making good progress here but there are some things that are missing one is security another is that we have these two separate projects even though it's really all the same app we have our spring boot app we have our view j s app what i want to do is bring that all together and that's what j hipster gives us j hipster is a free and open source application generator used to quickly develop modern web applications so prior to this presentation i installed generator j hipster and j hipster out of the box supports react and angular as front end options but view j s also has a very rich system for um for enabling other for enabling other contributions to the j hipster project they call them blueprints and you or i or anybody else can write blueprints and somebody's written a very well supported view j s blueprint so generator j hipster view is that view j s blueprint and what we're going to see is that we at we with j hipster we get view j s we get spring boot and spring security we're going to have our same maven project and we're going to link it up with oauth 2 for good security so let's see this in action and what i'm going to do next is i'm going to make a folder and switch into that folder called progress app and then i'm going to run my j hipster command and i'm going to tell it that i want to use the view j s blueprint now this is going to take just a moment we're going to select a monolithic application so we're going to have our view j s front end and our spring boot back end all live in the same project i don't want to use web flux we'll name the application progress app the default package name you can see that i that i've done this before i'm going to leave it as it is it's com a fit nerd uh progress api we're not going to use the j hipster registry we are going to use oauth 2 and open id connect authentication and you can see it works with key cloak and octa we're going to start out with the built-in key cloak service that j hipster provides and then just a little bit we're going to switch over to octa we're not going to use a database we're not going to use a cache we are going to use maven and we're not going to um use any of the other features our only option now is view j s because we told it we wanted to use that blueprint so we're going to select view j s we can use a default theme i am not going to enable internationalization i'm not going to enable any other test frameworks and now we can start it installing and so it's generating this application and now it's going to run npm install and just like before in the instant in the uh uh to manage time properly i'm not going to wait for that to finish what i am going to do is shut down our original progress api back end and i'm going to shut down our original view j s front end and now i'm going to open up the j hipster project that we just created and that's going to be in our preset progress app and we have a nice palm file there we can open it as a project in a new window and now we have everything that we need set up in this application so we have our progress app so this is our spring boot we also have this web app which is our view j s all right now just like before i want to wire this up to our back end so i'm going to set up our um uh i'm going to set up our our mapping and you can see there's a lot more to this it sets up a lot of uh stuff for us up front we're going to add just like we did before we're going to add our boot progress live template i just have to manage a few imports here there we go and just like before i'm going to make sure that spring boot recognizes this as a rest controller and now i can fire up our progress app back end and we should be able to hit this api progress now one of the nice things about j hipster is that security is a first class citizen and so now when i go to hit our api progress endpoint i'm going to get back a 401 because all api endpoints are protected by default now that's fine for right now we're going to deal with security in just a minute let's switch over to our front end and just make sure that our j hipster app is working so just like before i'm going to open up a terminal now this time i don't need to switch into a separate folder i can just run npm start and that's going to run webpack and get our front end set up running on its own port which will be 9 000 so that'll start up in just a moment there we go and here is our front end now for security to start with one of the nice things about j hipster is that it comes with a docker file for key cloak this makes it super easy for us to have oauth out of the box without linking to an external service or having a dedicated server anywhere we just run um uh the docker command to docker compose to bring this docker container up and i've already done that in this first tab here so i already have uh our key cloak server running now as a result of that in our browser i can sign in and the default password and email is admin admin and now i'm in an authenticated state so i get that um i get off as a first class citizen right out of the box really cool now let's make sure that our vj s front end can talk to the back end similar to what we did before and to start with i'm going to jump over to web app here and i'm going to open up the app view component and if you notice one of the things that j hipster does for us is it doesn't embed our typescript right in the template it keeps the template and the typescript separate by referencing an external file here so here's our app view and it has an app component typescript and it sets up this object just like we saw before so now i can add the mounted function and it's looking for axios so import axios one more time from axios there we go and it's going to try and hit our back end and um and then it's going to take the the response and show us the data now one of the other really cool things that j hipster does i'm going to get rid of this it automatically proxies request to the api endpoint to the back end so our j hipster front end app is running on port nine thousand j hipster is all set up to proxy any api request to the back end and that alleviates the need for us to um manually set up cores so now with this in place i should be able to go back to our j hipster app and if i look on the console it's getting 401 unauthorized because calls to api require us to be authenticated but if i sign in this time i get a response so now we have our front end talking to our back end in an authenticated way pretty easy and pretty straightforward to set up we didn't have to do a lot of coding all right now what i want to do is uh set up our progress meter just like we saw before only this time i'm going to go over to a core component and i'm going to use the home template the home template is what shows us welcome java hipster so that's what we see over here welcome java hipster now i want to put our um our progress meter component right above it but what i'd like to do now is to use the power of view j s components to make this nice and encapsulated so rather than having 10 lines of code embedded in this home view i can just have this tag progress meter and that not only makes this component look nice but it also makes it so that i can reuse that component in other places now in order to do that we're going to create a new folder here and we'll call it progress and inside that progress folder we're going to create a new file and we'll call that progress dot component dot ts so this is going to be the object that backs our our template our component and so here we're going to have i'm going to use the ts progress template that i came up with okay and this hopefully this code looks very familiar it's now just encapsulated into its own file so we have progress component ts that's going to be an object and it works just like we saw before it gets um it hits our back end uh using the value and it's already using the relative reference so that it will automatically be proxied and um it's going to grab the response and then um set it to zero if it's greater than a hundred or just set the value to whatever came back now let's add our template so i'm going to add a new template i'm going to call this progress dot view okay and now i have um this template i got to spell it right template progress and so now this is a fully encapsulated template and just like we saw with app it's referencing the progress component ts script so that we we have a complete separation of our code and our template and the template hopefully looks familiar now one thing that is a little bit different here is that with j hipster it uses a mix of regular bootstrap and bootstrap view it has bootstrap view all set up but it uses the bootstrap view component tags but it doesn't use the bootstrap view layout tags for layout we use the regular old bootstrap classes and so we have these different divs with different class names now why it decided to why j hipster decided to mix and match for the view j as blueprint i'm not 100 sure but this is the way that that our template changes all right now we're 90 of the way there we now have a fully encapsulated progress meter component now we want to wire that into our home view now we already put the tag in here but it doesn't recognize this progress meter tag yet in order to do that we need our home components view so that we can set it up to be injected or reference as part of this the home component and so the first thing i'm going to do is to import progress from and i'm going to use this at symbol so it's saying within this project go find shared progress progress view so there's our component and now i'm going to register it with the home component by adding it to a list of components that we want to make available and this is where we set up the tag name so the tag name is going to be progress meter and what's going to back progress the progress meter tab is going to be this progress component that we just imported all right let's see how we did here this is going to reload are we going to get it the first try no but that's okay we'll figure out what's going on so it can't resolve shared progress progress view so let's see what i messed up there oh i know why because i didn't put progress in the shared folder i meant to do that so let me move progress into the shared folder this is a component that we want to reuse so now progress is in shared and now if i let this update itself again still complaining let's see what it can't complain now what it can't find now not found can't resolve shared progress progress component t s let's see maybe oh i know it happened when i moved it into shared it automatically updated my reference here and that's not what i want so i had to put this back to what it was now we should be good fingers crossed there we go okay so now we have our progress meter component we have it nicely laid out within our home page and there's one other aspect i want to take care of here if i sign out i still see the component but now when i try to use the component i get errors because i'm not authenticated well one of the things that's built into j hipster which is very nice is this authenticated awareness and so right here i can say v if and i can say v if authenticated and what's that what that's saying is that it's only going to render our progress meter if we're authenticated so now when this refreshes you can see that it no longer shows our progress meter but once we sign in it does show our progress meter and now we can interact with it and now if i sign out i no longer see the progress meter all right now we're really starting to cook with fire we have off we have an encapsulated and abstracted progress meter component now the next thing we want to do is to switch from key cloak over to octa and we're going to see we have a couple of tools in our tool bag here to in our toolbox to make this super easy so we're going to provision an octa org we're going to create an oauth app within octa and we're going to see that provisioning and setting up that app is made really easy with heroku in particular the octa heroku add-on that i built now ordinarily you would have to go to octa you'd have to create uh and you'd have to sign up for an octa org you'd have to get an email and reset your password then you'd have to go into your octa org and create an open id connect an oauth application when you use the heroku octa add-on it does all of that for you so let's take a look at that in action so before i get into my j hipster configuration to work with octa the first thing i'm going to do is go to heroku.com i highly recommend heroku if you don't already have it and i'm going to create a brand new application i'll call it octa dev nexus one that's available and i'm going to create the application now this application isn't doing a blessed thing right now but if i go over to overview and i go to the add-ons tab i can search for the octa add-on and now i can click on provision and once i click provision over here we can see this these three dots are going to keep uh cycling like that until the provisioning is done it takes about 30 seconds but in the interest of time we're going to go to one that i've already set up octa dev nexus and when it's done provisioning there's a couple of cool things going on here one of them is that we have access to all of these variables all of these environment variables that we need to configure our application now this is good for two reasons one is that when this j hipster app is all set and ready to go we can deploy this to heroku and it'll just work out of the box but the other is that it makes it super easy for us to set up right now locally so i'm going to copy some of these values i only need three of them i need the issuer i need the secret and i need the client id in order to configure our j hipster app now where that configuration is is under resources config application yaml and by default it's set up with our key cloak instance that's running in our docker container so now we're going to replace these values with the values that we just copied from our heroku environment variables now that is all i need to get my j hipster application my spring boot application talking to octa just those three variables so i'm gonna i'm gonna restart my progress app spring boot app this will just take a moment all right there we go now i'm going to jump back over to our progress app and i'm going to attempt to authenticate and i'll give you a little spoiler alert it's going to fail but we're going to be able to fix it very easily now first of all we're going to octa which is good we want to be able to authenticate at octa but it's complaining that the redirect uri parameter isn't set right now for security purposes octa won't redirect just anywhere it has to be whitelisted so i'm going to grab the redirect that j hipster needs and now i'm going to go over to my octa org one of the nice things about the octa heroku add-on is that i can select the octa org here and sso right over to it i don't even have to authenticate directly to octa now this is the octa dashboard if you've never seen it and if i go to applications you can see that heroku created two applications one for a spa one for a web app the web app is the one that we're interested in right now and i want to whitelist an additional redirect uri for login and so i'm just going to paste that in here also while i'm here i'm going to whitelist a log out redirect and i just know that when we log out it brings us to the front door of our application so i want to set that up now all right now just so that we can see what this looks like i'm going to log out of octa okay i'm going to go back to localhost 9 000 which is our j hipster application and now i'm going to attempt to sign in again so this is good so far so good it sent us over to octa to authenticate and for a real application you could skin this login page to have the look and feel that you want for your brand you can even have a custom domain up here like login dot a fitner dot com so that uh you have you you can completely whitelabel octa out now the username and password i don't know they were generated automatically but i can come back here to my heroku settings and i can copy those values so that i can test out my app here so there's my password here is my username and now i'm back to being authenticated my j hipster app knows who i am it used oauth 2 to do it it used octa to manage that oauth flow and now i'm back to being able to manage uh my progress meter once again and i can sign out um as needed and this signs me out of octa as well so we've covered a lot of ground here what we didn't talk about what we didn't have time to talk about is view x that's the view j s uh pattern for um pattern and library for state management so for instance if we wanted our progress meter to maintain the its value across different components we could do that using something like view j view x we didn't talk about jpa most times your real life application is going to have some sort of persistence layer we didn't talk about cash cash is super handy to make things more efficient and j hipster supports cash and we didn't talk about deployment but with everything that we set up we could take this j hipster app as it is right now and deploy it to heroku and it's one of the great things about heroku and j hipster spring boot and view j s it's very easy to deploy it so that's all the time i have again here's the qr code which will bring you to this slide deck as well as links to all of the technology that uh that we discussed today so we should have some time for