Angular中的OIDC的使用

Angular具体项目的使用

首先angular项目使用到oidc-client第三方库

前端的应用流程

访问前端地址, 如果没有登录用户, 那么跳转到Authorization Server进行登陆, 同意后, 返回到前端的网站.
如果前端网站有登录的用户, 那么在用户快过期的时候自动刷新token. 以免登陆过期.
前端应用访问api时, 自动拦截所有请求, 把登陆用户的access token添加到请求的authorization header, 然后再发送给 web api.

所以这将涉及到AuthService, Auth-token.interceptor,AuthGuard等文件的使用

// 创建AuthService

import { Injectable, NgZone } from '@angular/core';
import { User, UserManager, WebStorageStateStore } from 'oidc-client';
import { ENVIRONMENT } from '@env/environment';
import { SessionStorageService } from '@shared/services';

@Injectable()
export class AuthService {
  public isLoggedIn: boolean = false;
  public manager: UserManager; // UserManager就是oidc-client里面的东西. 我们主要是用它来操作.
  public accessToken: string = '';
  public currentUser: User;
  constructor(private _ngZone: NgZone, private _session: SessionStorageService) {
    const origin = `${window.location.protocol}//${window.location.hostname}${window.location.port ?
      (':' + window.location.port) : ''}`;
    const settings = {
      authority: '',// 就是authorization server(上述的QQ)的地址.
      client_id: '' // 发起认证请求的客户端的唯一标识，这个客户端事先已经在oidc-server.dev这个站点注册过了,
      response_type: 'id_token token'// 区别于oauth2授权请求的一点，必须包含有id_token这一项,
      scope: '' //区别于oauth2授权请求的一点，必须包含有openid这一项,
      redirect_uri: '',// 是登陆成功后跳转回来的地址
      post_logout_redirect_uri: origin, // OIDC / OAuth2注销后重定向UR
      staleStateAge: ,// 一个数字（以秒为单位），指示用于授权被认为已放弃并可以清除的请求的状态的存储状态
      automaticSilentRenew: boolean, //为true是启用自动安静刷新token.
    };
    this._ngZone.runOutsideAngular(() => {
      this.manager = new UserManager(settings);
    });

  }

  public login(): void {
  // 方法里面的signInRedirect()会直接跳转到Authorization Server的登陆窗口
    this.manager.signinRedirect();
  }

  public async getUser(): Promise {
    const user = await this.manager.getUser();
    this.currentUser = user;
    if (user) {
      this.accessToken = user.access_token;
      this.isLoggedIn = true;
    }
    return user;
  }

  public async signinRedirectCallback(): Promise {
    const user = await this.manager.signinRedirectCallback();
  }

  public getToken(): string {
    return this.accessToken;
  }

  public logout(): void {
    this.isLoggedIn = false;
    this._session.clearAll();
    localStorage.clear();
    // 里的signoutRedirect()就会跳转到AuthorizationServer并执行登出.
    this.manager.signoutRedirect({id_token_hint: this.currentUser.id_token});
  }
}

// 创建access-token.interceptor

import { Injectable } from '@angular/core';
import { HttpEvent, HttpHandler, HttpInterceptor, HttpRequest, HttpResponse } from '@angular/common/http';
import { AuthService } from './auth.service';
import { Observable } from 'rxjs';

@Injectable()
export class AuthTokenInterceptor implements HttpInterceptor {
  constructor(private auth: AuthService) { }

  public intercept(request: HttpRequest, next: HttpHandler): Observable> {
    const authToken = `Bearer ${this.auth.getToken()}`;
    let req;
     req = request.clone({
        setHeaders: {
             Authorization: authToken,
            },
          });
    return next.handle(req);
  }
}

// 创建auth-guard文件

import { CanActivate, CanLoad, Route, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
import { AuthService } from './auth.service';
import { Injectable } from '@angular/core';

@Injectable()
export class AuthGuard implements CanLoad, CanActivate {

  constructor(private auth: AuthService) { }
// 如果返回true就可以访问这个路由, 否则就不可以访问
// 取当前用户, 如果有用户那么就可以继续访问路由, 否走执行登陆动作.
  public async canLoad(route: Route): Promise {
    const user = await this.auth.getUser();
    const isLoggedIn = !!user;
    if (!isLoggedIn) {
      this.auth.login();
      return false;
    }
    return true;
  }

  public async canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Promise {
    const user = await this.auth.getUser();
    const isLoggedIn = !!user;
    if (!isLoggedIn) {
      this.auth.login();
      return false;
    }
    return true;
  }
}

自动刷新Token:
oidc-client的自动刷新token是只要配置好了, 你就不用再做什么操作了.

不过还是需要建立一个页面, 用于刷新:




  
  
  
  test



  登录成功，正在跳转页面……

Angular中的OIDC的使用

相关的概念解释

Angular具体项目的使用

首先angular项目使用到oidc-client第三方库

所以这将涉及到AuthService, Auth-token.interceptor,AuthGuard等文件的使用

你可能感兴趣的:(Angular中的OIDC的使用)