我使用MSAL.JS登录Azure Active Directory时获得令牌问题。
也许我会描述您在多种情况下如何工作。
i。具有Active Directory Authentication的自动登录为禁用。应用程序注册门户的回调设置为应用程序的主页。我从https://github.com/azuread/microsoft-authentication-library-for-js/blob/dev/dev/devapps/vanillajstestapp/index_loginpopup.html
使用了代码- 无授权输入应用
- 单击"登录"的按钮，在登录"获取令牌"后。
一切都有效，但是我想要使用Active Directory Authentication
的授权ii。具有Active Directory Authentication的自动登录为已启用。应用程序注册门户的回调设置为" ***。我从https://github.com/azuread/microsoft-authentication-library-for-js/blob/dev/dev/devapps/vanillajstestapp/index_loginpopup.html
使用了代码- 使用授权输入应用程序并使用Active Directory Authentication登录
- AcquireTokenSilent正在发送错误，例如" USER_LOGIN_ERROR：需要用户登录"。
- 单击运行登录的按钮，登录我会收到错误，例如"回复地址****不匹配为应用程序配置的答复地址"
update ：设置useragentApplication.redirecturi ='****/。auth/login/aad/callback'和run loginPopup'和run loginpopup，token已交付，但仍在登录。p> 总结一下，使用Azure登录后，我会从AccearireTokenSilent获得错误" USER_LOGIN_ERROR：必需的用户登录"。
III。我希望该应用程序的表现如下：
- 使用授权输入应用程序并使用Active Directory Authentication登录
- 获取令牌
我可以这样做吗？
您正在使用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("nn" + 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>
如果要使用MSAL.JS通过客户端对用户进行身份验证，并保护您的Web API，然后在Azure中禁用'App Service Service Authentication'。使用OWIN中间件保护您的Web API。
以下示例显示了使用MSAL.JS保护的Web API，该Web API使用MSAL.JS：https：//github.com/azure-samples/active-directory-javascript-javascript-singlepageapp-dotnet-webapi-v2