Spring REST API + OAuth2 + Angular – Spring REST API + OAuth2 + Angular

最后修改: 2015年 11月 17日


1. Overview


In this tutorial, we’ll secure a REST API with OAuth2 and consume it from a simple Angular client.

在本教程中,我们将用OAuth2确保REST API的安全,并从一个简单的Angular客户端消费它。

The application we’re going to build out will consist of three separate modules:


  • Authorization Server
  • Resource Server
  • UI authorization code: a front-end application using the Authorization Code Flow

We’ll use the OAuth stack in Spring Security 5. If you want to use the Spring Security OAuth legacy stack, have a look at this previous article: Spring REST API + OAuth2 + Angular (Using the Spring Security OAuth Legacy Stack).

我们将在Spring Security 5中使用OAuth堆栈。如果你想使用Spring Security OAuth遗留堆栈,可以看看之前的这篇文章。Spring REST API + OAuth2 + Angular(使用Spring Security OAuth Legacy Stack)

Let’s jump right in.


2. The OAuth2 Authorization Server (AS)


Simply put, an Authorization Server is an application that issues tokens for authorization.


Previously, the Spring Security OAuth stack offered the possibility of setting up an Authorization Server as a Spring Application. But the project has been deprecated, mainly because OAuth is an open standard with many well-established providers such as Okta, Keycloak, and ForgeRock, to name a few.

以前,Spring Security OAuth栈提供了将授权服务器设置为Spring应用程序的可能性。但这个项目已经被废弃了,主要是因为OAuth是一个开放的标准,有很多成熟的供应商,如Okta、Keycloak和ForgeRock等等。

Of these, we’ll be using Keycloak. It’s an open-source Identity and Access Management server administered by Red Hat, developed in Java, by JBoss. It supports not only OAuth2 but also other standard protocols such as OpenID Connect and SAML.

其中,我们将使用Keycloak>。这是一个开源的身份和访问管理服务器,由Red Hat管理,用Java开发,由JBoss负责。它不仅支持OAuth2,而且还支持其他标准协议,如OpenID Connect和SAML。

For this tutorial, we’ll be setting up an embedded Keycloak server in a Spring Boot app.

在本教程中,我们将在Spring Boot应用程序中设置一个嵌入式Keycloak服务器

3. The Resource Server (RS)


Now let’s discuss the Resource Server; this is essentially the REST API, which we ultimately want to be able to consume.

现在让我们来讨论一下资源服务器;这基本上是REST API,我们最终希望能够消费它。

3.1. Maven Configuration


Our Resource Server’s pom is much the same as the previous Authorization Server pom, sans the Keycloak part and with an additional spring-boot-starter-oauth2-resource-server dependency:



3.2. Security Configuration


Since we’re using Spring Boot, we can define the minimal required configuration using Boot properties.

由于我们使用的是Spring Boot,我们可以使用Boot属性定义所需的最小配置。

We’ll do this in an application.yml file:


  port: 8081
    context-path: /resource-server

          issuer-uri: http://localhost:8083/auth/realms/baeldung
          jwk-set-uri: http://localhost:8083/auth/realms/baeldung/protocol/openid-connect/certs

Here, we specified that we’ll use JWT tokens for authorization.


The jwk-set-uri property points to the URI containing the public key so that our Resource Server can verify the tokens’ integrity. 


The issuer-uri property represents an additional security measure to validate the issuer of the tokens (which is the Authorization Server). However, adding this property also mandates that the Authorization Server should be running before we can start the Resource Server application.

issuer-uri 属性代表一种额外的安全措施,以验证令牌的发行者(即授权服务器)。然而,添加这个属性也规定,在我们启动资源服务器应用程序之前,授权服务器应该正在运行。

Next, let’s set up a security configuration for the API to secure endpoints:


public class SecurityConfig {

