Spring REST API + OAuth2 + AngularJS

http://www.baeldung.com/rest-api-spring-oauth2-angularjs
作者:Eugen Paraschiv
译者http://oopsguy.com

1、概述

在本教程中,大家将运用 OAuth 来珍贵 REST API,并以一个简易的 AngularJS
客户端举办出现说法。

我们要创立的应用程序将含有了多少个单身模块:

  • 授权服务器
  • 资源服务器
  • UI implicit – 一个应用 Implicit Flow 的前端采取
  • UI password – 一个接纳 Password Flow 的前端拔取

2、授权服务器

率先,让我们先搭建一个概括的 Spring Boot 应用程序作为授权服务器。

2.1、Maven 配置

大家设置以下倚重:

<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-web</artifactId>
</dependency>    
<dependency>
    <groupId>org.springframework</groupId>
    <artifactId>spring-jdbc</artifactId>
</dependency>  
<dependency>
    <groupId>mysql</groupId>
    <artifactId>mysql-connector-java</artifactId>
    <scope>runtime</scope>
</dependency>
<dependency>
    <groupId>org.springframework.security.oauth</groupId>
    <artifactId>spring-security-oauth2</artifactId>
    <version>${oauth.version}</version>
</dependency>

请留心,我们接纳了 spring-jdbc 和 MySQL,因为我们将拔取 JDBC 来贯彻
token 存储。

2.2、@EnableAuthorizationServer

明日,大家来配置负责管理 Access Token(访问令牌)的授权服务器:

@Configuration
@EnableAuthorizationServer
public class AuthServerOAuth2Config
  extends AuthorizationServerConfigurerAdapter {
  
    @Autowired
    @Qualifier("authenticationManagerBean")
    private AuthenticationManager authenticationManager;
 
    @Override
    public void configure(
      AuthorizationServerSecurityConfigurer oauthServer) 
      throws Exception {
        oauthServer
          .tokenKeyAccess("permitAll()")
          .checkTokenAccess("isAuthenticated()");
    }
 
    @Override
    public void configure(ClientDetailsServiceConfigurer clients) 
      throws Exception {
        clients.jdbc(dataSource())
          .withClient("sampleClientId")
          .authorizedGrantTypes("implicit")
          .scopes("read")
          .autoApprove(true)
          .and()
          .withClient("clientIdPassword")
          .secret("secret")
          .authorizedGrantTypes(
            "password","authorization_code", "refresh_token")
          .scopes("read");
    }
 
    @Override
    public void configure(
      AuthorizationServerEndpointsConfigurer endpoints) 
      throws Exception {
  
        endpoints
          .tokenStore(tokenStore())
          .authenticationManager(authenticationManager);
    }
 
    @Bean
    public TokenStore tokenStore() {
        return new JdbcTokenStore(dataSource());
    }
}

注意:

  • 为了持久化 token,大家拔取了一个 JdbcTokenStore
  • 我们为 implicit 授权类型注册了一个客户端
  • 大家报了名了另一个客户端,授权了 passwordauthorization_code
    refresh_token 等授权类型
  • 为了采纳 password 授权类型,我们需要装配并应用
    AuthenticationManager bean

2.3、数据源配置

接下去,让我们配备数据源为 JdbcTokenStore 所用:

@Value("classpath:schema.sql")
private Resource schemaScript;
 
@Bean
public DataSourceInitializer dataSourceInitializer(DataSource dataSource) {
    DataSourceInitializer initializer = new DataSourceInitializer();
    initializer.setDataSource(dataSource);
    initializer.setDatabasePopulator(databasePopulator());
    return initializer;
}
 
private DatabasePopulator databasePopulator() {
    ResourceDatabasePopulator populator = new ResourceDatabasePopulator();
    populator.addScript(schemaScript);
    return populator;
}
 
@Bean
public DataSource dataSource() {
    DriverManagerDataSource dataSource = new DriverManagerDataSource();
    dataSource.setDriverClassName(env.getProperty("jdbc.driverClassName"));
    dataSource.setUrl(env.getProperty("jdbc.url"));
    dataSource.setUsername(env.getProperty("jdbc.user"));
    dataSource.setPassword(env.getProperty("jdbc.pass"));
    return dataSource;
}

请小心,由于大家运用了 JdbcTokenStore,需要开端化数据库
schema(情势),因而大家应用了 DataSourceInitializer – 和以下 SQL
schema:

