TOC

Angular 4 Upgrade für Spring Security OAuth

1. Überblick

In diesem kurzen Lernprogramm werden wir unsere bestehende Angular-Anwendungsverbindung aktualisieren:/rest-api-spring-oauth2-anglejs[beschrieben], um Angular 4 anstelle von AngularJS zu verwenden.

2. Setup Angular4

Zunächst verwenden wir Angular CLI , um unsere Front-End-Module zu erstellen und zu verwalten.

Dann, Include Maven Abhängigkeiten , müssen wir frontend-maven-plugin verwenden, um unser Angular-Projekt mit maven zu erstellen: 

<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>

Und schließlich neues Modul mit Angular CLI erzeugen: 

ng new oauthApp

Beachten Sie, dass wir zwei Front-End-Module haben werden - eines für den Passwortfluss und das andere für den impliziten Fluss.

In den folgenden Abschnitten werden wir die Angular-App-Logik für jedes Modul diskutieren.

3. Passwortfluss mit Angular4

Lassen Sie uns als Nächstes die Logik unseres Password Flow-Front-End-Moduls diskutieren.

3.1. App Service

Beginnen wir mit unserem AppService - app.service.ts -, der die Logik für Server-Interaktionen enthält:

  • obtainAccessToken () : zum Abrufen des Zugriffstokens unter Angabe der Anmeldeinformationen

  • saveToken () : um unser Zugriffstoken mit ng2-cookies in einem Cookie zu speichern

Bibliothek ** getResource () : um ein Foo-Objekt mit seiner ID vom Server abzurufen

  • checkCredentials () : um zu prüfen, ob der Benutzer angemeldet ist oder nicht

  • logout () : um das Cookie für Zugriffstoken zu löschen und den Benutzer abzumelden 

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. Anmeldekomponente

Als Nächstes betrachten wir unseren LoginComponent , der für das Anmeldeformular verantwortlich ist: 

@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. Hauptkomponente

Als nächstes unser HomeComponent , das für die Anzeige und Bearbeitung unserer Homepage verantwortlich ist: 

@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. Foo-Komponente

Schließlich unser FooComponent , um unsere Foo-Details anzuzeigen: 

@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. App-Komponente

Unsere einfache AppComponent als Wurzelkomponente: 

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

export class AppComponent {}

Und das AppModule , in dem wir alle unsere Komponenten, Services und Routen einwickeln: 

@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. Impliziter Fluss

Als Nächstes konzentrieren wir uns auf das Implicit Flow-Modul.

4.1. App Service

In ähnlicher Weise beginnen wir mit unserem Service, aber dieses Mal verwenden wir die Bibliothek angular-oauth2-oidc , anstatt selbst Zugriffstoken zu erhalten: 

@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. Hauptkomponente

Unser HomeComponent zur Handhabung unserer einfachen Startseite: 

@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. Foo-Komponente

Unser FooComponent entspricht genau dem Passwortflussmodul.

4.4. App-Modul

Zum Schluss unser AppModule : 

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

5. Führen Sie das Frontend aus

{leer} 1. Um eines unserer Frontend-Module auszuführen, müssen wir zuerst die App erstellen: 

mvn clean install

{leer} 2. Dann müssen wir zu unserem Angular App-Verzeichnis navigieren: 

cd src/main/resources

{leer} 3. Zum Schluss starten wir unsere App: 

npm start

Der Server startet standardmäßig an Port 4200, um den Port eines Moduls zu ändern 

"start": "ng serve"

in package.json , damit es auf Port 8086 ausgeführt wird, zum Beispiel: 

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

6. Fazit

In diesem kurzen Tutorial haben wir gesehen, wie wir eine AngularJS-Anwendung mithilfe eines Angular4-Frontends auf eine aktualisieren können.

Den vollständigen Quellcode finden Sie wie immer unter über GitHub .

Related