    public SecurityFilterChain filterChain(HttpSecurity http) throws Exception {
            .antMatchers(HttpMethod.GET, "/user/info", "/api/foos/**")
            .antMatchers(HttpMethod.POST, "/api/foos")
        return http.build();

As we can see, for our GET methods, we only allow requests that have read scope. For the POST method, the requester needs to have a write authority in addition to read. However, for any other endpoint, the request should just be authenticated with any user.


Also, the oauth2ResourceServer() method specifies that this is a resource server, with jwt()-formatted tokens.


Another point to note here is the use of method cors() to allow Access-Control headers on the requests. This is especially important since we are dealing with an Angular client, and our requests are going to come from another origin URL.


3.4. The Model and Repository


Next, let’s define a javax.persistence.Entity for our model, Foo:


public class Foo {

    @GeneratedValue(strategy = GenerationType.IDENTITY)
    private Long id;

    private String name;
    // constructor, getters and setters

Then we need a repository of Foos. We’ll use Spring’s PagingAndSortingRepository:


public interface IFooRepository extends PagingAndSortingRepository<Foo, Long> {

3.4. The Service and Implementation


After that, we’ll define and implement a simple service for our API:


public interface IFooService {
    Optional<Foo> findById(Long id);

    Foo save(Foo foo);
    Iterable<Foo> findAll();


public class FooServiceImpl implements IFooService {

    private IFooRepository fooRepository;

    public FooServiceImpl(IFooRepository fooRepository) {
        this.fooRepository = fooRepository;

    public Optional<Foo> findById(Long id) {
        return fooRepository.findById(id);

    public Foo save(Foo foo) {
        return fooRepository.save(foo);

    public Iterable<Foo> findAll() {
        return fooRepository.findAll();

3.5. A Sample Controller


Now let’s implement a simple controller exposing our Foo resource via a DTO:


@RequestMapping(value = "/api/foos")
public class FooController {

    private IFooService fooService;

    public FooController(IFooService fooService) {
        this.fooService = fooService;

    @CrossOrigin(origins = "http://localhost:8089")    
    @GetMapping(value = "/{id}")
    public FooDto findOne(@PathVariable Long id) {
        Foo entity = fooService.findById(id)
            .orElseThrow(() -> new ResponseStatusException(HttpStatus.NOT_FOUND));
        return convertToDto(entity);

    public Collection<FooDto> findAll() {
        Iterable<Foo> foos = this.fooService.findAll();
        List<FooDto> fooDtos = new ArrayList<>();
        foos.forEach(p -> fooDtos.add(convertToDto(p)));
        return fooDtos;

    protected FooDto convertToDto(Foo entity) {
        FooDto dto = new FooDto(entity.getId(), entity.getName());

        return dto;

Notice the use of @CrossOrigin above; this is the controller-level config we need to allow CORS from our Angular App running at the specified URL.

注意到上面使用的@CrossOrigin;这是我们需要的控制器级配置,以允许从我们的Angular App运行在指定的URL上的CORS。

Here’s our FooDto:


public class FooDto {
    private long id;
    private String name;

4. Front End — Setup


We’re now going to look at a simple front-end Angular implementation for the client, which will access our REST API.

我们现在要看一下客户端的一个简单的前端Angular实现,它将访问我们的REST API。

We’ll first use Angular CLI to generate and manage our front-end modules.

我们将首先使用Angular CLI来生成和管理我们的前端模块。

First, we install node and npm, as Angular CLI is an npm tool.

首先,我们安装node和npm,因为Angular CLI是一个npm工具。

Then we need to use the frontend-maven-plugin to build our Angular project using Maven:


                    <id>install node and npm</id>
                    <id>npm install</id>
                    <id>npm run build</id>
                        <arguments>run build</arguments>

And finally, generate a new Module using Angular CLI:

最后,使用Angular CLI生成一个新模块:

ng new oauthApp

In the following section, we will discuss the Angular app logic.


5. Authorization Code Flow Using Angular


We’re going to use the OAuth2 Authorization Code flow here.


Our use case: The client app requests a code from the Authorization Server and is presented with a login page. Once a user provides their valid credentials and submits, the Authorization Server gives us the code. Then the front-end client uses it to acquire an access token.


5.1. Home Component


Lets’ begin with our main component, the HomeComponent, where all the action starts:


  selector: 'home-header',
  providers: [AppService],
  template: `<div class="container" >
    <button *ngIf="!isLoggedIn" class="btn btn-primary" (click)="login()" type="submit">
    <div *ngIf="isLoggedIn" class="content">
      <span>Welcome !!</span>
      <a class="btn btn-default pull-right"(click)="logout()" href="#">Logout</a>
export class HomeComponent {
  public isLoggedIn = false;

  constructor(private _service: AppService) { }
  ngOnInit() {
    this.isLoggedIn = this._service.checkCredentials();    
    let i = window.location.href.indexOf('code');
    if(!this.isLoggedIn && i != -1) {
      this._service.retrieveToken(window.location.href.substring(i + 5));

  login() {
    window.location.href = 
         response_type=code&scope=openid%20write%20read&client_id=' + 
         this._service.clientId + '&redirect_uri='+ this._service.redirectUri;
  logout() {

In the beginning, when the user is not logged in, only the login button appears. Upon clicking this button, the user is navigated to the AS’s authorization URL where they key in username and password. After a successful login, the user is redirected back with the authorization code, and then we retrieve the access token using this code.


5.2. App Service


Now let’s look at AppService — located at app.service.ts — which contains the logic for server interactions:


  • retrieveToken(): to obtain access token using authorization code
  • saveToken(): to save our access token in a cookie using ng2-cookies library
  • getResource(): to get a Foo object from server using its ID
  • checkCredentials(): to check if user is logged in or not
  • logout(): to delete access token cookie and log the user out
export class Foo {
  constructor(public id: number, public name: string) { }

export class AppService {
  public clientId = 'newClient';
  public redirectUri = 'http://localhost:8089/';

  constructor(private _http: HttpClient) { }

  retrieveToken(code) {
    let params = new URLSearchParams();   
    params.append('client_id', this.clientId);
    params.append('redirect_uri', this.redirectUri);

    let headers = 
      new HttpHeaders({'Content-type': 'application/x-www-form-urlencoded; charset=utf-8'});
        params.toString(), { headers: headers })
          data => this.saveToken(data),
          err => alert('Invalid Credentials')); 

  saveToken(token) {
    var expireDate = new Date().getTime() + (1000 * token.expires_in);
    Cookie.set("access_token", token.access_token, expireDate);
    console.log('Obtained Access token');
    window.location.href = 'http://localhost:8089';

  getResource(resourceUrl) : Observable<any> {
    var headers = new HttpHeaders({
      'Content-type': 'application/x-www-form-urlencoded; charset=utf-8', 
      'Authorization': 'Bearer '+Cookie.get('access_token')});
    return this._http.get(resourceUrl, { headers: headers })
                   .catch((error:any) => Observable.throw(error.json().error || 'Server error'));

  checkCredentials() {
    return Cookie.check('access_token');

  logout() {

In the retrieveToken method, we use our client credentials and Basic Auth to send a POST to the /openid-connect/token endpoint to get the access token. The parameters are being sent in a URL-encoded format. After we obtain the access token, we store it in a cookie.

retrieveToken方法中,我们使用客户证书和Basic Auth向/openid-connect/token端点发送POST以获得访问令牌。参数是以URL编码格式发送的。在我们获得访问令牌后,我们将其存储在一个 cookie 中。

The cookie storage is especially important here because we’re only using the cookie for storage purposes and not to drive the authentication process directly. This helps protect against Cross-Site Request Forgery (CSRF) attacks and vulnerabilities.


5.3. Foo Component


Finally, our FooComponent to display our Foo details:


  selector: 'foo-details',
  providers: [AppService],  
  template: `<div class="container">
    <h1 class="col-sm-12">Foo Details</h1>
    <div class="col-sm-12">
        <label class="col-sm-3">ID</label> <span>{{foo.id}}</span>
    <div class="col-sm-12">
        <label class="col-sm-3">Name</label> <span>{{foo.name}}</span>
    <div class="col-sm-12">
        <button class="btn btn-primary" (click)="getFoo()" type="submit">New Foo</button>        

export class FooComponent {
  public foo = new Foo(1,'sample foo');
  private foosUrl = 'http://localhost:8081/resource-server/api/foos/';  

  constructor(private _service:AppService) {}

  getFoo() {
         data => this.foo = data,
         error =>  this.foo.name = 'Error');

5.5. App Component


Our simple AppComponent to act as the root component:


  selector: 'app-root',
  template: `<nav class="navbar navbar-default">
    <div class="container-fluid">
      <div class="navbar-header">
        <a class="navbar-brand" href="/">Spring Security Oauth - Authorization Code</a>

export class AppComponent { }

And the AppModule where we wrap all our components, services and routes:


  declarations: [
  imports: [
     { path: '', component: HomeComponent, pathMatch: 'full' }], {onSameUrlNavigation: 'reload'})
  providers: [],
  bootstrap: [AppComponent]
export class AppModule { }

7. Run the Front End


1. To run any of our front-end modules, we need to build the app first:


mvn clean install

2. Then we need to navigate to our Angular app directory:


cd src/main/resources

3. Finally, we will start our app:


npm start

The server will start by default on port 4200; to change the port of any module, change:


"start": "ng serve"

in package.json; for example, to make it run on port 8089, add:


"start": "ng serve --port 8089"

8. Conclusion


In this article, we learned how to authorize our application using OAuth2.


The full implementation of this tutorial can be found in the GitHub project.