drop table if exists oauth_client_details;
create table oauth_client_details (
  client_id VARCHAR(255) PRIMARY KEY,
  resource_ids VARCHAR(255),
  client_secret VARCHAR(255),
  scope VARCHAR(255),
  authorized_grant_types VARCHAR(255),
  web_server_redirect_uri VARCHAR(255),
  authorities VARCHAR(255),
  access_token_validity INTEGER,
  refresh_token_validity INTEGER,
  additional_information VARCHAR(4096),
  autoapprove VARCHAR(255)
);
 
drop table if exists oauth_client_token;
create table oauth_client_token (
  token_id VARCHAR(255),
  token LONG VARBINARY,
  authentication_id VARCHAR(255) PRIMARY KEY,
  user_name VARCHAR(255),
  client_id VARCHAR(255)
);
 
drop table if exists oauth_access_token;
create table oauth_access_token (
  token_id VARCHAR(255),
  token LONG VARBINARY,
  authentication_id VARCHAR(255) PRIMARY KEY,
  user_name VARCHAR(255),
  client_id VARCHAR(255),
  authentication LONG VARBINARY,
  refresh_token VARCHAR(255)
);
 
drop table if exists oauth_refresh_token;
create table oauth_refresh_token (
  token_id VARCHAR(255),
  token LONG VARBINARY,
  authentication LONG VARBINARY
);
 
drop table if exists oauth_code;
create table oauth_code (
  code VARCHAR(255), authentication LONG VARBINARY
);
 
drop table if exists oauth_approvals;
create table oauth_approvals (
    userId VARCHAR(255),
    clientId VARCHAR(255),
    scope VARCHAR(255),
    status VARCHAR(10),
    expiresAt TIMESTAMP,
    lastModifiedAt TIMESTAMP
);
 
drop table if exists ClientDetails;
create table ClientDetails (
  appId VARCHAR(255) PRIMARY KEY,
  resourceIds VARCHAR(255),
  appSecret VARCHAR(255),
  scope VARCHAR(255),
  grantTypes VARCHAR(255),
  redirectUrl VARCHAR(255),
  authorities VARCHAR(255),
  access_token_validity INTEGER,
  refresh_token_validity INTEGER,
  additionalInformation VARCHAR(4096),
  autoApproveScopes VARCHAR(255)
);

内需小心的是,我们不必然需要显式表明 DatabasePopulator bean –
**我们得以概括地行使一个 schema.sql – Spring Boot 默认使用*。

2.4、安全体署

终极,让咱们将授权服务器变得尤其安全。

当客户端应用程序需要得到一个 Access Token
时,在一个粗略的表单登录驱动验证处理将来,它将推行此操作:

@Configuration
public class ServerSecurityConfig extends WebSecurityConfigurerAdapter {
 
    @Override
    protected void configure(AuthenticationManagerBuilder auth) 
      throws Exception {
        auth.inMemoryAuthentication()
          .withUser("john").password("123").roles("USER");
    }
 
    @Override
    @Bean
    public AuthenticationManager authenticationManagerBean() 
      throws Exception {
        return super.authenticationManagerBean();
    }
 
    @Override
    protected void configure(HttpSecurity http) throws Exception {
        http.authorizeRequests()
            .antMatchers("/login").permitAll()
            .anyRequest().authenticated()
            .and()
            .formLogin().permitAll();
    }
}

此处的内需提及的是,Password flow 不需要表单登录配置 – 仅限于 Implicit
flow,因而你可以依照你使用的 OAuth2 flow 跳过它。

3、资源服务器

当今,我们来琢磨一下资源服务器;本质上就是大家想要消费的 REST API。

3.1、Maven 配置

俺们的资源服务器配置与前边的授权服务器应用程序配置相同。

3.2、Token 存储配置

接下去,我们将配备我们的 TokenStore 来访问与授权服务器用于存储 Access
Token 相同的数据库:

@Autowired
private Environment env;
 
@Bean
public DataSource dataSource() {
    DriverManagerDataSource dataSource = new DriverManagerDataSource();
    dataSource.setDriverClassName(env.getProperty("jdbc.driverClassName"));
    dataSource.setUrl(env.getProperty("jdbc.url"));
    dataSource.setUsername(env.getProperty("jdbc.user"));
    dataSource.setPassword(env.getProperty("jdbc.pass"));
    return dataSource;
}
 
@Bean
public TokenStore tokenStore() {
    return new JdbcTokenStore(dataSource());
}

请留心,针对那个大概的落实,即使授权服务器与资源服务器是独自的运用,俺们也共享着
token 存储的 SQL

原因当然是资源服务器需要可以评释授权服务器发出的 Access Token
的行之有效。

3.3、远程 Token 服务

