如何为AngularJS SPA前端对接Microsoft认证并实现ASP.NET Core Web API跨应用Office365认证配置？

Hey there! Let's walk through how to set up Azure AD (Office 365) authentication for your separated AngularJS SPA and ASP.NET Core Web API. I’ve worked through this exact scenario before, so here’s a practical, step-by-step solution:

第一步：在Azure AD中注册两个独立应用 #

Since your SPA and API are separate apps, you’ll need to register both in Azure Active Directory:

• SPA应用注册：
  • 登录Azure门户，进入Azure AD → 应用注册 → 新建注册
  • 命名你的SPA（比如"MyAngularJS-SPA"），选择"单页应用(SPA)"作为平台，输入你的SPA重定向URI（比如http://localhost:4200）
  • 转到"身份验证"面板，启用"隐式授权和混合流"下的"ID令牌"和"访问令牌"（AngularJS依赖这两种令牌进行登录和API调用）
• API应用注册：
  • 再新建一个应用注册（比如"MyWebAPI"），选择"Web"作为平台（暂时不用填重定向URI）
  • 转到"公开API"面板，设置"应用ID URI"（比如api://your-api-client-id，替换成你的API应用ID）
  • 添加一个范围（比如access_as_user），设置名称和描述，勾选"管理员和用户同意"
  • 回到SPA应用的"API权限"面板，点击"添加权限" → 选择"我的API" → 选中刚才注册的API，添加你定义的access_as_user范围，最后点击"授予管理员同意"（必须完成这一步，否则用户登录后无法获取API访问令牌）

第二步：配置AngularJS SPA实现登录重定向 #

We’ll use Microsoft’s official adal-angular library to handle authentication in AngularJS:

1. 安装库：通过npm或直接引入CDN：

   <script src="https://secure.aadcdn.microsoftonline-p.com/lib/1.0.17/js/adal.min.js"></script>
   <script src="https://secure.aadcdn.microsoftonline-p.com/lib/1.0.17/js/adal-angular.min.js"></script>
   

2. 配置ADAL在AngularJS应用中：

   angular.module('myApp', ['AdalAngular'])
     .config(['$routeProvider', 'adalAuthenticationServiceProvider', function ($routeProvider, adalProvider) {
       // 配置路由，标记需要登录的路由
       $routeProvider
         .when('/dashboard', {
           templateUrl: 'dashboard.html',
           controller: 'DashboardController',
           requireADLogin: true // 访问此路由时自动跳转到Azure登录
         })
         .when('/home', {
           templateUrl: 'home.html'
         });
   
       // 配置ADAL参数
       adalProvider.init({
         clientId: '你的SPA应用ID',
         tenant: '你的租户ID或域名（比如contoso.onmicrosoft.com）',
         redirectUri: window.location.origin,
         cacheLocation: 'localStorage' // 存储令牌到localStorage
       }, $httpProvider);
     }]);
   

3. 在需要调用API的控制器中，ADAL会自动在请求头添加Bearer令牌：

   angular.module('myApp').controller('DashboardController', ['$http', function ($http) {
     $http.get('https://your-api-url/api/data')
       .then(function (response) {
         console.log('API返回数据:', response.data);
       });
   }]);
   

第三步：配置ASP.NET Core Web API验证令牌 #

Now let’s set up the API to validate the tokens coming from the SPA:

1. 安装NuGet包：

   Install-Package Microsoft.AspNetCore.Authentication.JwtBearer
   

2. 在Program.cs中配置认证服务：

   var builder = WebApplication.CreateBuilder(args);
   
   // 添加JWT认证
   builder.Services.AddAuthentication(JwtBearerDefaults.AuthenticationScheme)
     .AddJwtBearer(options => {
       options.Authority = "https://login.microsoftonline.com/你的租户ID";
       options.Audience = "api://你的API应用ID"; // 对应之前设置的API应用ID URI
       options.TokenValidationParameters = new TokenValidationParameters {
         ValidateIssuer = true,
         ValidateAudience = true,
         ValidateLifetime = true,
         ValidateIssuerSigningKey = true
       };
     });
   
   // 添加CORS允许SPA跨域访问（必须配置！）
   builder.Services.AddCors(options => {
     options.AddPolicy("AllowSPA", policy => {
       policy.WithOrigins("http://localhost:4200") // SPA的地址
             .AllowAnyHeader()
             .AllowAnyMethod()
             .AllowCredentials(); // 允许携带认证令牌
     });
   });
   
   builder.Services.AddAuthorization();
   builder.Services.AddControllers();
   
   var app = builder.Build();
   
   app.UseCors("AllowSPA"); // 先启用CORS
   app.UseAuthentication(); // 启用认证
   app.UseAuthorization(); // 启用授权
   
   app.MapControllers();
   
   app.Run();
   

3. 在需要保护的控制器或方法上添加[Authorize]属性：

   [ApiController]
   [Route("api/[controller]")]
   [Authorize]
   public class DataController : ControllerBase {
     [HttpGet]
     public IActionResult Get() {
       return Ok(new { Message = "Authenticated API response" });
     }
   }
   

测试流程 #

1. 启动你的AngularJS SPA，访问/dashboard路由，会自动跳转到Azure AD登录页面
2. 输入Office 365账号密码，验证通过后会跳转回SPA的/dashboard页面
3. SPA自动调用API，API验证令牌有效后返回数据

关键注意事项 #

• 确保Azure AD中SPA的API权限已授予管理员同意，否则用户登录后无法获取API访问令牌
• CORS配置必须包含AllowCredentials()，否则浏览器会阻止携带令牌的跨域请求
• 如果你需要刷新令牌，adal-angular会自动处理，但要确保令牌缓存正常工作

内容的提问来源于stack exchange，提问作者jjnrmason