后台代码: https://github.com/solenovex/asp.net-core-2.0-web-api-boilerplate
前台代码: https://github.com/solenovex/angular-4-client-panel-app
下面将开发登陆和授权的部分, 这里要用到identity server 4.
在VS解决方案中设置多个项目同时启动:
AspNetIdentityAuthorizationServer就是authorization server. 它的地点是 :5000
CoreApi.Web作为api, 都已经配置好了.它的地点是 :5001
Login 登陆由于我们使用的是Identity Server 4的登录页面, 所以angular项目里面无需登录页面, 把login相关的文件删除...........
登陆需要使用到oidc-client.js所以通过npm安置:
npm install --save oidc-client
Auth Service需要登陆处事 auth.service:
ng g s services/auth
打开auth.services.ts:
import { Injectable, OnInit, EventEmitter } from ‘@angular/core‘; import { Observable } from ‘rxjs/Observable‘; import { User, UserManager, Log } from ‘oidc-client‘; import ‘rxjs/add/observable/fromPromise‘; const config: any = { authority: ‘:5000‘, client_id: ‘corejs‘, redirect_uri: ‘:4200/login-callback‘, response_type: ‘id_token token‘, scope: ‘openid profile coreapi‘, post_logout_redirect_uri: ‘:4200/index.html‘, }; Log.logger = console; Log.level = Log.DEBUG; @Injectable() export class AuthService implements OnInit { private manager: UserManager = new UserManager(config); public loginStatusChanged: EventEmitter<User>; constructor() { this.loginStatusChanged = new EventEmitter(); } ngOnInit() { } login() { this.manager.signinRedirect(); } loginCallBack() { return Observable.create(observer => { Observable.fromPromise(this.manager.signinRedirectCallback()) .subscribe(() => { this.tryGetUser().subscribe((user: User) => { this.loginStatusChanged.emit(user); observer.next(user); observer.complete(); }, e => { observer.error(e); }); }); }); } checkUser() { this.tryGetUser().subscribe((user: User) => { this.loginStatusChanged.emit(user); }, e => { this.loginStatusChanged.emit(null); }); } private tryGetUser() { return Observable.fromPromise(this.manager.getUser()); } logout() { this.manager.signoutRedirect(); } }
config是针对identity server 4处事器的配置, authorization server的地点是 :5000, 登陆告成后跳转后来的地点是: :4200/login-callback
此中的UserManager就是oidc-client里面的对象, 它卖力措置惩罚惩罚登录登出和获取当前登录用户等操纵.
这里login()要领被挪用后会直接跳转到 authorization server的登录页面.
登录告成后会跳转到一个callback页面, 里面需要挪用一个callback要领, 这就是loginCallback()要领.
loginStatusChanged是一个EventEmitter, 任何订阅了这个事件的component, 城市在登录用户变革时(登录/退出)触发component里面自界说的事件.
logout()是退出, 挪用要领后也会跳转到authorization server的页面.
最后别忘了在app.module里面注册:
providers: [ ClientService, AuthService ],
登陆告成后跳转回失页面
成立一个跳转回失的component和路由:
ng g c components/loginCallback
改削app.module的路由:
const appRoutes: Routes = [ { path: ‘‘, component: DashboardComponent }, { path: ‘login-callback‘, component: LoginCallbackComponent }, { path: ‘register‘, component: RegisterComponent }, { path: ‘add-client‘, component: AddClientComponent }, { path: ‘client/:id‘, component: ClientDetailsComponent }, { path: ‘edit-client/:id‘, component: EditClientComponent } ];
打开login-callback.component.ts:
import { Component, OnInit } from ‘@angular/core‘; import { AuthService } from ‘../../services/auth.service‘; import { Router } from ‘@angular/router‘; import { User } from ‘oidc-client‘; @Component({ selector: ‘app-login-callback‘, templateUrl: ‘./login-callback.component.html‘, styleUrls: [‘./login-callback.component.css‘] }) export class LoginCallbackComponent implements OnInit { constructor( private authService: AuthService, private router: Router ) { } ngOnInit() { this.authService.loginCallBack().subscribe( (user: User) => { console.log(‘login callback user:‘, user); if (user) { this.router.navigate([‘/‘]); } } ); } }
这里主要是挪用oidc的回失函数. 然后跳转到主页.
html:
<p> 登录告成! </p>
这个html, 根基是看不见的.
改削Navbarnavbar.component.html: