寻求IIS下Web API结合Windows身份验证与Bearer Token的实现方案

我完全懂你折腾5天找不到解决方案的郁闷——这么直白的需求居然没现成的完美实现，确实离谱😅。下面是一套我在类似场景验证过的可行方案，完全适配你的AngularJS 1.6需求：

首先得确保后端目标URL的认证逻辑走通：

• 开启NTLM身份验证：针对你指定的验证URL，配置后端（不管是IIS、ASP.NET Core还是其他服务）启用NTLM认证。这样前端带着withCredentials=true请求时，会自动触发NTLM的质询-响应流程，获取用户的Windows域身份。
• 数据库校验与Token生成：
  • 当NTLM验证通过拿到Windows用户名后，去你的数据库查询该用户是否存在。
  • 如果用户有效：生成符合JWT或自定义格式的Bearer Token，以200状态码返回——可以把Token放在响应头的Authorization: Bearer <token>里，或者直接放在响应体中。
  • 如果用户无效/NTLM验证失败：严格返回401 Unauthorized状态码，不要附加自定义响应内容，保持标准状态码以便前端识别。

1. 发起NTLM验证请求 #

用$http服务发起带withCredentials的请求，处理两种响应结果：

angular.module('yourApp').controller('AuthController', ['$http', '$scope', function($http, $scope) {
  // 初始化隐藏登录表单
  $scope.showLoginForm = false;

  // 发起NTLM验证请求
  $http({
    method: 'GET',
    url: '你的目标验证URL',
    withCredentials: true
  })
  .then(function(response) {
    // 成功拿到Token，存储并跳转
    var bearerToken = response.headers('Authorization')?.split(' ')[1] || response.data.token;
    localStorage.setItem('authToken', bearerToken);
    // 这里可以跳转到用户首页或执行后续逻辑
    window.location.href = '/dashboard';
  })
  .catch(function(error) {
    if (error.status === 401) {
      // NTLM验证失败，显示登录表单
      $scope.showLoginForm = true;
    } else {
      console.error('验证请求出错:', error);
    }
  });
}]);

2. 登录表单实现与处理 #

当401触发后，显示登录表单让用户手动输入凭证，提交到后端登录接口获取Token：

<!-- 登录表单，默认隐藏 -->
<div ng-if="showLoginForm" class="login-form">
  <form ng-submit="submitLogin()">
    <label>用户名：</label>
    <input type="text" ng-model="loginData.username" required>
    <label>密码：</label>
    <input type="password" ng-model="loginData.password" required>
    <button type="submit">登录</button>
  </form>
</div>

对应的控制器登录逻辑：

$scope.loginData = {};

$scope.submitLogin = function() {
  $http({
    method: 'POST',
    url: '你的登录接口URL',
    data: $scope.loginData
  })
  .then(function(response) {
    var bearerToken = response.data.token;
    localStorage.setItem('authToken', bearerToken);
    $scope.showLoginForm = false;
    window.location.href = '/dashboard';
  })
  .catch(function(error) {
    alert('登录失败，请检查用户名或密码');
  });
};

3. 全局HTTP拦截器（可选但推荐） #

为了统一处理所有请求的Token携带和401重定向，可以添加拦截器：

angular.module('yourApp').factory('authInterceptor', ['$q', '$rootScope', function($q, $rootScope) {
  return {
    // 给所有请求带上Token
    request: function(config) {
      var token = localStorage.getItem('authToken');
      if (token) {
        config.headers.Authorization = 'Bearer ' + token;
      }
      return config;
    },
    // 全局处理401错误
    responseError: function(rejection) {
      if (rejection.status === 401) {
        $rootScope.$broadcast('auth:unauthorized');
        // 触发登录表单显示
        $rootScope.showLoginForm = true;
      }
      return $q.reject(rejection);
    }
  };
}]);

// 注册拦截器
angular.module('yourApp').config(['$httpProvider', function($httpProvider) {
  $httpProvider.interceptors.push('authInterceptor');
}]);

• CORS配置必须正确：如果前后端跨域，后端要设置Access-Control-Allow-Credentials: true，且Access-Control-Allow-Origin不能是*，必须是前端的具体域名；同时要允许OPTIONS预检请求。
• NTLM跨域限制：部分浏览器对NTLM跨域请求有额外限制，确保后端正确处理预检请求的所有头和方法。
• Token存储：用localStorage或AngularJS服务存储Token，避免页面刷新后丢失；如果是敏感场景，也可以考虑用sessionStorage。

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