0. usage: tool yo@1.8.5

1. yo
	
	a: Aspnetcore Spa
	b: Angular
	c: project.json
	
2. VS2015 Open file: test.xproj 

3. Add OIDC-Client to package.json
	webpack --config webpack.config.vendor.js
	
4. home.component.html

	add login link:

		<li><a (click)="login()">Login</a></li>

5. home.component.ts

add:
	import { Component } from '@angular/core';
	import { UserManagerSettings, UserManager, User } from 'oidc-client';

	@Component({
		selector: 'home',
		templateUrl: './home.component.html'
	})
	export class HomeComponent {
		private mgr: UserManager = null;
	
	//...
	
	login() {
		var settings = {
			authority: "https://localhost:44322", // local identity server
			client_id: "client",
			redirect_uri: `https://localhost:44336/callback`,
			post_logout_redirect_uri: 'https://localhost:44336',
			response_type: "id_token token",
			scope: "openid profile auth"
		};
		this.mgr = new UserManager(settings);
	}
}

6. add new component callback

	a: add folder ClientApp\app\components\callback
	b: add file callback.component.html
		content:
			
<a (click)="callback()">Callback</a>
<br/>
{{username}}

	c: add file callback.component.ts
		content:
		
import { Component } from '@angular/core';
import { UserManager, User } from 'oidc-client';
import { OnInit } from "@angular/core";
import { NgZone } from '@angular/core';

@Component({
    selector: 'callback',
    templateUrl: './callback.component.html'
})
export class CallbackComponent implements OnInit {
    private mgr: UserManager = null;
    public username: string;

    constructor (private ngZone: NgZone) {
    }

    ngOnInit() {
        this.ngZone.runOutsideAngular(() => {
             setTimeout(() => this.callback(), 1000)});
    }

    callback() {
        if (this.mgr == null) {
			var settings = {
				authority: "https://localhost:44322", // local identity server
				client_id: "client",
				redirect_uri: `https://localhost:44336/callback`,
				post_logout_redirect_uri: 'https://localhost:44336',
				response_type: "id_token token",
				scope: "openid profile auth"
			};
			this.mgr = new UserManager(settings);
        }

        this.ngZone.run(
            () => this.mgr.signinRedirectCallback().then(
                user => this.loginUser(user),
                error => this.errorUser(error)));
    }

    loginUser(user: User): void {
        this.username = "USER: " + user.profile.name;
        //alert("USER " + this.username);
    }

    errorUser(error: Object): void {
        this.username = "ERROR: " + error;
        //alert("ERROR " + error);
    }
}


7. change app.modules.ts
	add import CallbackComponent:
	
import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { UniversalModule } from 'angular2-universal';
import { AppComponent } from './components/app/app.component'
import { NavMenuComponent } from './components/navmenu/navmenu.component';
import { HomeComponent } from './components/home/home.component';
import { FetchDataComponent } from './components/fetchdata/fetchdata.component';
import { CounterComponent } from './components/counter/counter.component';
import { CallbackComponent } from './components/callback/callback.component';

@NgModule({
    bootstrap: [ AppComponent ],
    declarations: [
        AppComponent,
        NavMenuComponent,
        CounterComponent,
        FetchDataComponent,
        HomeComponent,
        CallbackComponent
    ],
    imports: [
        UniversalModule, // Must be first import. This automatically imports BrowserModule, HttpModule, and JsonpModule too.
        RouterModule.forRoot([
            { path: '', redirectTo: 'home', pathMatch: 'full' },
            { path: 'home', component: HomeComponent },
            { path: 'callback', component: CallbackComponent },
            { path: 'counter', component: CounterComponent },
            { path: 'fetch-data', component: FetchDataComponent },
            { path: '**', redirectTo: 'home' }
        ])
    ]
})
export class AppModule {
}