Question

我正在尝试为我的Angular 4应用程序实现Windows身份验证，该应用程序正在访问ASP.Net Web API以满足其所有数据需求。我的Web API中有一个名为AuthenticationController的控制器，其名称为Authenticate，如果验证成功，则返回Domain \ Username。 AuthenticationController的代码如下：

namespace MyAppWebAPI.Controllers
{
    [Authorize]
    public class AuthenticationController : ApiController
    {
        [HttpGet]
        public LoginModels Authenticate()
        {
            Debug.Write($"AuthenticationType: {User.Identity.AuthenticationType}");
            Debug.Write($"IsAuthenticated: {User.Identity.IsAuthenticated}");
            Debug.Write($"Name: {User.Identity.Name}");

            if (User.Identity.IsAuthenticated)
            {
                //return Ok($"Authenticated: {User.Identity.Name}");
                return new LoginModels { DomainName = User.Identity.Name, Role = "Admin" };
            }
            else
            {
                throw new Exception ("Not authenticated");
            }
        }
    }
}

LoginModels的模型如下：

public class LoginModels
{
    public string DomainName { get; set; }
    public string Role { get; set; }
}

我已在AppStart文件夹下的WebApiConfig.cs中启用了CORS，其代码如下：

namespace MyAppWebAPI
{
    public static class WebApiConfig
    {
        public static void Register(HttpConfiguration config)
        {
            // Web API configuration and services
            config.Formatters.JsonFormatter.SupportedMediaTypes.Add(new MediaTypeHeaderValue("text/html"));

            // Web API routes
            config.MapHttpAttributeRoutes();
            config.Routes.MapHttpRoute(
                name: "DefaultApi",
                routeTemplate: "api/{controller}/{action}/{id}",
                defaults: new { id = RouteParameter.Optional }
            );

            //Resolve CORS Issue
            var cors = new EnableCorsAttribute("http://MyAngularApplicationIP:port", "*", "*") { SupportsCredentials = true };
            config.EnableCors(cors);
        }
    }
}

另外，我已在Web.config中启用了Windows身份验证：

<authentication mode="Windows"/>
    <authorization>
        <deny users="?" />
    </authorization>
</system.web>

现在，在我的Angular应用程序中，我有一个名为AuthenticationHelperService的服务，如下所示：

@Injectable()
export class AuthenticationHelperService {

    constructor(
        private _httpHelperService: HttpHelperService,
        private _http: Http,
        private _requestOptions: RequestOptions,
    ) { }

    public authenticateUser(): Observable<any> {
        console.log('Calling GetUser');
        let headers = new Headers({ 'Content-Type': 'application/json' });
        let options = new RequestOptions({ headers: headers, withCredentials: true });
        return this._http
            .get('WebApiURL:port/api/Authentication/Authenticate', options)
            .map(this._httpHelperService.extractData)
            .catch(this._httpHelperService.handleError);
    }
}

请注意，我已在请求选项中启用了withCredentials: true。此外，这里_httpHelperService.extractData只是将我的响应转换为JSON，_httpHelperService.handleError在控制台上记录错误（如果有的话）。现在，我在ngOnInit方法中从页面加载的组件调用此服务方法，如下所示：

export class MasterComponent implements OnInit {

    constructor(
        private _userLoginService : UserLoginService,
        private _authenticationHelperService: AuthenticationHelperService
    ) { }

    private userName: any;

    ngOnInit() {
        this._authenticationHelperService.authenticateUser().subscribe(
            data => this.userName = data,
            error => console.log('Authentication Error :: ' + error),
            () => console.log('Current User :: ' + this.userName));
    }
}

当我运行应用程序时，浏览器会要求我输入凭据 - Please See the image 输入凭据后，它会将我带到主页，但_authenticationHelperService.authenticateUser()方法不会返回用户名。我在控制台上收到错误如下：

XMLHttpRequest无法加载“MyWebApiURL / api / Authentication / Authenticate”。对预检请求的响应未通过访问控制检查：请求的资源上不存在“Access-Control-Allow-Origin”标头。因此不允许原点“MyAngularAppUrl”访问。响应的HTTP状态代码为401。

当我只是从浏览器调用Web API的Authenticate方法时就像http://MyWebApiIP:port/api/Authentication/Authenticate那样，我成功地获取了用户名，但没有从Angular应用程序中获取。

Answer 1

除了

WindowsAuthentication

您还需要启用

AnonymousAuthentication

因为OPTIONS飞行前请求不带有Auth标头，如果未启用，则失败。

请记住要对所有控制器进行[授权]。

Answer 2

launchSettings.json

您可以在项目的属性文件夹中找到此文件，

＆＃13;

{
  "iisSettings": {
    "windowsAuthentication": true,
    "anonymousAuthentication": false,
    "iisExpress": {
      "applicationUrl": "http://localhost:53072/",
      "sslPort": 0
    }
  },
  "profiles": {
    "IIS Express": {
      "commandName": "IISExpress",
      "launchBrowser": true,
      "environmentVariables": {
        "ASPNETCORE_ENVIRONMENT": "Development"
      }
    },
    "AdvantureWeb": {
      "commandName": "Project"
    }
  }
}

＆＃13;

更改为窗口身份验证

Angular 2应用程序和ASP.Net Web API中的Windows身份验证

2 个答案: