How can we send OAuth2.0 with axios in React js - reactjs

I am working on one authentication problem where i have to implement OAuth2.0 authentication for my React App. Is there any way that i can use that authentication with Axios Promise based library???

You will have to pass your Token in the header.
See below;
const instance = axios.create({
baseURL: 'http://localhost/api/',
headers: {'Authorization': 'basic '+ token}
});
instance.get('/path')
.then(response => {
return response.data;
})
OR
Set an Authorization cookie in the browser once you get your token.
The browser will always send the Authorization cookie in each request made to the server. You won't have to pass it through Axios get/post.
UPDATE:
In order to get the access token from the oAuth server, pass the client_id, client_secret, scope and grant_type as follows;
var axios = require("axios");
axios.request({
url: "/oauth/token",
method: "post",
baseURL: "http://sample.oauth.server.com/",
auth: {
username: "myUsername", // This is the client_id
password: "myPassword" // This is the client_secret
},
data: {
"grant_type": "client_credentials",
"scope": "public"
}
}).then(respose => {
console.log(respose);
});
I am assuming that you are using grant_type = "client_credentials", if not, then based on the grant_type you use, you will have to also change the request parameters accordingly.

Related

Microsoft Graph API: Access Token 403 Forbidden error Using ajax call but works properly using postman

When I try to make a rest call from postman I am able to get access token but using ajax call I am getting 403 forbidden error. Appended https://cors-anywhere.herokuapp.com/ url to access token url to avoid CORS error.
const formData = new FormData();
formData.append("client_id", "client_id");
formData.append("client_secret", "S7D7Q~excS5KjBh9JnPK-afZjTjtALGTKNweP");
formData.append("grant_type", "client_credentials");
formData.append("scope", "https://graph.microsoft.com/.default");
$(document).ready(function () {
requestToken();
});
var token;
function requestToken() {
$.ajax({
async: true,
crossDomain: true,
credentials: "include",
url: "https://cors-anywhere.herokuapp.com/https://login.microsoftonline.com/b262d1f3-4738-400d-ad54-c82cdabb6540/oauth2/v2.0/token",
method: "POST",
headers: {
"content-type": "application/x-www-form-urlencoded"
},
cache: false,
processData: false,
contentType: false,
data: formData,
success: function (response) {
console.log(response);
token = response.access_token;
},
});
}
You should not use a client credential in your front-end. That's your application's password and will be visible to anyone visiting the page. Also if that is your actual secret in the question, you should remove it and create a new one.
This URL will not work:
https://cors-anywhere.herokuapp.com/https://login.microsoftonline.com/b262d1f3-4738-400d-ad54-c82cdabb6540/oauth2/v2.0/token
The reason you get a CORS error is because Azure AD is trying to prevent you from shooting your own foot.
AAD sees the request and thinks it should not come from a browser front-end and thus denies it.
The correct way to get the token is to use MSAL.js and acquire a token on behalf of the signed in user (delegated permissions).

Microsoft Graph API - not receiving refresh token

I'm using the below guide to setup Oauth2 for my app.
https://learn.microsoft.com/en-us/graph/auth-v2-user
this is the /authorize URL get request, which is working fine:
GET https://login.microsoftonline.com/common/oauth2/v2.0/authorize?client_id=${clientId}&response_type=code&redirect_uri=${redirectUri}&response_mode=query&scope=offline_access%20user.read%20files.readwrite
then, i get the code from the redirectUri and POST to this URL:
POST https://login.microsoftonline.com/common/oauth2/v2.0/token
Which returns a access_token and a refresh_token.
However, whenever i need to refresh the tokens, Graph API only returns a new access_token.
I'm using axios and qs:
//get new tokens
const scope = "Files.ReadWrite";
const data = qs.stringify({
client_id: clientId,
client_secret: clientSecret,
grant_type: "refresh_token",
redirect_uri: redirectUri,
scope: scope,
refresh_token: oneDriveRefreshToken
});
const headers = {
"Content-Type": "application/x-www-form-urlencoded",
};
const response = await axios.post(tokenEndpoint, data, headers);
const json = response.data;
functions.logger.debug(json.access_token); //ok
functions.logger.debug(json.refresh_token); //undefined
As far as i understand, the authorization code flow along with "offline_access" scope should enable you to get a new refresh token when calling the /token endpoint
I noticed that the scope you defined in the code does not include offline_access, so it just returns you an access token with Files.ReadWrite permission. If you want to obtain an refresh token, please add offline_access to the scope.
Try to change the scope to: const scope = "Files.ReadWrite offline_access";.

Axios not authenticating to API

Ive been trying all day to get data from my Asp.Net Api but with no avail. I login and get an authentication token from the server and store it locally but when I try to perform any action that requires authentication, the server returns a 401 response. Is there something Im doing wrong in my code? When I use a tool like postman, everything works okay but not in my app.
This is my login
try {
response = await API.post(AuthUrl, credentials)
if(response.status >= 200 || response.status <= 299){
let Auth = {
Username: response.data.Username,
Roles: response.data.Roles,
Expires: response.data.Expires,
Token: response.data.Token
};
localStorage.setItem(window.location.host, JSON.stringify(Auth));
}
}
This is my axios encapsulator
export default axios.create({
baseURL: BaseUrl,
responseType: "json",
auth: `Bearer ${localStorage.getItem(window.location.host) == null? "" : JSON.parse(localStorage.getItem(window.location.host)).Token}`
})
and this is how im consuming it
try{
const response = await API.get(getUrl)
setLoading(false);
//........Do something with response
}
This is what is logged at the server
Microsoft.AspNetCore.Hosting.Internal.WebHost:Information: Request starting HTTP/2.0 GET https://localhost:44307/api/classes/getclasses/
Microsoft.AspNetCore.Cors.Infrastructure.CorsService:Information: CORS policy execution successful.
Microsoft.AspNetCore.Routing.EndpointMiddleware:Information: Executing endpoint 'SchoolManager.Web.Controllers.ClassesController.GetClasses (SchoolManager.Web)'
Microsoft.AspNetCore.Mvc.Internal.ControllerActionInvoker:Information: Route matched with {action = "GetClasses", controller = "Classes", page = "", area = ""}. Executing controller action with signature System.Collections.Generic.IEnumerable`1[SchoolManager.Dtos.Tenancy.ClassDto] GetClasses(System.String, System.String) on controller SchoolManager.Web.Controllers.ClassesController (SchoolManager.Web).
Microsoft.AspNetCore.Cors.Infrastructure.CorsService:Information: CORS policy execution successful.
Microsoft.AspNetCore.Authorization.DefaultAuthorizationService:Information: Authorization failed.
Microsoft.AspNetCore.Mvc.Internal.ControllerActionInvoker:Information: Authorization failed for the request at filter 'Microsoft.AspNetCore.Mvc.Authorization.AuthorizeFilter'.
Microsoft.AspNetCore.Mvc.ChallengeResult:Information: Executing ChallengeResult with authentication schemes (Bearer).
Microsoft.AspNetCore.Authentication.JwtBearer.JwtBearerHandler:Information: AuthenticationScheme: Bearer was challenged.
Microsoft.AspNetCore.Mvc.Internal.ControllerActionInvoker:Information: Executed action SchoolManager.Web.Controllers.ClassesController.GetClasses (SchoolManager.Web) in 146.8824ms
Microsoft.AspNetCore.Routing.EndpointMiddleware:Information: Executed endpoint 'SchoolManager.Web.Controllers.ClassesController.GetClasses (SchoolManager.Web)'
Microsoft.AspNetCore.Hosting.Internal.WebHost:Information: Request finished in 218.2724ms 401
The way the axios.create method is used is not right.
Ref: https://github.com/axios/axios#request-config
The documentation clearly shows that config auth: indicates that HTTP Basic auth should be used, and supplies credentials. For Bearer tokens and such, use Authorization custom headers instead so in your case you can do something like this
export default axios.create({
baseURL: BaseUrl,
responseType: "json",
headers: {'Authorization': "bearer " + JSON.parse(localStorage.getItem(window.location.host)).Token}})

Django JWT send token via Angularjs

how shall I send the token too access a view. Can I send it via POST or does it has to be via the header?
How can I send the token via header if that is necessary?
you have to send the token in the Authorization header. The token should be JWT <token>, as per documented in django jwt.
Here is the Angularjs based function I have written to show how to sign up, the code is very basic just for understanding you can write a separate service or factory, but for the sake of explaining this seems good.
$scope.registerUser = function(){
var postDict = $scope.user;
$http.post('http://127.0.0.1:8000/api/v1'+'/accounts/', postDict).success(function(data){
$scope.userRegistered = data;
var authData = {
username: data.username,
password: data.password
};
$http.post('http://127.0.0.1:8000/api-token-auth/', authData).success(function(data){
var token = data.token;
$http({
method : 'POST',
url : 'http://127.0.0.1:8000/api/v1/auth/login/',
data : authData, // pass in data as strings
headers : { "Content-Type": "application/json", "Authorization": "JWT "+data.token } // set the headers so angular passing info as form data (not request payload)
})
.success(function(data){
console.log(data);
var userdata = { "username": data.username, "first_name": data.first_name , "token": token , "last_name": data.last_name , "email": data.email};
$window.localStorage.setItem('userdata', JSON.stringify(userdata));
$state.go('app.dashboard');
});
});
});
}
now here we have obtained the token and in the headers property of the $http.post method of the angularjs, we have used this token for login.
This is how you can use Django JWT in Angularjs , also have a look at the django jwt documentation
You have to send it through a header named Authorization with the value: Token your-token-value.
In AngularJS you can do this through the $httpProvider in the configuration of your module, for instance:
angular.module('mymodule', []).config(function($httpProvider) {
$httpProvider.defaults.headers.common['Authorization'] = 'Token your-token-value';
});
After you do that, every request made with $http will have this header.

Angular $http post with custom headers

I am new to angular and am from .net framework. I need to post a angular request to .net service, where it expects two custom headers from the client.
angular post command:
var request = $http(
{
url: "http://localhost:53585/api/myService/Validate",
method: "POST",
data: JSON.stringify(payload),
headers: { 'first_token': sessionService.first_token, 'second_token': sessionService.second_token }
});
But in the service side, I can see only first_token in the request header and not the second token. What I am missing here?
Issue is with my service. I figured out and restarted the IIS and then service was able to read both the headers token
I found this method in a forum, it works.
return this.http.post<any>('https://yourendpoint', { username, password }, { headers: new HttpHeaders().set('Authorizaion', 'your token')})
.pipe(map(user => {
// login successful if there's a jwt token in the response
if (user && user.token) {
// sto`enter code here`re user details and jwt token in local storage to keep user logged in between page refreshes
localStorage.setItem('currentUser', JSON.stringify(user));
}
console.log(user);
return user;

Resources