Build a Basic CRUD App with Angular 5.0 and Spring Boot 2.0
Angular and Spring Boot are arguably the two most popular frameworks in all of web development. Matt Raible shows you how to use them together in the same app, and how to secure it all with Okta.
Hosea Sandstrom
Nice work! It’s been a while since I’ve paired up Java and Angular. Much appreciated!
René Winkler
Great tutorial, thanks a lot! I think type=“button” is missing on the delete button in the edit-car.html. Otherwise a DELETE and a PUT is performed when clicking on this button.
Matt Raible
Thanks for reporting this issue René! I’ve fixed it in this blog post and the associated example app.
Fabian
Hey, awesome article.
cd okta-spring-boot-2-angular-5/client && npm install && ng serve & should be more like cd okta-spring-boot-2-angular-5-example/client && npm install && ng serve & if you want to run the example project 
Matt Raible
Good catch Fabian! I’ve updated the article to have the proper directory name.
jeff
Excellent tutorial. Thank you.
I have the basic SSO flow working but can’t seem to figure out how get access to user groups on the angular client. I have tried:
- adding a scope property to the OktaAuthModule config object with value: ‘openid email groups’
- adding a “groups” scope to the default authorization server
- modified the “groups claim filter” in my application to be "Regex .*"
OktaAuthService doesn’t have methods for accessing claim attributes.
Matt Raible
Hello Jeff. I’m glad you liked this tutorial. We have an open issue to improve the Okta Angular SDK so its easy to show/hide things based on groups. In the meantime, you can call the userinfo endpoint with the access token. This returns the most up-to-date claims:
const accessToken = oktaAuth.getAccessToken()
const userInfo = oktaAuth.getOktaAuth().token.getUserInfo(accessToken)
As an alternative, you can decode the token and parse the groups claim yourself:
oktaAuth.getOktaAuth().token.decode(‘YOUR_ID_TOKEN_JWT’);
Stephane
Hi Matt,
In the userInfo object that is returned, I only see the email address. I think this is because the scope that is returned by default only returns ‘openid’ and 'email’
So I have tried to add a scope property in the config object with ‘profile’ as follows:
const . = {
issuer: 'https://dev-xxxxxxx.oktapre…,
redirectUri: ‘http://localhost:4200/implicit/callback’,
clientId: ‘xxxxxxxxx’,
scope: ‘openid profile email’
};
But this is not working. What else should I do?
jeff
Thanks Matt. getUserInfo() works but still no group details. I found a page on the okta site where you can preview a token for an authorization server. Even there, I still don’t see any group details so I suspect the issue is in my configuration somewhere.
Matt Raible
Have you completed the steps to add your groups to the ID token? If not, here they are:
Navigate to API > Authorization Servers, click the Authorization Servers tab and edit the default one. Click the Claims tab and Add Claim. Name it “groups” or “roles”, and include it in the ID Token. Set the value type to “Groups” and set the filter to be a Regex of “.*” (without the quotes).
jeff
Thanks Matt. That is exactly what I was missing in the configuration. Seeing the user groups now. Awesome! One other question, do you know if it’s possible to configure spring security in conjunction with the okta spring starter component? I tried configuring an api endpoint with public access (.antMatchers("/api/pub/**").permitAll()) but it doesn’t seem to bypass the token check.
Brian Demers
Hey Jeff!
It it, I’m in the process of updating one of our examples to better show how to do this.
(edit: fixed formatting a couple times)
There are a couple things to note in this example:
1.) if you want to change the OAuth Configuration, you MUST annotate your OAuth2SsoDefaultConfiguration with @EnableOAuth2Sso (instead of just putting this on your Spring Boot Application class)
2.) Order matters! calling super.configure() will add http.antMatcher("/").authorizeRequests().anyRequest().authenticated(), so you may need to add your config before calling super.
/
* The default Spring logout behavior redirects a user back to {code}/login?logout{code}, so you will likely want
* to change that. The easiest way to do this is by both extending from {@link OAuth2SsoDefaultConfiguration} and
* annotating your implementation with {@link EnableOAuth2Sso}.
*/
@Configuration
@EnableOAuth2Sso
public class ExampleSecurityConfigurerAdapter extends OAuth2SsoDefaultConfiguration {
public ExampleSecurityConfigurerAdapter(ApplicationContext applicationContext, OAuth2SsoProperties sso) {
super(applicationContext, sso);
}
@Override
protected void configure(HttpSecurity http) throws Exception {
// In this example we allow anonymous access to the root index page
// this MUST be configured before calling super.configure
http.authorizeRequests().antMatchers("/").permitAll();
// calling super.configure locks everything else down
super.configure(http);
// after calling super, you can change the logout success url
http.logout().logoutSuccessUrl("/");
}
}
Brian Demers
Let me know if that isn’t what you are looking for!
jeff
Hi Brian, thanks for the direction on this. I’ve tried creating a configurer adapter per you example but had to add spring-boot-autoconfigurer to my pom in order to get OAuth2SsoDefaultConfiguration on the classpath. Now I’m getting class not found on RelaxedPropertyResolver. So a bit of jar hell, I guess. To be clear, I am just trying to extend a simple version of Matt’s sample backend which has a public and private version of the car-list api. I am also using version 0.1.0 of the okta-spring-security-starter due to the spring 2.0 compatibility issue.
Brian Demers
OK, I haven’t had a chance to dig into Spring Boot 2.0 lately, though I think many of the issues I ran into in the past have been resolved (specifically related to OAuth)
Edmond Cukalla
Very nice guided tutorial Matt & Thanks a lot!
Just for the sake of someone who might run into problem with the changes on ‘client/src/styles.css’, as mentioned from this post: https://github.com/angular/… i changed the import '~<a href="https://fonts.googleapis.com/...';" rel="nofollow noopener" title="https://fonts.googleapis.com/...';">https://fonts.googleapis.co...</a> to @import url('<a href="https://fonts.googleapis.com/...');" rel="nofollow noopener" title="https://fonts.googleapis.com/...');">https://fonts.googleapis.co...</a>
Perk1
Thank you for this interesting project. I am learning Java, Spring, Hibernate,… but about AngluarJS i do not know too much. It will come time for that too. I learnt some time ago AngularJS1 and almost i do not see anything similar with this version. Do you have any suggestion for me from where to start from beginning with Angular 5 ? I do not planning yet but i just would like to know good sources.
Matt Raible
The best way to start learning Angular 5 (IMO), is to write an app with it. You could start by doing this tutorial and then searching for more information for the parts you don’t understand. I’d definitely recommend looking at the Angular QuickStart and Tutorial too.
If you want an application generator to do all the work for you, you could also just use JHipster. I like JHipster so much, I wrote a book about it! 
Matt Raible
I didn’t experience this issue, but thanks for the tip!