ADAL ASP.NET MVC和Angular。从ASP .NET MVC登录 [英] ADAL ASP.NET MVC and Angular. Login from ASP .NET MVC

问题描述

我有一个用ASP.NET MVC编写的应用程序。我们决定用angular编写新的前端函数，然后将所有前端缓慢迁移到angular。但是目前，我们对Angular和MVC都一无所知。我们遇到的问题是，当用户登录时，登录仅在应用程序的MVC部分进行。 Angular和ASP.NET MVC之间不会共享来自Azure AD的访问令牌。

我已安装
https://www.npmjs.com/package/adal-angular5

<我可以从角度页面使用该程序包登录，但是我想从MVC端重用登录。

我已经制作了一个身份验证模块

 导入{NgModule}来自 @ angular / core； 
从 @ angular / common导入{CommonModule}； 
从 ../services/authenticated.guard导入{AuthenticationGuard}； 
从 adal-angular5导入{Adal5Service，Adal5HTTPService}； 
从 @ angular / common / http导入{HttpClient，HttpClientModule}； 
从 ../oauth-callback/oauth-callback.guard导入{OAuthCallbackHandler}； 
从 ./http.service导入{HttpService}；从 angular2-cookie / services / cookies.service导入
 {CookieService}； 
 @NgModule（{
声明：[]，
进口：[CommonModule，HttpClientModule]，
出口：[]，
提供者：[
 AuthenticationGuard ，
 Adal5Service，
 {
提供：Adal5HTTPService，
 useFactory：Adal5HTTPService.factory，
 deps：[HttpClient，Adal5Service] 
}，
 OAuthCallbackHandler 
]，
 
}）
出口类AuthenticationModule 
 {
构造函数（私有adalService：Adal5Service）
 {
 this.adalService.init（{
 tenant：'tenant'，
 clientId：'my-id'，
 redirectUri：'mycallback uri'，
 postLogoutRedirectUri：'一些重定向uri '，
 popUp：真
 
}）； 
} 
} 
  

我以后可以打电话

  this.adalService.login（）; 
  

这使我登录，但是我不想强迫用户两次登录。
我该如何解决？

解决方案

AFAIK，您的MVC应用程序可能使用用于AAD身份验证的Microsoft.Owin.Security.OpenIdConnect 中间件，这是相关的教程使用OpenID Connect将Azure AD集成到Web应用程序中。对于这种方法，已记录的用户声明将被加密为cookie并返回给客户端。

由于您已将前端更改为有角，因此最好使用ADAL库直接检索access_token或id_token并将其作为承载令牌发送到后端进行身份验证，并且您的后端需要使用 Microsoft.Owin.Security.ActiveDirectory 用于支持AAD JWT承载令牌身份验证的方式如下：

  app.UseWindowsAzureActiveDirectoryBearerAuthentication（
新的WindowsAzureActiveDirectoryBearerAuthenticationOptions 
 {
 TokenValidationParameters = new TokenValidationParameters（）
 {
 ValidAudience = {AAD-client-ID} 
}，
 Tenant = {tenantID} 
}）； 
  

您可以关注的详细信息 Azure AD .NET Web API入门。

我可以从角度页面使用该程序包登录，但是我想从MVC端重用登录信息。

您可以在ASP.NET MVC应用程序中结合使用Cookie和Bearer身份验证。 注意：在Cookie身份验证之前，您需要启用承载令牌身份验证。如果您的后端和前端托管在同一个网站中，那么您可以重用cookie，我假设在执行 this.adalService.login（）; 之前，您可以尝试向您的后端发送请求，以验证是否已向浏览器发布了经过验证的cookie。如果您获得200状态代码，则无需通过ADAL登录前端，可以在字体末端设置一个标志以标记当前用户已从后端登录，注意： Cookie可能有过期时间。收到401或错误消息时，可能需要在前端显式执行 this.adalService.login（）; 。将请求发送到后端以检索正常数据时，您可能需要检查登录标志，并在以下情况下添加值为 Bearer< access-token> 的Authorization标头。当前用户已从前端标记为已登录。

