ADAL ASP.NET MVC and Angular. Login from ASP .NET MVC

问题

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?

回答1:

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.

来源：https://stackoverflow.com/questions/50249965/adal-asp-net-mvc-and-angular-login-from-asp-net-mvc