azure - 如何使用 Azure AD 保护简单的 HTML 文件？

Question

我有一个旧的静态网站，它只是纯 HTML 和用于 UI 效果的简单 JavaScript。本网站中没有服务器端代码、API、配置文件或任何内容 - 只有原始 HTML 文件、CSS、图片等。

该网站将不会托管在 Azure 中。它将位于本地 IIS 服务器上。如果我将网站拉入 Visual Studio，“配置 Azure AD 身份验证”向导将显示:

An incompatible authentication configuration was found in this project ().

如何使用 Azure AD 保护简单的 HTML 文件？

Answer 1

Visual Studio“配置 Azure AD 身份验证”向导适用于 ASP.Net Web 应用和 Web API。

就您而言，您正在构建的内容被视为“单页应用程序”或SPA。即使您可能有多个页面，该术语也适用于没有后端代码的仅客户端 Web 应用程序。

为此，您应该遵循Azure AD Javascript Single Page Application示例。

其要点是，您应该使用 ADAL.js，如本示例的 app.js 所示。 ，大致如下:

// Configure ADAL
window.config = {
    instance: 'https://login.microsoftonline.com/',
    tenant: '[Enter your tenant here, e.g. contoso.onmicrosoft.com]',
    clientId: '[Enter your client_id here, e.g. g075edef-0efa-453b-997b-de1337c29185]',
    postLogoutRedirectUri: window.location.origin,
    cacheLocation: 'localStorage', // enable this for IE, as sessionStorage does not work for localhost.
};
var authContext = new AuthenticationContext(config);

// Check For & Handle Redirect From AAD After Login
var isCallback = authContext.isCallback(window.location.hash);
authContext.handleWindowCallback();
$errorMessage.html(authContext.getLoginError());

if (isCallback && !authContext.getLoginError()) {
    window.location = authContext._getItem(authContext.CONSTANTS.STORAGE.LOGIN_REQUEST);
}

// Check Login Status, Update UI
var user = authContext.getCachedUser();
if (user) {
    //Do UI for authenticated user
} else {
    //Show UI for unauthenticated user
}

// Register NavBar Click Handlers
$signOutButton.click(function () {
    authContext.logOut();
});
$signInButton.click(function () {
    authContext.login();
});

注意:还有一个 Angular SPA sample .