转载

Spring REST API + OAuth2 + AngularJS

在本教程中，我们将使用 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
    publicTokenStoretokenStore(){
        return new JdbcTokenStore(dataSource());
    }
}

注意：

  • 为了持久化 token，我们使用了一个 JdbcTokenStore
  • 我们为 implicit 授权类型注册了一个客户端
  • 我们注册了另一个客户端，授权了 password 、 authorization_code 和 refresh_token 等授权类型
  • 为了使用 password 授权类型，我们需要装配并使用 AuthenticationManager bean

2.3、数据源配置

接下来，让我们配置数据源为 JdbcTokenStore 所用： 

@Value("classpath:schema.sql")
private Resource schemaScript;
 
@Bean
publicDataSourceInitializerdataSourceInitializer(DataSource dataSource){
    DataSourceInitializer initializer = new DataSourceInitializer();
    initializer.setDataSource(dataSource);
    initializer.setDatabasePopulator(databasePopulator());
    return initializer;
}
 
privateDatabasePopulatordatabasePopulator(){
    ResourceDatabasePopulator populator = new ResourceDatabasePopulator();
    populator.addScript(schemaScript);
    return populator;
}
 
@Bean
publicDataSourcedataSource(){
    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 ServerSecurityConfigextends WebSecurityConfigurerAdapter{
 
    @Override
    protected void configure(AuthenticationManagerBuilder auth)
      throws Exception {
        auth.inMemoryAuthentication()
          .withUser("john").password("123").roles("USER");
    }
 
    @Override
    @Bean
    publicAuthenticationManagerauthenticationManagerBean()
      throws Exception {
        return super.authenticationManagerBean();
    }
 
    @Override
    protected void configure(HttpSecurity http)throwsException{
        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
publicDataSourcedataSource(){
    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
publicTokenStoretokenStore(){
    return new JdbcTokenStore(dataSource());
}

请注意，针对这个简单的实现，即使授权服务器与资源服务器是单独的应用， 我们也共享着 token 存储的 SQL 。

原因当然是资源服务器需要能够 验证授权服务器发出的 Access Token 的有效性。

3.3、远程 Token 服务

我们可以使用 RemoteTokeServices ，而不是在资源服务器中使用一个 TokenStore ： 

@Primary
@Bean
publicRemoteTokenServicestokenService(){
    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 类型 [ JdbcTokenStore 、 JwtTokenStore 、……] - 这不会影响到 RemoteTokenService 或者资源服务器。

3.4、一个简单的控制器

接下来，让我们来实现一个简单控制器以暴露一个 Foo 资源： 

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

请注意客户端需要需要 read scope（范围、作用域或权限）访问此资源。

我们还需要开启全局方法安全性并配置 MethodSecurityExpressionHandler ： 

@Configuration
@EnableResourceServer
@EnableGlobalMethodSecurity(prePostEnabled = true)
public class OAuth2ResourceServerConfig
  extends GlobalMethodSecurityConfiguration {
 
    @Override
    protectedMethodSecurityExpressionHandlercreateExpressionHandler(){
        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 ResourceWebConfigextends WebMvcConfigurerAdapter{}

4、前端 - Password Flow

我们现在来看看一个简单的前端 AngularJS 客户端实现。

我们将在这里使用 OAuth2 Password flow - 这就是为什么 这只是一个示例，而不是一个可用于生产的应用 。您会注意到，客户端凭据被暴露在前端 - 这也是我们将来在以后的文章中要讨论的。

我们从两个简单的页面开始 - “index” 和 “login”；一旦用户提供凭据，前端 JS 客户端将使用它们从授权服务器获取的一个 Access Token。

4.1、登录页面

以下是一个简单的登录页面：

<bodyng-app="myApp"ng-controller="mainCtrl">
<h1>Login</h1>
<label>Username</label><inputng-model="data.username"/>
<label>Password</label><inputtype="password"ng-model="data.password"/>
<ahref="#"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）页面

以下是一个简单的索引页面：

<bodyng-app="myApp"ng-controller="mainCtrl">
<h1>Foo Details</h1>
<label>ID</label><span>{{foo.id}}</span>
<label>Name</label><span>{{foo.name}}</span>
<ahref="#"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 Grant）

现在，我们来看看使用了隐式授权的客户端应用。

我们的客户端应用是一个独立的模块，尝试使用隐式授权流程从授权服务器获取 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 UiWebConfigextends WebMvcConfigurerAdapter{
    @Bean
    public staticPropertySourcesPlaceholderConfigurer
      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 模板 
<bodyng-app="myApp"ng-controller="mainCtrl">
    <oauth
      site="http://localhost:8080/spring-security-oauth-server"
      client-id="clientId"
      redirect-uri="http://localhost:8080/spring-security-oauth-ui-implicit/index"
      scope="read"
      template="oauthTemplate">
    </oauth>
 
<h1>Foo Details</h1>
<label>ID</label><span>{{foo.id}}</span>
<label>Name</label><span>{{foo.name}}</span>
</div>
<ahref="#"ng-click="getFoo()">New Foo</a>
 
<script
  src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js">
</script>
<script
  src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular-resource.min.js">
</script>
<script
  src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular-route.min.js">
</script>
<script
  src="https://cdnjs.cloudflare.com/ajax/libs/ngStorage/0.3.9/ngStorage.min.js">
</script>
<scriptth:src="@{/resources/oauth-ng.js}"></script>
</body>

请注意我们如何使用 OAuth-ng 指令来获取 Access Token。

另外，以下是一个简单的 oauthTemplate.html ： 

<div>
  <ahref="#"ng-show="show=='logged-out'"ng-click="login()">Login</a>
  <ahref="#"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 的项目，所以应该很容易导入运行。

原文  http://oopsguy.com/2017/09/18/spring-rest-api-and-oauth2-and-angluarjs/
正文到此结束
所属分类： Spring 编程技术

热门推荐

相关文章

阿里云首购8折
说给你听

本文目录
随机标签
书籍教程
springboot-demo Java入门教程 bootstrap3 CSS Apache基础教程 php ionic 教程 Python mysql教程 eclipse Ubuntu VPS系统配置 AngularJS 教程 MongoDB教程 Struts2教程 Redis教程 Spring教程 Git教程 Jenkins进阶系列 openfire参考指南 Java设计模式 HBase教程 Maven教程 hibernate教程 Docker 教程 memcached教程 Quartz指南 Hive教程 Ant教程 ANTLR教程 SpringCloud java实例教程 springcloud-demo XStream教程 Hazelcast教程 Elastic-Job-Lite 深入浅出MyBatis SVN教程 ibaties教程 rabittmq教程 solr教程 Hadoop教程 WebService CXF学习 JPA教程 ActiveMQ中文指南 java-demo Java内存模型 dubbo教程 python3-demo Linux入门视频教程
近期评论
  1. 1 Spring Cloud Consul实现选举机制
  2. 2 Spring Boot集成ShedLock实现分布式定时任务
  3. 3 利用oss进行数据库和网站图片备份
  4. 4 Spring Cloud Stream实现数据流处理
  5. 5 Python3访问MySQL数据库快速入门Demo
  6. 6 Github开源项目作者可以免费申请 JetBrains 全家桶
  7. 7 Spring Cloud Vault快速入门Demo
  8. 8 Spring Cloud Gateway快速入门Demo
  9. 9 Spring Cloud Contract快速入门Demo
  10. 10 Spring Cloud Consul快速入门Demo
网站信息
  • 文章总数：82,714 篇
  • 文件总数：284,287 个
  • 标签总数：2,393 个
  • 分类总数：85 个
  • 留言数量：2,560 条
  • 在线人数：615 人
  • 运行天数：4,409天
  • 最后更新：2024年11月22日03点
Loading...

其他链接

关于本站

本站定位：个人技术类博客

本站作用：写博客、记日志、闲聊扯淡鼓捣技术。

问题交流

[HBLOG]公众号 HBLOG HBLOG