如何在Angular 6+中使用MSADAL的RenewToken方法？

问题描述

我正在使用MS Adal NPM软件包（），以使用户通过Azure AD进行身份验证。我正在使用隐式流程来获取访问令牌。使用构造函数中的以下代码，我已经能够成功获取Access令牌。

I am using MS Adal NPM package (https://www.npmjs.com/package/microsoft-adal-angular6) for Angular 6 to get the user Authenticated with Azure AD. I am using Implicit Flow to get the Access token. I have been able to get Access token succesfully, with the following code in the constructor.

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 。但是，我看不到此方法的任何细节，也无法获取任何示例代码来向我展示如何使用此方法。有人可以帮我吗？

In the Implicit Flow, only Access Token is returned and this access token has an expiry period of one hour. I need to refresh this token. The documentation page of microsoft-adal-angular6 package mentions about the method RenewToken. However, I cannot see any details of this method and I could also not get any sample code that can show me how to use this method. Could anyone help me with this ?

推荐答案

我在网站关于ADAL如何创建隐藏的IFrame。

I found a nice explanation in the website https://docs.microsoft.com/en-us/microsoftteams/platform/concepts/authentication/auth-silent-aad about how ADAL creates a hidden IFrame.

解决方案非常简单。我只需要写一行代码

The solution was very simple. I had to just write one line of code

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

此处唯一要注意的是，由于 adalsvc变量是通过注入在构造函数中创建的，您需要创建adalsvc的副本并将其存储为MsAdalAngular6Service类型的全局变量，然后对该对象执行RenewToken方法。这是我编写的示例代码。我通过单击按钮执行RenewToken，但是在实际情况下，它可以以非交互方式执行。

The only point to note here is that, since "adalsvc" variable is created in the constructor through injection, you need to create a copy of the adalsvc and store it a global variable of the type MsAdalAngular6Service and then execute RenewToken method on this object. Here is a sample code that I have written. I am executign RenewToken in a button click, but in the real scenario, it could be executed in a non-interactical way.

        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);
      });
         }
        }

这篇关于如何在Angular 6+中使用MSADAL的RenewToken方法？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！