identityServer4 implicitFlow

是根据杨旭大神的视频抄的 

 

 

 

 

//向授权服务器添加client配置

 1 new Client
 2                 {
 3                     ClientId = "angular-client",
 4                     ClientName =  "Angular SPA 客户端",
 5                     ClientUri = "http://localhost:4200",
 6 
 7                     AllowedGrantTypes = GrantTypes.Implicit,
 8                     AllowAccessTokensViaBrowser = true,
 9                     RequireConsent = true,
10                     AccessTokenLifetime = 60 * 5,
11 
12                     RedirectUris =
13                     {
14                         "http://localhost:4200/signin-oidc",
15                         "http://localhost:4200/redirect-silentrenew"
16                     },
17 
18                     PostLogoutRedirectUris =
19                     {
20                         "http://localhost:4200"
21                     },
22 
23                     AllowedCorsOrigins =
24                     {
25                         "http://localhost:4200"
26                     },
27 
28                     AllowedScopes = {
29                         "api1",
30                         IdentityServerConstants.StandardScopes.OpenId,
31                         IdentityServerConstants.StandardScopes.Email,
32                         IdentityServerConstants.StandardScopes.Address,
33                         IdentityServerConstants.StandardScopes.Phone,
34                         IdentityServerConstants.StandardScopes.Profile
35                     }
36                 }

 

配置environment.ts

 1 export const idpBase = 'http://localhost:5000';
 2 export const apiBase = 'http://localhost:5001';
 3 export const angularBase = 'http://localhost:4200';
 4 
 5 export const environment = {
 6   production: false,
 7   apiBase,
 8   openIdConnectSettings: {
 9     authority: `${idpBase}`,
10     client_id: 'angular-client',
11     redirect_uri: `${angularBase}/signin-oidc`,
12     post_logout_redirec_uri: `${angularBase}/`,
13     silent_redirect_uri: `${angularBase}/redirect-silentrenew`,
14     scope: 'api1 openid profile address email phone',
15     response_type: 'id_token token',
16     automaticSilentRenew: true
17   }
18 };

 

一篇文章有介绍 https://www.scottbrady91.com/Angular

oidc-service.ts 的配置

 1 import { Injectable } from '@angular/core';
 2 import { UserManager, User } from 'oidc-client';
 3 import { environment } from 'src/environments/environment';
 4 import { ReplaySubject } from 'rxjs';
 5 
 6 @Injectable({
 7   providedIn: 'root'
 8 })
 9 export class OpenIdConnectService {
10   private userManager = new UserManager(environment.openIdConnectSettings);
11 
12   private currentUser: User;
13 
14   get userAvailable(): boolean {
15     return !!this.currentUser;
16   }
17 
18   get user(): User {
19     return this.currentUser;
20   }
21 
22   userLoaded$ = new ReplaySubject<boolean>(1);
23 
24   constructor() {
25     this.userManager.clearStaleState();
26 
27     this.userManager
28       .getUser()
29       .then(user => {
30         if (user) {
31           this.currentUser = user;
32           this.userLoaded$.next(true);
33         } else {
34           this.currentUser = null;
35           this.userLoaded$.next(false);
36         }
37       })
38       .catch(err => {
39         this.currentUser = null;
40         this.userLoaded$.next(false);
41       });
42 
43     this.userManager.events.addUserLoaded(user => {
44       console.log('user loaded:', user);
45       this.currentUser = user;
46       this.userLoaded$.next(true);
47     });
48 
49     // this.userManager.events.addUserUnloaded(user => {
50     //   console.log('user unloaded');
51     //   this.currentUser = null;
52     //   this.userLoaded$.next(false);
53     // });
54 
55     this.userManager.events.addUserUnloaded(() =>{
56          console.log('user unloaded');
57          this.currentUser = null;
58          this.userLoaded$.next(false);
59     });
60   }
61 
62   triggerSignIn() {
63     this.userManager.signinRedirect().then(() => {
64       console.log('triggerSignIn');
65     });
66   }
67 
68   handleCallback() {
69     this.userManager.signinRedirectCallback().then(user => {
70       this.currentUser = user;
71       console.log('handleCallback');
72     });
73   }
74 
75   handleSilentCallback() {
76     this.userManager.signinSilentCallback().then(user => {
77       this.currentUser = user;
78       console.log('handleSilentCallback');
79     });
80   }
81 
82   triggerSignOut() {
83     this.userManager.signoutRedirect().then(res => {
84       console.log('triggerSignOut');
85     });
86   }
87 }

 

 

 

 

     跳转到      

 

//配置授权后回调页面

 

//配置刷新页面

 

//配置刚才两个页面的路由

 

 这样就ok了

 

 //对资源添加权限

 

 

 

//这时访问资源报401没有权限,需要我们每次请求都将accessToken带上

在angular中做一个请求的拦截器

 1 import { HttpInterceptor, HttpRequest, HttpHandler, HttpEvent } from '@angular/common/http';
 2 import { Injectable } from '@angular/core';
 3 import { OpenIdConnectService } from './open-id-connect.service';
 4 import { Observable } from 'rxjs';
 5 
 6 @Injectable()
 7 export class AuthorizationHeaderInterceptor implements HttpInterceptor {
 8   constructor(private oidc: OpenIdConnectService) {}
 9 
10   intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
11     if (this.oidc.userAvailable) {
12       request = request.clone({
13         setHeaders: {
14           Authorization: `${this.oidc.user.token_type} ${this.oidc.user.access_token}`
15         }
16       });
17     }
18 
19     return next.handle(request);
20   }
21 }

//注册拦截器

 

//如果登出的时候没有跳回angular项目,停留在id4授权服务器上,需要配置下面的属性

 

转载于:https://www.cnblogs.com/Spinoza/p/11391600.html