Используйте angular-oauth2-oidc и «тихое обновление» без белого списка. Silent-refresh.html - PullRequest
Новая
       42

Используйте angular-oauth2-oidc и «тихое обновление» без белого списка. Silent-refresh.html

0 голосов
/ 01 мая 2018

Я пытаюсь использовать реализацию angular-oauth2-oidc Silent Refresh в сочетании с неявным потоком, настроенным на сервере IdentityServer4. У меня есть подтверждение концепции работы внутри приложения ng new ng-and-ids4 --minimal с этим компонентом: 

import { Component } from '@angular/core';
import { AuthConfig, OAuthService, JwksValidationHandler, OAuthErrorEvent } from 'angular-oauth2-oidc';

@Component({
  selector: 'app-root',
  template: `Welcome!
    
      
      
      
    
    Your Claims:{{claims | json}}

Ваш токен доступа:

{{accessToken}}

`, стили: [] }) класс экспорта AppComponent { конструктор (общедоступный oauthService: OAuthService) { this.oauthService.configure ({ эмитент: 'http://localhost:5000', redirectUri: window.location.origin + '/', silentRefreshRedirectUri: window.location.origin + '/silent-refresh.html', clientId: 'my-spa', область применения: «профиль openid», silentRefreshTimeout: 5000, // Для более быстрого тестирования sessionChecksEnabled: true, }); this.oauthService.tokenValidationHandler = new JwksValidationHandler (); this.oauthService.loadDiscoveryDocumentAndLogin (); this.oauthService.setupAutomaticSilentRefresh (); this.oauthService.events.subscribe (e => { if (e instanceof OAuthErrorEvent) {console.error (e); } else {console.warn (e)} }); } public getquesments () {return this.oauthService.getIdentityClaims (); } public get accessToken () {вернуть this.oauthService.getAccessToken (); } login () {this.oauthService.initImplicitFlow (); } logout () {this.oauthService.logOut (); } refresh () {this.oauthService.silentRefresh (); } }

На стороне IDServer4 я настраиваю своего клиента так: 

new Client
{
    ClientId = "my-spa",
    AllowedGrantTypes = GrantTypes.Implicit,
    AllowAccessTokensViaBrowser = true,
    AccessTokenLifetime = 30, // Seconds (for testing purposes)
    RedirectUris = { "http://localhost:4200/", "http://localhost:4200/silent-refresh.html" },
    PostLogoutRedirectUris = { "http://localhost:4200/" },
    AllowedCorsOrigins = { "http://localhost:4200" },
    AllowedScopes =
    {
        IdentityServerConstants.StandardScopes.OpenId,
        IdentityServerConstants.StandardScopes.Profile,
    }
}

Как видите, на сервере, который я внес в белый список "http://localhost:4200/silent-refresh.html" в свойстве Client RedirectUris.

Мой вопрос заключается в том, можете ли вы настроить angular-oauth2-oidc таким образом, чтобы мне не требовалось вносить белый список страницы silent-refresh.html?

Причина, по которой я спрашиваю, состоит в том, что я хочу использовать этот подход Silent Refresh также в ситуациях, когда может быть не так просто изменить сторону IdentityServer. Кроме того, глядя на пример Silent Refresh Дэмиена Бода в приложении Angular Я чувствую, что это как-то возможно, потому что там такой белый список не упоминается.

PS. Если я не включу дополнительную опцию для RedirectUris, я получу Invalid redirect_uri: http://localhost:4200/silent-refresh.html на сервере (журналы) и silent_refresh_timeout OAuthErrorEvent в библиотеке на стороне клиента.

1 Ответ

0 голосов
/ 23 июля 2018

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

Если вам нужно сделать это, вам нужно настроить index.html, который обслуживает приложение Angular, чтобы оно по-другому загружалось. По сути, автоматическое обновление загружает этот файл вместо silent-refresh.html файла, поэтому в индексе должно быть 2 режима: один для обычной загрузки приложения и другой, который эффективно делает это: 

parent.postMessage(location.hash, location.origin);

Потому что это все, что делает silent-refresh.html. Это может оказаться немного сложным, потому что это потребует подключения к генерации index.html, когда CLI создает производственную сборку.

Так что, хотя технически это возможно, это не очень прагматично.

...