I Request an authorization code from OAuth2 Server.
My purpose is to authorize user with my microsoft App.
Refered Document
My attempt for get Call:
function httpGet(){
var theUrl = "https://login.microsoftonline.com/common/oauth2/v2.0/authorize?client_id="client_id"&response_type=code&redirect_uri="redirect_uri"&response_mode=query&resource=https%3A%2F%2Fservice.contoso.com%2F&state=12345";
var req = new XMLHttpRequest();
req.open('GET', theUrl, true);
req.onreadystatechange = function() {
if (req.readyState === 4) {
if (req.status >= 200 && req.status < 400) {
console.log(req.responseText)
} else {
console.log("error")
}
}
};
req.send();
}
but this gives below error:
No 'Access-Control-Allow-Origin' header is present on the requested resource.
then I add the req.setRequestHeader("Access-Control-Allow-Origin", "*");
but it gives the below error:
Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.
-
You need to configure this on the server, not the Angular appjonrsharpe– jonrsharpe2016年11月11日 07:50:09 +00:00Commented Nov 11, 2016 at 7:50
-
@jonrsharpe What do you mean by "You need to configure this on the server"?Januka samaranyake– Januka samaranyake2016年11月11日 07:50:48 +00:00Commented Nov 11, 2016 at 7:50
-
I mean the server you're making the request to. Although that appears to be out of your control.jonrsharpe– jonrsharpe2016年11月11日 07:53:52 +00:00Commented Nov 11, 2016 at 7:53
-
I am trying to request OAuth2 server.Januka samaranyake– Januka samaranyake2016年11月11日 07:56:02 +00:00Commented Nov 11, 2016 at 7:56
-
Yes I understand that. But the server needs to know which origins it is supposed to respond to. Maybe there's some config you need to add; see e.g. stackoverflow.com/questions/28283037/…jonrsharpe– jonrsharpe2016年11月11日 08:07:16 +00:00Commented Nov 11, 2016 at 8:07
2 Answers 2
To integrate AAD in javascript, we suggest you to use azure-activedirectory-library-for-js which is a library in javascript for frontend to integrate AAD with a ease.
There are 2 options we need to pay attention on before we use ADAL for JS:
- According the node at https://github.com/OfficeDev/O365-jQuery-CORS#step-6--run-the-sample:
Note This sample will not work in Internet Explorer. Please use a different browser, such as Google Chrome. ADAL.js uses an iframe to get CORS API tokens for resources other than the SPA's own backend. These iframe requests require access to the browser's cookies to authenticate with Azure Active Directory. Unfortunately, cookies are not accessible to Internet Explorer when the app is running in localhost.
- Enable the
oauth2AllowImplicitFlowof your Azure AD application. Refer to https://crmdynamicsblog.wordpress.com/2016/03/17/response-type-token-is-not-enabled-for-the-application-2/ for the detailed steps.
Here is the code sample to acquire access token from Microsoft Graph:
<script src="https://secure.aadcdn.microsoftonline-p.com/lib/1.0.10/js/adal.min.js"></script>
<body>
<a href="#" onclick="login();">login</a>
<a href="#" onclick="getToken()">access token</a>
</body>
<script type="text/javascript">
var configOptions = {
tenant: "<tenant_id>", // Optional by default, it sends common
clientId: "<client_id>",
postLogoutRedirectUri: window.location.origin,
}
window.authContext = new AuthenticationContext(configOptions);
var isCallback = authContext.isCallback(window.location.hash);
authContext.handleWindowCallback();
function getToken(){
authContext.acquireToken("https://graph.microsoft.com",function(error, token){
console.log(error);
console.log(token);
})
}
function login(){
authContext.login();
}
</script>
Comments
Without using any frontend google libraries I came up with solution.
window.open("url")
After complete the authentication I get the code from url params and send it backend and achieve the access token, refersh token.......etc,