咱们得以行使 RemoteTokeServices,而不是在资源服务器中应用一个
TokenStore

@Primary
@Bean
public RemoteTokenServices tokenService() {
    RemoteTokenServices tokenService = new RemoteTokenServices();
    tokenService.setCheckTokenEndpointUrl(
      "http://localhost:8080/spring-security-oauth-server/oauth/check_token");
    tokenService.setClientId("fooClientIdPassword");
    tokenService.setClientSecret("secret");
    return tokenService;
}

注意:

  • RemoteTokenService 将运用授权服务器上的 CheckTokenEndPoint
    来验证 AccessToken 并从中得到 Authentication 对象。
  • 可以在 AuthorizationServerBaseURL + /oauth/check_token 找到
  • 授权服务器可以利用其余 TokenStore 类型
    [JdbcTokenStoreJwtTokenStore、……] – 这不会潜移默化到
    RemoteTokenService 或者资源服务器。

3.4、一个大概的控制器

接下去,让大家来实现一个简单控制器以表露一个 Foo 资源:

@Controller
public class FooController {
 
    @PreAuthorize("#oauth2.hasScope('read')")
    @RequestMapping(method = RequestMethod.GET, value = "/foos/{id}")
    @ResponseBody
    public Foo findById(@PathVariable long id) {
        return
          new Foo(Long.parseLong(randomNumeric(2)), randomAlphabetic(4));
    }
}

请小心客户端需要需要 read scope(范围、功效域或权限)访问此资源。

咱俩还需要敞开全局方法安全性并安排 MethodSecurityExpressionHandler

@Configuration
@EnableResourceServer
@EnableGlobalMethodSecurity(prePostEnabled = true)
public class OAuth2ResourceServerConfig 
  extends GlobalMethodSecurityConfiguration {
 
    @Override
    protected MethodSecurityExpressionHandler createExpressionHandler() {
        return new OAuth2MethodSecurityExpressionHandler();
    }
}

以下是大家基础的 Foo 资源:

public class Foo {
    private long id;
    private String name;
}

3.5、Web 配置

末段,让我们为 API 设置一个卓殊基本的 web 配置:

@Configuration
@EnableWebMvc
@ComponentScan({ "org.baeldung.web.controller" })
public class ResourceWebConfig extends WebMvcConfigurerAdapter {}

4、前端 – Password Flow

我们现在来探望一个大概的前端 AngularJS 客户端实现。

俺们将在此处运用 OAuth2 Password flow –
这就是怎么这只是一个演示,而不是一个可用于生产的利用。您会专注到,客户端凭据被显露在前者

  • 那也是大家将来在今后的稿子中要研究的。

俺们从多少个大概的页面先河 – “index” 和 “login”;一旦用户提供证据,前端 JS
客户端将运用它们从授权服务器获取的一个 Access Token。

4.1、登录页面

以下是一个概括的登录页面:

<body ng-app="myApp" ng-controller="mainCtrl">
<h1>Login</h1>
<label>Username</label><input ng-model="data.username"/>
<label>Password</label><input type="password" ng-model="data.password"/>
<a href="#" ng-click="login()">Login</a>
</body>

4.2、获取 Access Token

现今,让我们来探视怎样获取 Access Token:

var app = angular.module('myApp', ["ngResource","ngRoute","ngCookies"]);
app.controller('mainCtrl', 
  function($scope, $resource, $http, $httpParamSerializer, $cookies) {
     
    $scope.data = {
        grant_type:"password", 
        username: "", 
        password: "", 
        client_id: "clientIdPassword"
    };
    $scope.encoded = btoa("clientIdPassword:secret");
     
    $scope.login = function() {   
        var req = {
            method: 'POST',
            url: "http://localhost:8080/spring-security-oauth-server/oauth/token",
            headers: {
                "Authorization": "Basic " + $scope.encoded,
                "Content-type": "application/x-www-form-urlencoded; charset=utf-8"
            },
            data: $httpParamSerializer($scope.data)
        }
        $http(req).then(function(data){
            $http.defaults.headers.common.Authorization = 
              'Bearer ' + data.data.access_token;
            $cookies.put("access_token", data.data.access_token);
            window.location.href="index";
        });   
   }    
});

注意:

  • 咱俩发送一个 POST 到 /oauth/token 端点以博取一个 Access Token
  • 俺们利用客户端凭据和 Basic Auth 验证来访问此端点
  • 今后我们发送用户凭证以及客户端 id 和授权类型参数的 URL 编码
  • 拿到 Access Token 后,我们将其积存在一个 cookie 中

