使用msal.js登录Azure Active Directory时，我遇到了获取令牌的问题。
也许我会在几种情况下描述应用程序的工作原理。
予。使用Active Directory身份验证自动登录禁用。应用程序注册门户上的回调设置为应用程序的主页。我使用了https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/devApps/VanillaJSTestApp/index_LoginPopup.html
中的代码一切正常，但我希望通过Active Directory身份验证进行授权
II。使用Active Directory身份验证自动登录启用。应用程序注册门户上的回调设置为“***。auth / login / aad / callback”。我使用了https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/devApps/VanillaJSTestApp/index_LoginPopup.html
中的代码UPDATE ：设置userAgentApplication.redirectUri ='**** / .auth / login / aad / callback'并运行loginPopup后，会传递令牌，但它仍然是双重登录。
总结一下，在使用Azure登录后，我从acquireTokenSilent收到错误“user_login_error：需要用户登录”。
III。我希望应用程序的行为如下：
我可以这样做吗？
答案 0 :(得分：0)
您正在混合 Easy Auth 和使用MSAL手动保护网站。
如果您希望弹出页面自动弹出Azure Active Directory，则可以修改源以添加函数，以便在完全加载文档时执行loginPopup()方法。以下是供您参考的代码示例：
<html>
<head>
<title>authentication with Msal.js app</title>
<style>
.hidden {
visibility: hidden
}
.visible {
visibility: visible
}
</style>
</head>
<body>
<!-- bluebird only needed if this page needs to run on Internet Explorer -->
<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://code.jquery.com/jquery-3.2.1.min.js" class="pre"></script>
<h1>Sending an email with msal.js and Microsoft Graph</h1>
<div>
<div id="label">Sign-in with Microsoft</div>
<button id="auth" onclick="loginPopup();">Login (with Popup)</button>
</div>
<div id="sendEmail" class="hidden">
<input id="emailToSendTo" type="text" />
<button id="auth" onclick="sendEmail();">Send email</button>
</div>
<pre class="response"></pre>
<script class="pre">
var applicationConfig = {
clientID: '1e6af2ed-686c-4914-96ed-0cd7b1673cbb',
graphEndpoint: "https://graph.microsoft.com/v1.0/me/sendMail",
graphScopes: ["user.read", "mail.send"]
};
</script>
<script>
var userAgentApplication = new Msal.UserAgentApplication(applicationConfig.clientID, applicationConfig.authority, authCallback);
function authCallback(errorDesc, token, error, tokenType) {
//This function is called after loginRedirect. msal object is bound to the window object after the constructor is called.
if (token) {
}
else {
log(error + ":" + errorDesc);
}
}
function loginPopup() {
userAgentApplication.loginPopup(applicationConfig.graphScopes).then(function (idToken) {
//Login Success
userAgentApplication.acquireTokenSilent(applicationConfig.graphScopes).then(function (accessToken) {
//AcquireToken Success
updateUI();
}, function (error) {
//AcquireToken Failure, send an interactive request.
userAgentApplication.acquireTokenPopup(applicationConfig.graphScopes).then(function (accessToken) {
updateUI();
}, function (error) {
console.log(error);
});
})
}, function (error) {
console.log(error);
});
}
function updateUI() {
var authButton = document.getElementById('auth');
authButton.innerHTML = 'logout';
authButton.setAttribute('onclick', 'logout();');
var label = document.getElementById('label');
label.innerText = "Hello " + userAgentApplication.getUser().name + "! Please send an email with Microsoft Graph";
// Show the email address part
var sendEmailSpan = document.getElementById('sendEmail');
sendEmailSpan.className = "visible";
var emailAddress = document.getElementById('emailToSendTo');
emailAddress.value = userAgentApplication.getUser().displayableId;
}
function logout() {
// Removes all sessions, need to call AAD endpoint to do full logout
userAgentApplication.logout();
}
function sendEmail() {
userAgentApplication.acquireTokenSilent(applicationConfig.graphScopes)
.then(function (token, error) {
$.ajax({
type: "POST",
contentType: "application/json",
dataType: 'json',
beforeSend: function (request) {
request.setRequestHeader('Authorization', 'bearer ' + token);
},
url: applicationConfig.graphEndpoint,
data: JSON.stringify({ 'message': getEmail(), 'saveToSentItems': true }),
processData: false,
success: function (msg) {
log('Mail sucessfully sent.');
},
statusCode: {
200: function () {
log('Mail sucessfully sent.');
},
202: function () {
log('Mail sucessfully sent.');
}
}
});
});
}
function log(s) {
document.body.querySelector('.response').appendChild(document.createTextNode("\n\n" + JSON.stringify(s, true, 2)));
}
function getEmail() {
var email = {
Subject: 'Welcome to Microsoft Graph development with Msal and the Microsoft Graph sample',
Body: {
ContentType: 'HTML',
Content: getEmailContent()
},
ToRecipients: [
{
EmailAddress: {
Address: userAgentApplication.getUser().displayableId
}
}
]
};
return email;
}
// Get the HTMl for the email to send.
function getEmailContent() {
return "<html><head> <meta http-equiv=\'Content-Type\' content=\'text/html; charset=us-ascii\'> <title></title> </head><body style=\'font-family:calibri\'> <p>Congratulations " + userAgentApplication.getUser().name + ",</p> <p>This is a message from the Microsoft Graph Connect sample. You are well on your way to incorporating Microsoft Graph endpoints in your apps. </p> <h3>What’s next?</h3><ul><li>Check out <a href='https://graph.microsoft.io' target='_blank'>graph.microsoft.io</a> to start building Microsoft Graph apps today with all the latest tools, templates, and guidance to get started quickly.</li><li>Use the <a href='https://graph.microsoft.io/graph-explorer' target='_blank'>Graph explorer</a> to explore the rest of the APIs and start your testing.</li><li>Browse other <a href='https://github.com/microsoftgraph/' target='_blank'>samples on GitHub</a> to see more of the APIs in action.</li></ul> <h3>Give us feedback</h3> <ul><li>If you have any trouble running this sample, please <a href='https://github.com/microsoftgraph/angular-connect-rest-sample/issues' target='_blank'>log an issue</a>.</li><li>For general questions about the Microsoft Graph API, post to <a href='https://stackoverflow.com/questions/tagged/microsoftgraph?sort=newest' target='blank'>Stack Overflow</a>. Make sure that your questions or comments are tagged with [microsoftgraph].</li></ul><p>Thanks and happy coding!<br>Your Microsoft Graph samples development team</p> <div style=\'text-align:center; font-family:calibri\'> <table style=\'width:100%; font-family:calibri\'> <tbody> <tr> <td><a href=\'https://github.com/microsoftgraph/angular-connect-rest-sample\'>See on GitHub</a> </td> <td><a href=\'https://officespdev.uservoice.com/\'>Suggest on UserVoice</a> </td> <td><a href=\'https://twitter.com/share?text=I%20just%20started%20developing%20%23Angular%20apps%20using%20the%20%23MicrosoftGraph%20Connect%20sample!%20&url=https://github.com/microsoftgraph/angular-connect-rest-sample\'>Share on Twitter</a> </td> </tr> </tbody> </table> </div> </body> </html>";
};
$(document).ready(function () {
loginPopup();
});
</script>
</body>
</html>
答案 1 :(得分：0)
如果您希望客户端使用msal.js对用户进行身份验证并保护您的Web API，请禁用“应用程序服务身份验证”。在Azure中。改为使用OWIN中间件保护您的Web API。
以下示例显示了使用msal.js由Azure AD Endpoint V2保护的Web API：https://github.com/Azure-Samples/active-directory-javascript-singlepageapp-dotnet-webapi-v2