如何在Angular 6+中使用MSADAL的RenewToken方法？ [英] How to use RenewToken method of MSADAL in Angular 6+?

问题描述

我正在使用MS Adal NPM软件包（ https://www.npmjs.com / package / microsoft-adal-angular6 ），以使用户通过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 ?

推荐答案

我在网站 https://docs.microsoft.com/zh-CN/microsoftteams/platform/concepts/ authentication / auth-silent-aad 关于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.

ADAL.js库创建OAuth 2.0隐式
授予流的隐藏iframe ，但它指定了alert = none，因此Azure AD永远不会在登录页面上显示
。如果由于用户需要
登录或授予对应用程序的访问权限而需要用户交互，则Azure AD将
立即返回错误，然后ADAL.js报告给您的应用程序。在
，此时您的应用程序可以根据需要显示登录按钮。

The ADAL.js library creates a hidden iframe for OAuth 2.0 implicit grant flow, but it specifies prompt=none so that Azure AD never shows the login page. If user interaction is required because the user needs to log in or grant access to the application, Azure AD will immediately return an error that ADAL.js then reports to your app. At this point your app can show a login button if needed.

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

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方法？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！