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

问题描述

我正在使用 MS Adal NPM 包 (https://www.npmjs.com/package/microsoft-adal-angular6) 用于 Angular 6 以使用户通过 Azure AD 进行身份验证.我正在使用隐式流来获取访问令牌.我已经能够成功获取访问令牌，在构造函数中使用以下代码.

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/en-us/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授权流，但它指定 prompt=none 以便 Azure AD 从不显示登录页面.如果因为用户需要而需要用户交互要登录或授予对应用程序的访问权限，Azure AD 将立即返回一个错误，然后 ADAL.js 向您的应用报告.在此时，您的应用可以在需要时显示登录按钮.

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

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