注意：上述情况可能存在一些问题，您需要处理access_token或cookie到期问题。我建议您只使用一种身份验证方法。

I have an application already written in ASP.NET MVC. We have decided to write new frontend functions in angular and slowly migrate all frontend to angular. But for now we are stuck with both Angular and MVC. The problem we have is that when a user logs on the login is only made on the MVC parts of the application. The access token from the Azure AD is not shared between Angular and ASP.NET MVC.

I have installed https://www.npmjs.com/package/adal-angular5

I can login with that package from angular page but I want to reuse the login from the MVC side. Is that possible?

I have made a authentication module

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { AuthenticationGuard } from '../services/authenticated.guard';
import { Adal5Service, Adal5HTTPService } from 'adal-angular5';
import { HttpClient, HttpClientModule } from '@angular/common/http';
import { OAuthCallbackHandler } from '../oauth-callback/oauth-callback.guard';
import { HttpService } from './http.service';
import { CookieService } from 'angular2-cookie/services/cookies.service';
@NgModule({
    declarations: [],
    imports: [ CommonModule, HttpClientModule ],
    exports: [],
    providers: [
        AuthenticationGuard,
        Adal5Service,
        {
            provide: Adal5HTTPService,
            useFactory: Adal5HTTPService.factory,
            deps: [ HttpClient, Adal5Service ]
        },
        OAuthCallbackHandler
    ],

})
export class AuthenticationModule
{
    constructor(private adalService: Adal5Service)
    {
        this.adalService.init({
            tenant: 'tenant',
            clientId: 'my-id',
            redirectUri: 'mycallback uri',
            postLogoutRedirectUri: 'some redirect uri',
            popUp: true

        });
    }
}

I can later call

this.adalService.login();

This logs me in but I don't want to force the users to log in in twice. How can I solve this?

解决方案

AFAIK, your MVC application may uses Microsoft.Owin.Security.OpenIdConnect middleware for AAD authentication and here is a related tutorial Integrate Azure AD into a web application using OpenID Connect. For this approach, the logged user claims would be encrypted into cookie and return to the client.

Since you have change the frontend to angular, you'd better use ADAL library to directly retrieve the access_token or id_token and send it as bearer token to your backend for authentication, and your backend need to use Microsoft.Owin.Security.ActiveDirectory for for supporting AAD JWT bearer token authentication as follows:

app.UseWindowsAzureActiveDirectoryBearerAuthentication(
    new WindowsAzureActiveDirectoryBearerAuthenticationOptions
    {
        TokenValidationParameters = new TokenValidationParameters()
        {
            ValidAudience = "{AAD-client-ID}"
        },
        Tenant = "{tenantID}"
    });

Details you could follow Azure AD .NET Web API getting started.

I can login with that package from angular page but I want to reuse the login from the MVC side. Is that possible?

You could combine Cookies and Bearer authentication in your ASP.NET MVC application. Note: You need to enable bearer token authentication prior to Cookie authentication. If your backend and frontend host in the same website, then you could reuse the cookie, I assume that before you execute this.adalService.login();, you could try to send a request to your backend for validating that whether a validated cookie has been issued to the browser. If you get 200 status code, then you do not need to login in your frontend via ADAL, and you could set a flag in your fontend to mark that the current user has logged from the backend, Note: the cookie may has the expire time. While you get 401 or error, you may need to explicitly execute this.adalService.login(); in your frontend. When sending request to your backend fro retrieving normal data, you may need to check the login flag, and add the Authorization header with the value Bearer <access-token> when the current user has marked as logged from the frontend.

Note: The above scenario may exists some problems and you need to handle the access_token or cookie expiration issue. I would recommend you just use a single authentication approach.

这篇关于ADAL ASP.NET MVC和Angular。从ASP .NET MVC登录的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！