Как использовать RenewToken метод MSADAL в Angular 6+? - PullRequest
Новая
       18

Как использовать RenewToken метод MSADAL в Angular 6+?

0 голосов
/ 28 июня 2019

Я использую пакет MS Adal NPM (https://www.npmjs.com/package/microsoft-adal-angular6) для Angular 6 для аутентификации пользователя в Azure AD. Я использую Implicit Flow для получения токена доступа. Мне удалось успешно получить токен доступа,со следующим кодом в конструкторе. 

if (!this.adalSvc.userInfo) {
   this.adalSvc.login();
 } else {
   const token = this.adalSvc.acquireToken('https://graph.microsoft.com').subscribe((token: string) => {
     localStorage.setItem('authtoken', token);
   });
 }

В неявном потоке возвращается только токен доступа, и этот токен доступа имеет срок действия один час. Мне нужно обновить этот токен. Страница документацииВ пакете microsoft-adal-angular6 упоминается метод RenewToken . Однако я не вижу подробностей этого метода и не могу получить пример кода, который может показать мне, как использовать этот метод. Может кто-нибудь помочь?мне с этим?

1 Ответ

0 голосов
/ 28 июня 2019

Я нашел хорошее объяснение на сайте https://docs.microsoft.com/en-us/microsoftteams/platform/concepts/authentication/auth-silent-aad о том, как ADAL создает скрытый IFrame.

Библиотека ADAL.js создает скрытый iframe дляOAuth 2.0 неявный поток предоставления, но он указывает prompt = none, так что Azure AD никогда не показывает страницу входа.Если требуется взаимодействие с пользователем, поскольку пользователю необходимо войти в систему или предоставить доступ к приложению, Azure AD немедленно вернет ошибку, о которой ADAL.js сообщает в ваше приложение.На этом этапе ваше приложение может показать кнопку входа в систему, если это необходимо.

Решение было очень простым.Мне нужно было просто написать одну строку кода 

this.adalsvc.RenewToken('https://graph.microsoft.com');

Единственный момент, который следует отметить, заключается в том, что, поскольку переменная "adalsvc" создается в конструкторе посредством внедрения, вам необходимо создать копию adalsvc исохраните его в глобальной переменной типа MsAdalAngular6Service и затем выполните метод RenewToken для этого объекта.Вот пример кода, который я написал.Я выполняю RenewToken одним нажатием кнопки, но в реальном сценарии его можно выполнить неинтерактивным способом. 

        import { Component } from '@angular/core';
        import { MsAdalAngular6Service } from 'microsoft-adal-angular6';

        @Component({
          selector: 'app-root',
          templateUrl: './app.component.html',
          styleUrls: ['./app.component.css']
        })
        export class AppComponent {
          title = 'app';
          newadalsvc: MsAdalAngular6Service;

          onClickMe() {
           this.getNewToken();
          }

          constructor(private adalSvc: MsAdalAngular6Service) {

             if (!this.adalSvc.userInfo) {
               this.adalSvc.login();
             } else {

              const token = this.adalSvc.acquireToken('https://graph.microsoft.com').subscribe((token: string) => {
               this.newadalsvc = adalSvc;
              alert(token);
              console.log(token);
                 localStorage.setItem('authtoken', token);
                }); 
             }
           }


        getNewToken()
        {
          this.newadalsvc.RenewToken('https://graph.microsoft.com');

//Without calling acquireToken the new token will not be set in the "Local Storage"
this.newadalsvc.acquireToken('https://graph.microsoft.com').subscribe((token) => {
        console.log('Token >>>>>>>>>>>>>>', token);
      });
         }
        }
...