I am developing an Outlook taskpane add-in in Angular and when the user clicks on the add-in button, i want to use Client Credential Flow to call a Protected Web API.
I tried using normal httpClient and do a POST request like below
let body=new HttpParams();
body=body.set("grant_type","client_credentials");
body=body.set("client_id","xxxxxxx");
body=body.set("client_secret","xxxxxx");
body=body.set("scope","https://xxxxxx/.default");
const url="https://login.microsoftonline.com/xxxxx/oauth2/v2.0/token";
this.httpClient.post(url,body)
I am getting the CORS error like below
Access to XMLHttpRequest at 'https://login.microsoftonline.com/xxxx/oauth2/v2.0/token' from origin 'https://xxxx.azurewebsites.net' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource..
Is there any way to resolve this error ? Tried to use MSAL as well here, but I couldn't find any documentation on Client Credential Flow for JS. It is available only for .NET
1.You should never put the client secret in the front-end.This is very unsafe!
2.We suggest you use https://github.com/AzureAD/azure-activedirectory-library-for-js. for frontend to integrate AAD with a ease.You can refer to No 'Access-Control-Allow-Origin' header with Microsoft Online Auth for details.
client_credentials grant_type is used in app only scenario. If you must use client credential flow, you need to get the access token in your app's backend and return it to the frontend.
Related
Good Day,
Currently I have a single tenent with a React UI and .NET Core Apis secured by Azure Active Directory without any problems.
We have recently moved to a new Azure Tenent, new Active Directory etc. I have create two new App Registrations, one single App Service for UI and one for API. I have linked the App Service to AAD (UI = UI App Registration, API = API App Registration).
The problem is the API is getting a 401 error and I think see that in the original tenent the Bearer token is in a JWT format but in the new instance it's not, I believe it my be a graph api access key.
New Tenent:
Authorization: Bearer PAQABAAAAAAD--DLA3VO7QrddgJg7WevrQvEQVbZEMD8su-tIp9k2bTFUTort7SZgeDI52P6KRYefHgtmj4YrecgUKZJ2wylGuhvIzIz642n7Sg0VMU1RwKtrzWlaMqK62CaSoJcstxiEf6 *****
Orginal Tenent:
Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiIsIng1dCI6Im5PbzNaRHJPRFhFSzFqS1doWHNsSFJfS1hFZyIsImtpZCI6Im5PbzNaRHJPRFhFSzFqS1doWHNsSFJfS1hFZyJ9.eyJhdWQiOiI3OThkN2ZkOC0zODk2LTQxOGMtOTQ0Ny0wNGFlNTQ2OGFkNDIiLCJpc3MiOiJodHRwczovL3N0cy53aW5kb3dzLm5ldC83ZDE3NTU3Ni03Y2Y3LTQyMDctOTA5My0wNmNiNmQyZDIwNjAvIiwiaWF0IjoxNjE2NDUyNzExLCJuYmYiOjE2MTY0NTI3MTEsImV4cCI6MTYxNjQ1NjYxMSwiYWNyIjoiMSIsImFpbyI6IkFTUUEyLzhUQUFBQU9mejhPZHp *****
Please someone kindly enought to provide some guidance / input where I am going wrong.
Regards
Paul.
When using Azure AD to obtain an access token, an additional resource parameter is required. Otherwise, the access token is not a JWT.
For example, if your web API's application ID URI is https://contoso.com/api and the scope name is Employees.Read.All, then with oidc-client the client configuration should be :
scope: 'openid profile email Employees.Read.All',
extraQueryParams: {
resource: 'https://contoso.com/api'
}
In App Service auth configuration, you can use additionalLoginParams
"additionalLoginParams": ["response_type=code", "resource=https://contoso.com/api"]
If you did not use a custom application ID URI, it may look like
api://868662dd-3e28-4c7f-b7d5-7ec02ac9c601
Quickstart: Configure an application to expose a web API
Firstly, the scope is incorrect.
You should Expose an API in your API App Registration and then add it as a permission in your UI App Registration. You can refer to this document.
And when you try to call the 'https://login.windows.net/{tenant}/oauth2/authorize endpoint, you need to specify the scope to include api://{app id of the API App Registration}. For example: api://{app id of the API App Registration} openid profile email. Then the access token would be for calling your API.
At last, for CORS issue, please configure the CORS as * in your web app to see if it helps.
Try to follow this step: Configure App Service to return a usable access token
In my experience, this problem occurs, when you try to authorize against version 1 of the endpoint.
Instead of calling
https://login.microsoftonline.com/{tenant}/oauth2/authorize
call
https://login.microsoftonline.com/{tenant}/oauth2/v2.0/authorize
You might be required to set something like "metadata URL" in you authorization library to:
https://login.microsoftonline.com/{tenant}/oauth2/v2.0/.well-known/openid-configuration
Make sure your builder follows this order...lifted from our API program.cs
These must be in order of
UseRouting -> UseAuthentication -> UseAuthorisation -> MapControllers
> app.UseRouting()
> app.UseAuthentication()
> app.UseAuthorization()
> app.MapControllers()
If app.UseAuthentication and app.UseAuthorization are not in this order in statement position you Will get 401 Unauthorised as at 01/2023 .Net 6 Core.
I am writing the backend flow of SAML2 integration, using Okta as an IDP (Identity Provider) and myself as a SP (Service Provider).
I am using python 3.5 and flask, and writing the flow with Onelogin's library - python3-saml using this manual https://github.com/onelogin/python3-saml.
When executing the command auth.login, which redirects me to Okta, I get the following error:
Failed to load https://dev-766941.oktapreview.com/app/<domain_name>dev766941_<domain_name>_1/exkfytpisliPsvo8w0h7/sso/saml?RelayState=https%3A%2F%2Ftest.<domain_name>.com%2Fapi%2Fauth%2Flogin%2Fsaml%2F&SAMLRequest=fVNdj9owEHy%2FXxHlHRxzaQgWIFHoBxKFCGgf%2BoJ8zuawLrFTrwPcv68duMJJPaJIUdazs7Oz6yHyqqzZpLF7tYY%2FDaB9CIJTVSpk7dEobIximqNEpngFyKxgm8mPBet1I1YbbbXQZfgu6X4ORwRjpVY%2BaT4bhavll8Xq23y5ix6fkjjOCxrlRT8q0gF9TIrCBdKU9wc0Sfo07cVx4hN%2FgUHHMQodZUuE2MBcoeXKumBE0w6N3LulEYsjRj%2F99qiZ608qbtvMvbU1MkJyOHT6STKIaVe%2FWF4bOEg4doWuCK9rwk0l0WHOkF37u6METi%2FFq60lljLDg06P0b5PEDXxDvha2cWbz1LlUj3fN%2BXpDEL2fbvNOtlqs%2FUUkzerplphU4HZgDlIAT%2FXi6t863rq9bqtrla0Uy0JdxMlpX6WinCBJBw7uiAYenGs9cqMPyaowPKcW06G5DbhSlGzpWthPst0KcVrG%2FfPV20qbj%2FulHZpG5F5p2ihrFFYg5CFhDz8RzMpS32cGuAWRqE1DYQBeVf8sqmQt3vrzLFwssFUVzU3Ev1s4cSFvTR9bfwWPi3dIq6hGN%2FdVcGEx7lw5j5HbXI%2FVhCu9tZwJ14bezHpv%2BRn1eSO7PHD2%2FHtJRz%2FBQ%3D%3D: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://test.<domain_name>.com' is therefore not allowed access.
I added https://test.domain_name.com to the "Trusted Origins" in my okta settings page using this manual https://developer.okta.com/docs/api/getting_started/enabling_cors and it didn't help ( I tried adding to CORS and to Redirect and also each one separately).
I also tried to add https://developer.okta.com to the "Trusted Origins" and it also didn't help.
One last thing I tried was adding the header Access-Control-Allow-Origin to the request, but it didn't add the header to the Okta request but to the request I have in my code (meaning, it added the header to the request that calls a function, auth.login, that internally calls to Okta instead to the request to Okta).
I would be very happy for any suggestions.
I am using Angular 1.x to POST a verification request to Google's re-captcha as follows:
var post_data = { //prepare payload for request
'secret':'xxxxx',
'response':fields.myRecaptchaResponse
};
$http.post('https://www.google.com/recaptcha/api/siteverify', post_data)
In my console I can see the following error:
XMLHttpRequest cannot load https://www.google.com/recaptcha/api/siteverify. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://igs.dev' is therefore not allowed access. The response had HTTP status code 405.
I have read multiple answers on Stackoverflow, most seem to suggest adding a plugin to Chrome but that is not a solution for my users who will be using the re-captcha to validate a contact form.
Is this a misconfiguration of my server or is my Angular script missing something? I have already ensured that my domain is configured in my re-captcha account.
ReCaptcha is validated on the server-side, not the client side. The CORS error is due to the fact that the ReCaptcha API is not meant to be used by a browser.
You need to send your recaptcha data to your API/server which then verifies it is correct by sending a request to the ReCaptcha API. There are no CORS restrictions when servers make HTTP requests to each other.
See this Tuts tutorial on how the implementation and flow of data works
The end point https://www.google.com/recaptcha/api/siteverify is part of server side validation and not the client side. You should hit this endpoint from your server, not from your client (Angular 1.X).
So the flow may look like this:
At your client side (Angular 1.X) you will be loading the re-captcha widget in your html which will perform the validation and store a hash value in a hidden input field which will be sent to your server along with the other form details when user submits the form. Now at your server side you will hit that endpoint to verify if the validation was successful.
Also, in no case you should be storing your secret at the client side. It should always be maintained at your server side for server-to-server communication purposes.
Read the docs here.
I followed the instructions found in the readme in the stormapth-sdk-react github respository to set up a basic login form. The form displays, but I am immediately greeted by errors in the console:
XMLHttpRequest cannot load https://{redacted}.apps.stormpath.io/me. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access. The response had HTTP status code 403.
I get an identical error for the login endpoint.
The Client API Guide indicates that client endpoints have to be configured to allow traffic from a particular domain, but does not provide any instructions for how to do this:
Applications that use the Client API have two relevant configuration parameters, both found on your Application’s page in the Stormpath Admin Console:...
Authorized Callback URIs: This list should include any URIs that your users will be returned to after they have completed authentication with an outside provider, for example as a part of the social login flow. For example, if you do not specify a redirect URI when you kick off the social login flow, the user will be redirected the first URI in this list.
Authorized Origin URIs: This list should include the application’s URL, or whatever URL will be included in the Origin header of requests sent to the Client API.
What do I need to do to get this working?
To fix this, you can login to https://api.stormpath.com, navigate to Applications > My Application, and modify the Authorized Origin URIs to include http://localhost:3000.
Stormpath seems to use a pretty similar setup to many API services. Like the directions say, go to your Stormpath Admin Console, and put your hostname (http://localhost:3000) in the relevant fields for both 1. and 2.
Doing so tells the Stormpath API to allow data to be sent to your application.
The Cross-Origin Resource Sharing (CORS) mechanism gives web servers cross-domain access controls, which enable secure cross-domain data transfers.
As the server you are using (for react) differs from the server you are requesting data(node or something else). (even the subdomain or port matters)
index.js: (server)
const cors = require('cors');
..
..
app.use(cors());
for more info about using cors: npm cors
I'm trying to implement google+ authentication using Google Passport Strategy and return the access token to client side(Angular) for subsequent requests. But I keep getting the error at client side. "XMLHttpRequest cannot load https://accounts.google.com/o/oauth2/v2/auth?response_type=code&redirect_ur…=1094664898379-8u0muh9eme8nnvp95dafuc3rvigu4j9u.apps.googleusercontent.com. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access." that I get while implementing google strategy for authentication in my web app. I use Angular framework at client side and Express on server.
I've also referred to following previous posts for solution but to no avail. The solutions offered are to use a simple href at Client Side, but I dont know how the access token can be passed to client side for making subsequent API requests. Any help will be greatly appreciated.
Angular/Node/Express/Passport - Issues when connecting to facebook(CORS)
Angular/Node/Express/Passport Cross Domain Problems - Enable CORS Passport Facebook Authentication
After a lot of searching which was frustrating, I finally was able to workaround this problem by using google token strategy for authentication. Here I authenticate the user at the client side first and then authenticate the token at the server end. The code snippet below is for fb but same applies for google as well.
app.post('/auth/facebook/accesstoken',
passport.authenticate('facebook-token',{session: false}),
function (req, res) {
// do something with req.user
if(req.user){
console.log('fb user authenticated');
res.send(req.user);
}
else{
console.log('no entry');
res.send(401);
}
}
);