zoukankan      html  css  js  c++  java
  • OIDC in Angular 6

     参照 草根专栏- ASP.NET Core + Ng6 实战:https://v.qq.com/x/page/i07702h18nz.html

    1、 OIDC-Client

              https://github.com/IdentityModel/oidc-client-js

              npm install oidc-client --save

    2、建立   open-id-connect.service.ts   

            ng g s shared/oidc/openIdConnect

    3、 environment,配置oidc客户端

    export const environment = {
      production: false ,
      apiUrlBase: '/api',
      openIdConnectSettings: {
        authority: 'https://localhost:5001/',
        client_id: 'blog-client',
        redirect_uri: 'http://localhost:4200/signin-oidc',
        scope: 'openid profile email restapi',
        response_type: 'id_token token',
        post_logout_redirect_uri: 'http://localhost:4200/',
        automaticSilentRenew: true,
        silent_redirect_uri: 'http://localhost:4200/redirect-silentrenew'
      }
    };

    4、BlogIdp项目,config.cs 文件配置客户端访问:

                    // Angular client using implicit flow
                    new Client
                    {
                        ClientId = "blog-client",
                        ClientName = "Blog Client",
                        ClientUri = "http://localhost:4200",
    
                        AllowedGrantTypes = GrantTypes.Implicit,
                        AllowAccessTokensViaBrowser = true,
                        RequireConsent = false,
                        AccessTokenLifetime = 180,
    
                        RedirectUris =
                        {
                            "http://localhost:4200/signin-oidc",
                            "http://localhost:4200/redirect-silentrenew"
                        },
    
                        PostLogoutRedirectUris = { "http://localhost:4200/" },
                        AllowedCorsOrigins = { "http://localhost:4200" },
    
                        AllowedScopes = {
                            IdentityServerConstants.StandardScopes.OpenId,
                            IdentityServerConstants.StandardScopes.Profile,
                            IdentityServerConstants.StandardScopes.Email,
                            "restapi" }
                    }

    5、Blogidp项目配置跨域:

                services.AddCors(options =>
                {
                    options.AddPolicy("AngularDev", policy =>
                    {
                        policy.WithOrigins("http://localhost:4200")
                            .AllowAnyHeader()
                            .AllowAnyMethod();
                    });
                });
            public void Configure(IApplicationBuilder app)
            {
     
                app.UseCors();
     
            }

    6、open-id-connect.service.ts 添加登陆操作:

    import { Injectable } from '@angular/core';
    import { UserManager, User } from 'oidc-client';
    import { environment } from '../../../environments/environment';
    import { ReplaySubject } from 'rxjs';
    
    @Injectable({
      providedIn: 'root'
    })
    export class OpenIdConnectService {
    
      private userManager: UserManager = new UserManager(environment.openIdConnectSettings);
    
      private currentUser: User;
    
      userLoaded$ = new ReplaySubject<boolean>(1);
    
      get userAvailable(): boolean {
        return this.currentUser != null;
      }
    
      get user(): User {
        return this.currentUser;
      }
    
      constructor() {
        this.userManager.clearStaleState();
    
        this.userManager.events.addUserLoaded(user => {
          if (!environment.production) {
            console.log('User loaded.', user);
          }
          this.currentUser = user;
          this.userLoaded$.next(true);
        });
    
        this.userManager.events.addUserUnloaded((e) => {
          if (!environment.production) {
            console.log('User unloaded');
          }
          this.currentUser = null;
          this.userLoaded$.next(false);
        });
      }
    
      triggerSignIn() {
        this.userManager.signinRedirect().then(() => {
          if (!environment.production) {
            console.log('Redirection to signin triggered.');
          }
        });
      }
    
      handleCallback() {
        this.userManager.signinRedirectCallback().then(user => {
          if (!environment.production) {
            console.log('Callback after signin handled.', user);
          }
        });
      }
    
      handleSilentCallback() {
        this.userManager.signinSilentCallback().then(user => {
          this.currentUser = user;
          if (!environment.production) {
            console.log('Callback after silent signin handled.', user);
          }
        });
      }
    
      triggerSignOut() {
        this.userManager.signoutRedirect().then(resp => {
          if (!environment.production) {
            console.log('Redirection to sign out triggered.', resp);
          }
        });
      }
    
    }
    View Code

    7、添加  signin-oidc component 

    8、添加 redirect-silent-renew component 

    9、 ng g guard shared/oidc/RequireAuthenticatedUserRoute --spec false

            触发登陆界面;

            app.module  Provided  添加   RequireAuthenticatedUserRouteGuard , OpenIdConnectService

    10、blog-routing.module.ts 注册路由:

    const routes: Routes = [
      {
        path: '', component: BlogAppComponent,
        children : [
          {path: 'post-list' , component: PostListComponent, canActivate: [RequireAuthenticatedUserRouteGuard] },
          {path: '**' , redirectTo: 'post-list' }
        ]
    }

    11、配置登陆路由: app.module

    const routers: Routes = [
      { path: 'blog', loadChildren: './blog/blog.module#BlogModule' },
      { path: 'signin-oidc', component: SigninOidcComponent },
      { path: 'redirect-silentrenew', component: RedirectSilentRenewComponent },
      { path: '**', redirectTo: 'blog' }
    ];

    12、添加拦截器:authorization-header-interceptor.interceptor.ts  ,在blog.module.ts 里面配置

      providers: [
        PostService,
        {
          provide: HTTP_INTERCEPTORS,
          useClass: AuthorizationHeaderInterceptor,
          multi: true
        }
      ]
  • 相关阅读:
    ElasticSearch的高级复杂查询:非聚合查询和聚合查询
    js上传文件前判断获取文件大小并且加以判断
    如何使用IE9浏览器自带开发人员工具捕获网页请求
    目标的滚动条样式设置
    springmvc配置数据源方式
    SSO单点登录一:cas单点登录防止登出退出后刷新后退ticket失效报500错,也有退出后直接重新登录报票根验证错误
    解决myeclipse中新建javaweb工程,无法使用Web App Libraries问题
    敏捷宣言(十七)
    敏捷宣言(十六)
    敏捷宣言(十五)
  • 原文地址:https://www.cnblogs.com/fuyouchen/p/9603474.html
Copyright © 2011-2022 走看看