Spring Security and Angular JS(Basic)

发表于 更新于 分类于

创建项目

通过idea创建一个gradle项目spring-security-basic。
build.gradle配置信息：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
group 'com.cjoop'
version '1.0-SNAPSHOT'

buildscript {
    ext {
        springBootVersion = '1.3.5.RELEASE'
    }
    repositories {
        mavenLocal()
        jcenter()
    }
    dependencies {
        classpath("org.springframework.boot:spring-boot-gradle-plugin:${springBootVersion}")
        classpath 'org.springframework:springloaded:1.2.6.RELEASE'
    }
}

apply plugin: 'maven'
apply plugin: 'idea'
apply plugin: 'spring-boot'

sourceCompatibility = 1.7
targetCompatibility = 1.7

idea {
    module {
        inheritOutputDirs = false
        outputDir = file("$buildDir/classes/main/")
        testOutputDir = file("$buildDir/classes/test/")
    }
}

repositories {
    mavenLocal()
    jcenter()
}

dependencies {
    compile("org.springframework.boot:spring-boot-starter-web")
    compile("org.springframework.boot:spring-boot-starter-security")
    testCompile("org.springframework.boot:spring-boot-starter-test")
}

application.properties配置中添加认证用户的密码信息:

1
security.user.password=password

创建启动类Application:

1
2
3
4
5
6
7
8
9
10
11
package com.cjoop;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

@SpringBootApplication
public class Application {
    public static void main(String[] args) {
        SpringApplication.run(Application.class,args);
    }
}

创建控制类IndexController：

这里我们提供一个简单的API进行访问。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
package com.cjoop.com.cjoop.controller;

import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import java.util.HashMap;
import java.util.Map;
import java.util.UUID;

/**
 * Created by chenjun on 2016-08-19.
 */
@RestController
public class IndexController {
    @RequestMapping("/resource")
    public Map<String,Object> home(){
        Map<String,Object> model = new HashMap<String,Object>();
        model.put("id", UUID.randomUUID().toString());
        model.put("content", "Hello World");
        return model;
    }
}

后端的程序已经准备完成。

前端代码的准备

创建首页内容index.html，用来展示后端的数据。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Hello AngularJS</title>
    <link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <style type="text/css">
        [ng\:cloak], [ng-cloak], .ng-cloak {
            display: none !important;
        }
    </style>
</head>
<body ng-app="hello">
<div class="container">
    <h1>Greeting</h1>
    <div ng-controller="home as home" ng-cloak class="ng-cloak">
        <p>The ID is {{home.greeting.id}}</p>
        <p>The content is {{home.greeting.content}}</p>
    </div>
</div>

<script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
<script src="//cdn.bootcss.com/angular.js/1.5.8/angular.min.js" type="text/javascript"></script>
<script src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="js/hello.js"></script>
</body>
</html>

hello.js负责请求后端的数据。

1
2
3
4
5
6
angular.module('hello', []).controller('home', function($http) {
    var self = this;
    $http.get('resource/').then(function(response) {
        self.greeting = response.data;
    })
});

测试程序

执行命令 gradle bootRun,访问地址http://localhost:8080/ ,要求你输入身份验证信息，用户名默认为user,密码为配置文件里设置的password,打开浏览器的调试面板，看到Rquest Headers包含有认证信息：

1
Authorization:Basic dXNlcjpwYXNzd29yZA==

使用curl命令去访问/resource请求，得到以下结果：

1
2
3
4
$ curl http://localhost:8080/resource
  % Total    % Received % Xferd  Average Speed   Time    Time     Time  Current
                                 Dload  Upload   Total   Spent    Left  Speed
100   150    0   150    0     0   1376      0 --:--:-- --:--:-- --:--:--  1612{"      timestamp":1471596710281,"status":401,"error":"Unauthorized","message":"Full authentication is required to access this resource","path":"/resource"}

没有权限不能访问/resource,我们带上认证信息重试，访问成功：

1
2
3
4
$ curl -u user:password http://localhost:8080/resource
  % Total    % Received % Xferd  Average Speed   Time    Time     Time  Current
                                 Dload  Upload   Total   Spent    Left  Speed
100    69    0    69    0     0   2225      0 --:--:-- --:--:-- --:--:--  4600{"content":"Hello World","id":"5a1f806f-b2d3-4545-9bde-b1596f69bb96"}

还可以把浏览器产生的头信息带上进行访问，也成功。

1
2
3
4
$ curl -H "Authorization:Basic dXNlcjpwYXNzd29yZA==" http://localhost:8080/resource
  % Total    % Received % Xferd  Average Speed   Time    Time     Time  Current
                                 Dload  Upload   Total   Spent    Left  Speed
100    69    0    69    0     0   2225      0 --:--:-- --:--:-- --:--:--  4600{"content":"Hello World","id":"61114583-6c61-491b-ae42-1400133b8aa5"}

以上就是最简答的请求认证方式。