Неявный поток OpenIdDict для угловых и ионных клиентов

Question

Мы использовали OpenIdDict с потоком паролей.

Но: мы хотим переключиться на неявный поток (всплывающее окно с сервера авторизации openiddict). я могу найти образец для приложения ASP.NET, но мы хотим использовать это: 1/угловом 1.0 веб-сайт 2/ионную 2,0 приложение

Может кто-нибудь дать несколько советов, как на это? (пример Aurelia близок, но мы не можем заставить его работать в ионном или угловом). Какие библиотеки мы можем использовать, какие вызовы мы должны делать?

Спасибо большое,

Frank 

Answer 1

Я только использовал неявный поток с OpenIddict из angular2 приложений с машинописи, но я настоятельно советую вам использовать oidc-client. В любом случае такая же методология для всех SPA.

Вы можете сделать угловую службу, включающую эту библиотеку, содержащей UserManager и с несколькими методов, как сокращениями от signInCallback зарегистрировался, ...

@Injectable() 
export class OAuthService { 
    private client: UserManager; 
    private user: Promise<User | null>; 

    constructor(private ngZone: NgZone, @Inject(OAUTH_CONFIG_TOKEN) options: IOAuthConfig) { 
     Log.logger = console; 

     Log.level = Log.INFO; 
     this.client = new UserManager(<UserManagerSettings>{ 
      authority: options.authority, // the url of your openiddict service 
      client_id: options.client_id, // your openiddict application id 
      redirect_uri: options.redirect_uri, // the url of your app after login 
      post_logout_redirect_uri: options.post_logout_redirect_uri, // the url of your app after logout 
      scope: options.scope, // your openid scopes like 'openid email profile roles' 
      response_type: 'id_token token', //id + access token 
      filterProtocolClaims: true, 
      loadUserInfo: true, 
     }); 
     this.client.events.addUserLoaded(user => { 
      this.user = Promise.resolve(user); 
      Log.logger.info('OAuthService: User loaded'); 
     }); 
     this.client.events.addUserSignedOut(() => Log.logger.info('OAuthService: User signed out')); 
     this.client.events.addUserUnloaded(() => Log.logger.info('OAuthService: User unloaded')); 
     this.client.events.addSilentRenewError(err => Log.logger.error(err)); 
     this.user = this.ngZone.runOutsideAngular(() => { 
      return this.client.getUser().then((user) => { 
       if (user == null) { 
        return null; 
       } 
       return user; 
      }); 
     }); 
    } 

    public get events(): UserManagerEvents { 
     return this.client.events; 
    } 


    public signin(): Promise<any> { 
     return this.ngZone.runOutsideAngular(() => { 
      return this.client.signinRedirect() 
       .catch(err => Log.logger.error(err)); 
     }); 
    } 

    public signinCallback(): Promise<User|null> { 
     this.user = this.ngZone.runOutsideAngular(() => { 
      return this.client.signinRedirectCallback() 
       .then(user => { 
        if (user == null) { 
         return null; 
        } 
        return user; 
       }) 
       .catch(err => Log.logger.error(err)); 
     }); 
     return this.user; 
    } 

    public signout(): Promise<any> { 
     return this.ngZone.runOutsideAngular(() => { 
      return this.client.signoutRedirect() 
       .catch(err => Log.logger.error(err)); 
     }); 
    } 

    public signoutCallback(): Promise<any> { 
     return this.client.signoutRedirectCallback() 
      .catch(err => Log.logger.error(err)); 
    } 

    public authorizationHeader(): Promise<string> { 
     return this.ngZone.runOutsideAngular(() => { 
      return this.user 
       .then(user => user == null ? '' : user.token_type + ' ' + user.access_token); 
     }); 
    } 

    public getUser(): Promise<User|null> { 
     return this.ngZone.runOutsideAngular(() => { 
      return this.user 
       .catch(err => Log.logger.error(err)); 
     }); 
    } 

    public isLoggedIn(debugToken = ''): Promise<boolean> { 
     return this.ngZone.runOutsideAngular(() => { 
      return this.user.then(user => { 
       if (user != null) { 
        return !user.expired; 
       } 
       return false; 
      }); 
     }); 
    } 

} 

Я проблема совместимости между angular2 и РСИНОМ-клиентом обещает так Я должен был использовать NgZone, как вы можете видеть.

Вводят этот сервис везде вам это нужно (profile поле User содержит ваши требования, как к role, unique_name и так далее).

Сделайте две компоненты, такие как LoginComponent и LogoutComponent, которые просто звонят signinCallback и signoutCallback и перенаправляют куда-нибудь в ваше приложение, как ваша домашняя страница.

@Component({ 
    selector: 'app-logout', 
    templateUrl: './logout.template.html' 
}) 
export class LogoutComponent implements OnInit { 
    constructor(private router: Router, private oauthService: OAuthService) { } 

    ngOnInit() { 
     this.oauthService.signoutCallback().then(() => this.router.navigate([''])); 
    } 
} 

Эти два компонента маршруты должны соответствовать заданной конфигурации UserManager в OAuthService конструктора.

{ 
    path: 'login', 
    component: LoginComponent 
}, 
{ 
    path: 'logout', 
    component: LogoutComponent 
}, 

Например, если redirect_uri является http://localhost:5000/login и post_logout_redirect_uri является http://localhost:5000/login

Вы, вероятно, нужно подписаться какое-то событие, чтобы обновить некоторые свойства, когда пользователь просто войти в систему.

public ngOnInit(): void { 
    this.onUserChange(); 
    this.oauthService.events.addUserLoaded(() => this.onUserChange()); 
    this.oauthService.events.addUserUnloaded(() => this.onUserChange()); 
} 

private onUserChange(): void { 
    this.oauthService.isLoggedIn().then(x => this.isLoggedIn = x); 
} 

После этого вы очень много сделали, бесшумный Войти пока не поддерживается в OpenIddict, и я не нашел обходной путь еще.

Опять же это все Машинопись/Angular2, но это должно быть легко адаптироваться к JS/Угловая