Угловой с adal-angular4 и токен обновления - PullRequest
0 голосов
/ 26 сентября 2019

Я использую следующий пакет для реализации аутентификации Azure AD в приложении Angular:

https://www.npmjs.com/package/adal-angular4

Через 10-20 минут истекает токен.Есть еще одна тема, где обсуждают нечто подобное, но я просто не могу найти правильное решение.Честно говоря, читая пост, я даже не уверен, возможно ли это из-за природы неявного потока.Приветствуются все указатели.

Обновление маркера Angular 2 ADAL для неявного потока (с использованием "adal-angular4")

У меня есть страница автоадресации, куда Azure перенаправляет на:

ngOnInit() {

    this.adal.handleWindowCallback();

    sessionStorage.setItem("adal.username",this.adal.userInfo.userName);

    this.loginService.userLoggedIn(this.adal.userInfo.userName);
    console.log("in authredirect. setting user in storage:"+this.adal.userInfo.userName);
    var url = sessionStorage.getItem("adal.return.url");

    console.log(url);

    setTimeout(() => {
      this._zone.run(
        () => this.router.navigate([url])
      );
    }, 500);
  } 

В моем app.module.ts у меня есть следующее:

 providers: [
    AdalService, 
      AuthenticationGuard,
      { provide: HTTP_INTERCEPTORS, useClass: AuthenticationInterceptor, multi: true }

В моем app.component в конструкторе:

this.adalService.init(environment.adalConfig);

Мой сторож аутентификации:

export class AuthenticationGuard implements CanActivate {
  constructor(private adal: AdalService, private route: ActivatedRoute) { }

  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {

    if (this.adal.userInfo.authenticated) {
      return true;
    }

    console.log("Adal Login");
    var url = state.url;
    console.log(url);
    sessionStorage.setItem("adal.return.url",url);

    this.adal.login();

    console.log('AuthGuard'+this.adal);

    return false;
  }
}

И, наконец, мой app.routing.ts:

{
  path: 'chartering',
  loadChildren: './views/chartering/chartering.module#CharteringModule',
   canActivate: [AuthenticationGuard]
},

1 Ответ

0 голосов
/ 27 сентября 2019

Вам повезло, я проходил через ту же самую проблему раньше, и мне потребовались недели, чтобы решить ее.Чтобы получить токен доступа и токен обновления, вам нужно использовать библиотеку Microsoft MSAL вместо ADAL.Нет абсолютно никакого способа обновить ваш токен без использования MSAL.Библиотека MSAL от Microsoft бесполезна.Я написал упрощенную версию с нуля специально для моего приложения Angular.Я загрузил его в GitHub для вас. MsalService.ts .Надеемся, что вы можете использовать его.

Обычно, когда вам нужен токен аутентификации, используйте функцию msalService.acquireToken.Если токен не возвращается из этой функции, пользователь должен выйти из системы.* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * Вы не можете запросить токен доступа или обновить токен со стороны клиента вашего приложения из-за ограничений CORS.Я создал конечные точки на своем сервере для выполнения запросов.

[HttpPost, Route("AccessToken")]
public async Task<HttpResponseMessage> GetAccessToken(AccessTokenRequest accessTokenRequest)
{
    HttpClient httpClient = new HttpClient();

    var content = new List<KeyValuePair<string, string>>
    {
        new KeyValuePair<string, string>("grant_type", "authorization_code"),
        new KeyValuePair<string, string>("client_id", "<insert_your_client_id>"),
        new KeyValuePair<string, string>("code", accessTokenRequest.AuthorizationCode),
        new KeyValuePair<string, string>("redirect_uri", RemoveHashFromUri(accessTokenRequest.RedirectUri)),
        new KeyValuePair<string, string>("client_secret", "<insert_your_client_secret>"),
        new KeyValuePair<string, string>("scope", accessTokenRequest.Scope)
    };

    var response = await httpClient.PostAsync($"https://login.microsoftonline.com/{your_tenant_id}/oauth2/v2.0/token", new FormUrlEncodedContent(content));

    return response;
}

[HttpPost, Route("RefreshToken")]
public async Task<HttpResponseMessage> RefreshToken(AccessTokenRequest accessTokenRequest)
{
    HttpClient httpClient = new HttpClient();

    var content = new List<KeyValuePair<string, string>>
    {
        new KeyValuePair<string, string>("grant_type", "refresh_token"),
        new KeyValuePair<string, string>("client_id", "<insert_your_client_id>"),
        new KeyValuePair<string, string>("refresh_token", accessTokenRequest.AuthorizationCode),
        new KeyValuePair<string, string>("client_secret", "<insert_your_client_secret>"),
    };

    var response = await httpClient.PostAsync($"https://login.microsoftonline.com/{your_tenant_id}/oauth2/v2.0/token", new FormUrlEncodedContent(content));

    return response;
}

private string RemoveHashFromUri(string redirectUri)
{
    if (string.IsNullOrWhiteSpace(redirectUri))
    {
        return null;
    }

    if (redirectUri.Contains("#"))
    {
        return redirectUri.Substring(0, redirectUri.IndexOf("#"));
    }

    return redirectUri;
}

public class AccessTokenRequest
{
    public string AuthorizationCode { get; set; }
    public string RedirectUri { get; set; }
    public string Scope { get; set; }
}

В конструкторе или ngOnInit () компонента вашего приложения вам нужен этот код для обработки обратного вызова, когда пользователь фактически входит в Microsoft.С токеном, возвращенным из Microsoft в хеше URL, вы можете получить токен доступа.

let authorizationCallback: IAuthorizationCallback = this.msalService.processAuthorizationCallback();

if (authorizationCallback.code) {
  // call out to your server for an access token
  this.resourceFactory.create("Auth/AccessToken").post({
    authorizationCode: authorizationCallback.code,
    redirectUri: this.msalService.getRedirectUrl(),
    scope: this.msalService.getScopes()
  }).then((json: any) => {

    try {
      this.msalService.cacheAuthentication(json);
    } catch (error) {
      // handle error
    }
  }).catch((error: any) => {
    // handle error
  });
} else if (authorizationCallback.error) {
  // handle error. Check authorizationCallback.error and authorizationCallback.error_description
}

Дайте мне знать, если у вас возникнут проблемы.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...