cookie 存储在此地特别重要,因为我们只利用 cookie
作为存储目的,而不是一贯发动身份验证过程。这促进制止跨站点请求伪造(CSRF)类型的口诛笔伐和尾巴

4.3、索引(index)页面

以下是一个简练的目录页面:

<body ng-app="myApp" ng-controller="mainCtrl">
<h1>Foo Details</h1>
<label>ID</label>{{foo.id}}
<label>Name</label>{{foo.name}}
<a href="#" ng-click="getFoo()">New Foo</a>
</body>

4.4、授权客户端请求

出于我们需要 Access Token 为对资源的呼吁进行授权,大家将增多一个蕴含
Access Token 的粗略授权头:

var isLoginPage = window.location.href.indexOf("login") != -1;
if(isLoginPage){
    if($cookies.get("access_token")){
        window.location.href = "index";
    }
} else{
    if($cookies.get("access_token")){
        $http.defaults.headers.common.Authorization = 
          'Bearer ' + $cookies.get("access_token");
    } else{
        window.location.href = "login";
    }
}

未曾没有找到 cookie,用户将跳转到登录页面。

5.前端 – 隐式授权(Implicit 格兰特)

目前,大家来看看使用了隐式授权的客户端应用。

俺们的客户端应用是一个独门的模块,尝试使用隐式授权流程从授权服务器获取
Access Token 后走访资源服务器。

5.1、Maven 配置

这里是 pom.xml 依赖:

<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-web</artifactId>
</dependency>
<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>

在意:大家不需要 OAuth 倚重,因为我们将接纳 AngularJS 的 OAuth-ng
指令来拍卖,其可以行使隐式授权流程连接到 OAuth2 服务器。

5.2、Web 配置

以下是咱们的一个简便的 web 配置:

@Configuration
@EnableWebMvc
public class UiWebConfig extends WebMvcConfigurerAdapter {
    @Bean
    public static PropertySourcesPlaceholderConfigurer 
      propertySourcesPlaceholderConfigurer() {
        return new PropertySourcesPlaceholderConfigurer();
    }
 
    @Override
    public void configureDefaultServletHandling(
      DefaultServletHandlerConfigurer configurer) {
        configurer.enable();
    }
 
    @Override
    public void addViewControllers(ViewControllerRegistry registry) {
        super.addViewControllers(registry);
        registry.addViewController("/index");
        registry.addViewController("/oauthTemplate");
    }
 
    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
        registry.addResourceHandler("/resources/**")
          .addResourceLocations("/resources/");
    }
}

5.3、主页

接下去,这里是大家的主页:

OAuth-ng 指令需要:

  • site:授权服务器 URL
  • client-id:应用程序客户端 id
  • redirect-uri:从授权服务器获 Access Token 后,要重定向到的 URI
  • scope:从授权服务器请求的权杖
  • template:渲染自定义 HTML 模板


        
        

     

    Foo Details

    {{foo.id}}
    {{foo.name}}

New Foo
 





请留心我们怎样利用
OAuth-ng 指令来收获
Access Token。

除此以外,以下是一个简单易行的 oauthTemplate.html

<div>
  <a href="#" ng-show="show=='logged-out'" ng-click="login()">Login</a>
  <a href="#" ng-show="show=='denied'" ng-click="login()">Access denied. Try again.</a>
</div>

5.4、AngularJS App

这是我们的 AngularJS app:

var app = angular.module('myApp', ["ngResource","ngRoute","oauth"]);
app.config(function($locationProvider) {
  $locationProvider.html5Mode({
      enabled: true,
      requireBase: false
    }).hashPrefix('!');
});
 
app.controller('mainCtrl', function($scope,$resource,$http) {
    $scope.$on('oauth:login', function(event, token) {
        $http.defaults.headers.common.Authorization= 'Bearer ' + token.access_token;
    });
 
    $scope.foo = {id:0 , name:"sample foo"};
    $scope.foos = $resource(
      "http://localhost:8080/spring-security-oauth-resource/foos/:fooId", 
      {fooId:'@id'});
    $scope.getFoo = function(){
        $scope.foo = $scope.foos.get({fooId:$scope.foo.id});
    } 
});

请留意,在赢得 Access Token
后,假设在资源服务器中运用到了受保障的资源,我们将经过 Authorization
头来行使它。

结论

大家已经学习了什么采用 OAuth2 授权大家的应用程序。

本学科的一体化兑现可以在此 GitHub
项目
中找到 –
这是一个基于 Eclipse 的花色,所以理应很容易导入运行。

初稿示例代码

https://github.com/eugenp/spring-security-oauth/