Question

我是Azure，C＃和Web API的新手，所以首先我要提前道歉，因为这听起来像是一个愚蠢的问题。

我只是想知道，当我在本地开发我的C＃Web API和我的前端Web应用程序时，我是否有可能使用Azure的身份验证？喜欢使用某人的Microsoft帐户进行身份验证吗？

谢谢！

修改

所以我已经根据这个链接设置了应用程序： https://docs.microsoft.com/en-us/azure/app-service-mobile/app-service-mobile-how-to-configure-microsoft-authentication

在我的前端Web应用程序上，当用户未经过身份验证时，它会被重定向到Microsoft的登录页面，当我尝试登录时，我收到以下错误：

另请注意我尚未向Azure部署任何内容，我的代码仍然是本地的，我现在只需要身份验证。

希望有人能再次帮助我。

由于

更新

所以我能够通过使用某人创建的msalx库来实现MSAL，这使得可以在Angular中集成msal。在使用我的个人Microsoft帐户登录后，我已经可以获得访问令牌，但问题是当我访问我的Web API时，它总是说401 Unauthorized。

提前致谢！

Answer 1

根据我的理解，您正尝试使用其Microsoft帐户对用户进行身份验证。

以下是有关如何设置和启用您的网络应用程序以使用基于Microsoft帐户的身份验证的有用指南。

https://docs.microsoft.com/en-us/azure/app-service-mobile/app-service-mobile-how-to-configure-microsoft-authentication

此外，您可以在设置和配置本地应用程序后在本地测试它，这是肯定的。

这是一个使用Microsoft帐户身份验证的GitHub repo示例Web应用程序。

https://github.com/lexdevel/MicrosoftAccountAuthentication

Answer 2

AFAIK，对于使用App Service Authentication / Authorization，您的C＃Web API需要部署到azure。应用服务身份验证/授权（ Easy Auth ）是Azure应用服务的一项功能，可作为本机IIS模块实施，该模块与您的Azure应用程序在同一个沙箱中运行。有关详细信息，请参阅Architecture of Azure App Service Authentication / Authorization。

根据您的方案，您可以参考以下方法：

使用App Service身份验证/授权（Easy Auth）

configure your App Service application to use Microsoft Account login
通过浏览器访问https://{your-appname}.azurewebsites.net/.auth/login/microsoftaccount以确保您已成功设置Web API，并且只有Microsoft帐户验证的用户才能访问您的Web API
对于您的前端网络应用，您可以利用JavaScript client library for Azure Mobile Apps进行记录并检索authenticationToken和userId，然后您可以设置x-zumo-auth带有值authenticationToken的请求标头作为访问Web API的标记，如下所示：

有关如何对用户进行身份验证的详细信息，请参阅How to: Authenticate users。

注意：对于您的本地SPA，您需要配置CORS设置并在您的Azure网站的“设置＆gt;身份验证/授权”下添加允许的外部重定向网址应用程序。有关详细信息，请参阅此issue。

在Web API中设置身份验证

您可以设置OAuth 2.0承载身份验证，使用AD v2.0端点，您可以使用MSA和工作或学校帐户来保护您的Web API。有关如何构建Web API的信息，请参阅Secure an MVC web API。
对于您的前端Web应用，您可以利用MSAL.js库进行日志记录并检索access_token，并使用该令牌调用您的Web API HTTP bearer request。
< / LI>

<强>更新

我使用了来自AppModelv2-WebAPI-DotNet的 TodoListService 项目，然后对我的客户端使用以下html，如下所示：

<!DOCTYPE html>
<html>
<head>
    <title>Login</title>
    <meta charset="utf-8" />

    <!-- IE support: add promises polyfill before msal.js  -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bluebird/3.3.4/bluebird.min.js" class="pre"></script>
    <script src="https://secure.aadcdn.microsoftonline-p.com/lib/0.1.1/js/msal.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>
<body>
    <script class="pre">
    var userAgentApplication = new Msal.UserAgentApplication("b3dd78af-d9da-459d-bf01-f87104d87450", null, function (errorDes, token, error, tokenType) {
        // this callback is called after loginRedirect OR acquireTokenRedirect (not used for loginPopup/aquireTokenPopup)
    });

    userAgentApplication.loginPopup(["user.read"]).then(function (token) {
        var user = userAgentApplication.getUser();
        console.log(user);
        console.log('access token:' + token);

        InvokeApi(token);

    }, function (error) {
        alert('login error:' + error);
    });

    function InvokeApi(token) {
        $.ajax({
            type: "GET",
            url: "http://localhost:9184/api/values",
            headers: {
                'Authorization': 'Bearer ' + token,
            },
        }).done(function (data) {
            console.log('invoked Web API \'http://localhost:9184/api/values\' with result: ' + data);
            alert(data);
        }).fail(function (jqXHR, textStatus) {
            alert('Error getting data');
        });
    }
    </script>
</body>
</html>

<强>结果：

此外，您可以参考此git示例JavaScript Single Page Application with an ASP.NET backend, using msal.js。

使用c＃web api进行Microsoft Azure身份验证

2 个答案: