TOC

Обновление Angular 4 для Spring Security OAuth

1. Обзор

В этом кратком руководстве мы собираемся обновить нашу существующую ссылку на приложение Angular:/rest-api-spring-oauth2-angularjs[описано]здесь, чтобы использовать Angular 4 вместо AngularJS.

2. Настройка Angular4

Во-первых, мы будем использовать Angular CLI для создания и управления нашими интерфейсными модулями.

  • Во-первых, мы установим node и npm ** - так как Angular CLI - это инструмент npm.

Затем, Включите зависимости Maven , нам нужно использовать frontend-maven-plugin , чтобы построить наш проект Angular с использованием maven: 

<build>
    <plugins>
        <plugin>
            <groupId>com.github.eirslett</groupId>
            <artifactId>frontend-maven-plugin</artifactId>
            <version>1.3</version>
            <configuration>
                <nodeVersion>v6.10.2</nodeVersion>
                <npmVersion>3.10.10</npmVersion>
                <workingDirectory>src/main/resources</workingDirectory>
            </configuration>
            <executions>
                <execution>
                    <id>install node and npm</id>
                    <goals>
                        <goal>install-node-and-npm</goal>
                    </goals>
                </execution>
                <execution>
                    <id>npm install</id>
                    <goals>
                        <goal>npm</goal>
                    </goals>
                </execution>
                <execution>
                    <id>npm run build</id>
                    <goals>
                        <goal>npm</goal>
                    </goals>
                    <configuration>
                        <arguments>run build</arguments>
                    </configuration>
                </execution>
            </executions>
        </plugin>
    </plugins>
</build>

И наконец, сгенерируйте новый Модуль , используя Angular CLI: 

ng new oauthApp

Обратите внимание, что у нас будет два интерфейсных модуля - один для потока паролей, а другой для неявного потока.

В следующих разделах мы обсудим логику приложения Angular для каждого модуля.

3. Поток паролей с использованием Angular4

Далее давайте обсудим логику нашего модуля интерфейса потока паролей.

3.1. Служба приложений

Давайте начнем с нашего AppService - расположенного по адресу app.service.ts - который содержит логику взаимодействия с сервером:

  • obtainAccessToken () : для получения токена доступа с указанными учетными данными пользователя

  • saveToken () : чтобы сохранить наш токен доступа в куки, используя ng2-куки

библиотека ** getResource () : получить объект Foo с сервера, используя его идентификатор

  • checkCredentials () : проверить, вошел ли пользователь в систему или нет

  • logout () : удалить cookie токена доступа и выйти из системы 

export class Foo {
  constructor(
    public id: number,
    public name: string) { }
}

@Injectable()
export class AppService {
  constructor(
    private __router: Router, private __http: Http){}

  obtainAccessToken(loginData){
    let params = new URLSearchParams();
    params.append('username',loginData.username);
    params.append('password',loginData.password);
    params.append('grant__type','password');
    params.append('client__id','fooClientIdPassword');
    let headers = new Headers({'Content-type': 'application/x-www-form-urlencoded; charset=utf-8', 'Authorization': 'Basic '+btoa("fooClientIdPassword:secret")});
    let options = new RequestOptions({ headers: headers });

    this.__http.post('http://localhost:8081/spring-security-oauth-server/oauth/token', params.toString(), options)
      .map(res => res.json())
      .subscribe(
        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);
    this.__router.navigate(['/']);
  }

  getResource(resourceUrl) : Observable<Foo>{
    var headers = new Headers({'Content-type': 'application/x-www-form-urlencoded; charset=utf-8', 'Authorization': 'Bearer '+Cookie.get('access__token')});
    var options = new RequestOptions({ headers: headers });
    return this.__http.get(resourceUrl, options)
                   .map((res:Response) => res.json())
                   .catch((error:any) => Observable.throw(error.json().error || 'Server error'));
  }

  checkCredentials(){
    if (!Cookie.check('access__token')){
        this.__router.navigate(['/login']);
    }
  }

  logout() {
    Cookie.delete('access__token');
    this.__router.navigate(['/login']);
  }
}

3.2. Компонент входа

Далее, давайте взглянем на нашего LoginComponent , который отвечает за форму входа в систему: 

@Component({
  selector: 'login-form',
  providers:[AppService],
  template: `<h1>Login</h1>
    <input type="text"[(ngModel)]="loginData.username"/>
    <input type="password" [(ngModel)]="loginData.password"/>
    <button (click)="login()" type="submit">Login</button>`
})
export class LoginComponent {
    public loginData = {username: "", password: ""};

    constructor(private __service:AppService) {}

    login() {
        this.__service.obtainAccessToken(this.loginData);
    }
}

3.3. Домашний компонент

Затем наш HomeComponent , который отвечает за отображение и манипулирование нашей домашней страницей 

@Component({
    selector: 'home-header',
    providers:[AppService],
  template: `<span>Welcome !!</span>
    <a (click)="logout()" href="#">Logout</a>
    <foo-details></foo-details>`
})

export class HomeComponent {
    constructor(
        private __service:AppService){}

    ngOnInit(){
        this.__service.checkCredentials();
    }

    logout() {
        this.__service.logout();
    }
}

3.4. Фу Компонент

Наконец, наш FooComponent для отображения наших деталей Foo: 

@Component({
  selector: 'foo-details',
  providers:[AppService],
  template: `<h1>Foo Details</h1>
    <label>ID</label> <span>{{foo.id}}</span>
    <label>Name</label> <span>{{foo.name}}</span>
    <button (click)="getFoo()" type="submit">New Foo</button>`
})

export class FooComponent {
    public foo = new Foo(1,'sample foo');
    private foosUrl = 'http://localhost:8082/spring-security-oauth-resource/foos/';

    constructor(private __service:AppService) {}

    getFoo(){
        this.__service.getResource(this.foosUrl+this.foo.id)
          .subscribe(
            data => this.foo = data,
            error =>  this.foo.name = 'Error');
    }
}

3.5. Компонент приложения

Наш простой AppComponent действует как корневой компонент: 

@Component({
    selector: 'app-root',
    template: `<router-outlet></router-outlet>`
})

export class AppComponent {}

И AppModule , где мы упаковываем все наши компоненты, сервисы и маршруты: 

@NgModule({
  declarations:[    AppComponent,
    HomeComponent,
    LoginComponent,
    FooComponent
 ],
  imports:[    BrowserModule,
    FormsModule,
    HttpModule,
    RouterModule.forRoot([     { path: '', component: HomeComponent },
    { path: 'login', component: LoginComponent }])
 ],
  providers:[],
  bootstrap:[AppComponent]})
export class AppModule { }

4. Неявный поток

Далее мы сосредоточимся на модуле Implicit Flow.

4.1. Служба приложений

Аналогично, мы начнем с нашего сервиса, но на этот раз мы будем использовать библиотеку angular-oauth2-oidc вместо того, чтобы сами получать токен доступа: 

@Injectable()
export class AppService {

  constructor(
    private __router: Router, private __http: Http, private oauthService: OAuthService){
        this.oauthService.loginUrl = 'http://localhost:8081/spring-security-oauth-server/oauth/authorize';
        this.oauthService.redirectUri = 'http://localhost:8086/';
        this.oauthService.clientId = "sampleClientId";
        this.oauthService.scope = "read write foo bar";
        this.oauthService.setStorage(sessionStorage);
        this.oauthService.tryLogin({});
    }

  obtainAccessToken(){
      this.oauthService.initImplicitFlow();
  }

  getResource(resourceUrl) : Observable<Foo>{
    var headers = new Headers({'Content-type': 'application/x-www-form-urlencoded; charset=utf-8', 'Authorization': 'Bearer '+this.oauthService.getAccessToken()});
    var options = new RequestOptions({ headers: headers });
    return this.__http.get(resourceUrl, options)
      .map((res:Response) => res.json())
      .catch((error:any) => Observable.throw(error.json().error || 'Server error'));
  }

  isLoggedIn(){
    if (this.oauthService.getAccessToken() === null){
       return false;
    }
    return true;
  }

  logout() {
      this.oauthService.logOut();
      location.reload();
  }
}

4.2. Домашний компонент

Наш HomeComponent для обработки нашей простой домашней страницы: 

@Component({
    selector: 'home-header',
    providers:[AppService],
  template: `
    <button ** ngIf="!isLoggedIn" (click)="login()" type="submit">Login</button>
    <div ** ngIf="isLoggedIn">
        <span>Welcome !!</span>
        <a (click)="logout()" href="#">Logout</a>
        <br/>
        <foo-details></foo-details>
    </div>`
})

export class HomeComponent {
    public isLoggedIn = false;

    constructor(
        private __service:AppService){}

    ngOnInit(){
        this.isLoggedIn = this.__service.isLoggedIn();
    }

    login() {
        this.__service.obtainAccessToken();
    }

    logout() {
        this.__service.logout();
    }
}

4.3. Фу Компонент

Наш FooComponent точно такой же, как в модуле потока паролей.

4.4. Модуль приложения

Наконец, наш AppModule : 

@NgModule({
  declarations:[    AppComponent,
    HomeComponent,
    FooComponent
 ],
  imports:[    BrowserModule,
    FormsModule,
    HttpModule,
    OAuthModule.forRoot(),
    RouterModule.forRoot([     { path: '', component: HomeComponent }])
 ],
  providers:[],
  bootstrap:[AppComponent]})
export class AppModule { }

5. Запустите интерфейс

{Пусто} 1. Чтобы запустить любой из наших интерфейсных модулей, нам нужно сначала создать приложение: 

mvn clean install

{Пусто} 2. Затем нам нужно перейти в наш каталог приложений Angular: 

cd src/main/resources

{Пусто} 3. Наконец, мы запустим наше приложение: 

npm start

Сервер запустится по умолчанию на порту 4200, для изменения порта любого модуля измените 

"start": "ng serve"

в package.json , чтобы он работал на порту 8086, например: 

"start": "ng serve --port 8086"

6. Заключение

В этом кратком руководстве мы увидели, как мы можем обновить приложение AngularJS до приложения, использующего внешний интерфейс Angular4.

Как всегда, полный исходный код можно найти over на GitHub

Related