How to send firebase auth tokens to backend server? - ajax

I want to identify currently signed-in user on my nodejs server. To do so securely, after a successful sign-in, I have to send the user's ID token to your server using HTTPS.
As in firebase docs
firebase.auth().currentUser.getIdToken(/* forceRefresh */ true).then(function(idToken) {
// Send token to your backend via HTTPS
// ...
}).catch(function(error) {
// Handle error
});
If the token is sent to the backend server using AJAX post request then what should be the URL in xhr request var xhr = new XMLHttpRequest(); xhr.open('POST', url , true); and how to recieve it on nodejs backend server app.js file.
Or there is any other method to do it?

You can add an authorization header in request and parse the header value in your nodejs app.
xhr.setRequestHeader('Authorization', firebaseTokenId);
In your nodejs application you can do:
function abc(req, res) {
authHeader = req.get('authorization');
}

Related

I'm getting "blocked by CORS policy" when I try to call Instagram API using Axios [duplicate]

This question already has answers here:
Access-Control-Allow-Origin with instagram api
(1 answer)
CORS error, when i use instagram API with angularjs
(1 answer)
Closed 3 years ago.
I'm trying to fetch some images from my Instagram account in a Laravel application with Vue as front end. When I try to do it in a standalone Vue app, it works well, but when I do so with Laravel, I got a message saying "has been blocked by CORS policy: Request header field x-csrf-token is not allowed by Access-Control-Allow-Headers in preflight response."
I'm using Laravel 5.8 and the Vue and Axios that comes within in and I'm using Homestead as my localhost server.
I've tried a lot of tips that I found here and on Google but I had no success. Basically, I'm trying the very basic of Axios call
beforeMount() {
axios.get('https://api.instagram.com/v1/users/self/media/recent/?access_token=[MY_ACCESS_TOKEN]').then(response => console.log(response))
}
I already created a Cors middleware on Laravel and tried a lot of headers settings on Axios.
I'm basically trying to retrieve a list of my Instagram posts and bypass that cors / x-csrf error.
Laravel automatically applies the X-CSRF-TOKEN header to all axios requests. This is so you can communicate with your application without having to pass the CSRF token every time for POST, PUT, DELETE, etc.
resources/js/bootstrap.js (default settings)
/**
* Next we will register the CSRF Token as a common header with Axios so that
* all outgoing HTTP requests automatically have it attached. This is just
* a simple convenience so we don't have to attach every token manually.
*/
let token = document.head.querySelector('meta[name="csrf-token"]');
if (token) {
window.axios.defaults.headers.common['X-CSRF-TOKEN'] = token.content;
} else {
console.error('CSRF token not found: https://laravel.com/docs/csrf#csrf-x-csrf-token');
}
You should be able to remove the offending header by doing something like this:
beforeMount() {
// create a new instance so we don't delete the csrf token for other requests
let instance = axios.create();
// delete the x-csrf-token header
delete instance.defaults.headers.common['X-CSRF-TOKEN'];
// use the new instance to make your get request
instance.get('https://api.instagram.com/v1/users/self/media/recent/?access_token=[MY_ACCESS_TOKEN]')
.then(response => console.log(response))
}
Your AJAX request to the Instagram API endpoint has to be sent as a jsonp request which means the dataType of the request has to be jsonp.
This blob in axios repository contains an example of sending a request using jsonp which is mentioned below.
Install jsonp package, if you haven't already.
npm install jsonp --save
and then;
const jsonp = require('jsonp');
jsonp('http://www.example.com/foo', null, (err, data) => {
if (err) {
console.error(err.message);
} else {
console.log(data);
}
});
Below is an example of sending a request using jQuery method with jsonp dataType to the Instagram API endpoint.
$.ajax({
url: "https://api.instagram.com/v1/users/self/media/recent/?access_token=[MY_ACCESS_TOKEN]",
type: "GET",
crossDomain: true,
dataType: "jsonp",
success: function(response){
console.log(response);
}
});

Adding the application autehntication to Swagger UI

I have Spring boot app where I integrate JWT authentication.
In order to authenticate, user need to send a POST request to /login with username and password, then he gets a JSON response with {"token": "BEARER SOME_TOKEN" }.
In my swagger UI, when I click "Try it out" and execute a request, the request is being sent without any token.
Question - Is there any way to query a login request and add authorization token to the Swagger UI requests?
In this case we can intercept the tokens and add them to all the requests by using these two interceptors in the index.html when defining SwaggerUIBundle:
const ui = SwaggerUIBundle({
...
responseInterceptor:
function (response) {
if (response.obj.access_token) {
console.log(response.obj.access_token)
const token = response.obj.access_token;
localStorage.setItem("token", token)
}
return response;
},
requestInterceptor:
function (request) {
request.headers.Authorization = "Bearer " + localStorage.getItem("token");
return request;
}
}
The responseInterceptor captures the response and if it contains the field "token" it saves it in local storage.
The requestInterceptor adds the Authorization header on each call you make from swagger-ui using the value from local storage.
This fix is for using v3 of swagger-ui:
<script src="https://unpkg.com/swagger-ui-dist#3.12.1/swagger-ui-standalone-preset.js"></script>
<script src="https://unpkg.com/swagger-ui-dist#3.12.1/swagger-ui-bundle.js"></script>

MVC to WebAPI- httpclient

I have MVC App and webapi and both are in different projects and mvc app authenticates via webapi using token authentication. I can authenticate via webapi and get the bearer token in MVC.But when i pass the bearer token to webapi and access resources which are protected by authorize keyword , it throws unauthorized 401 response. Iam using httpclient within MVC to communicate to webapi
1) Using fiddler i can login to webapi and access the webapi resouces using bearer token and authorization working properly.
2) using console app , i can login to webapi and access the webapi resources using bearer token and httpclient works properly
3) using a different MVC project and access the webapi using httpclient gives the same unauthorized error.
using (System.Net.Http.HttpClient client = new System.Net.Http.HttpClient(handler))
{
client.BaseAddress = new Uri(url);
client.DefaultRequestHeaders.Accept.Clear();
client.DefaultRequestHeaders.Accept.Add(new MediaTypeWithQualityHeaderValue("application/json"));
client.DefaultRequestHeaders.Authorization = new AuthenticationHeaderValue("Bearer", BearerToken);
string json = JsonConvert.SerializeObject(requestvalue);
System.Net.Http.HttpResponseMessage response = await client.PostAsync(url, new StringContent(json, Encoding.UTF8, "application/json"));
if (response.IsSuccessStatusCode)
{
HttpContent content = response.Content;
if (content != null)
{
value = content.ReadAsAsync<T>().Result;
}
}
}
Can anyone help on this issue?
I'd recommend you to capture the HTTP request sent through the HTTP Client via Fiddler and compare it to the request that was successful.
Even though, you're setting the Authorization header on the http client, I'm not sure if it is sent in the right format required by the Web API unless I inspect the raw HTTP request
Also you can try setting the authorization header, like below.
client.DefaultRequestHeaders.Add("Authorization", "Bearer " + tokenNo);

Updating authorization header in websocket graphql

I am trying to implement authentication in Graphql using firebase and websockets (on react native).
The client uses the firebase to authenticate and gets a token. It then sends the token to the server over a websocket client, which validates the user using the admin sdk.
I am facing two problems:
When the app boots up, it establishes a ws connection which by that time, it has no authorization header. The user gets a token after a while using firebase.
The token expires after some time, so after a while I need to update the authorization header in the websocket connection, and re-run the query, mutation or subscription which got rejected because of the expired token.
Is there a way to update the authorization header and re-run the query?
Do I need to close the previous connection and open a new one using the new token in the authorization header? How is this done?
I am using apollo-server, apollo-client, apollo-link, subscriptions-transport-ws.
I haven't run into your exact issue before, but you should check out connectionParams field. If on startup a new websocket client is created, you can fetch a new token asynchronously in the connectionParams.
import { createClient } from 'graphql-ws';
export const createWebsocketClient = (user) => createClient({
url: 'ws://localhost:8080/v1/graphql',
connectionParams: async () => {
const token = await user.getToken();
return {
headers: {
Authorization: `Bearer ${token}`,
},
};
},
});
The token is only sent when initializing the connection, so even if the token expires after the initializing, it shouldn't be a problem.

Request with token from ADAL for Cordova returns 401 response from Web Api

I'm hoping someone can help with this:
I have a web api secured with Azure AD Bearer Authentication, where I have two web clients that can successfully authenticate on the web api using bearer tokens from AD. The Web API and both web applications are configured as applications in AD. I've tried to use ADAL for Cordova for accessing the web api a iOS/Android app but it's returning 401.
ClaimsPrincipal.Current.Identity.IsAuthenticated is returning false.
I'm using the client id for the native application I've setup in Azure AD, and I'm receiving the token but this token is invalid. After I've parsed the token on jwt.io, everything seems correct but I've noticed the token doesn't have a header.
I've added permissions to access the Web Api and sign in and access AD as the user.
The code I'm using in Cordova is below, the authority I'm using is the same as the other apps that are working. Where resource is the app Id for the Web Api in AD, and client id is the client id for the native app in Azure Ad.
// Attempt to authorize user silently
AuthenticationContext.acquireTokenSilentAsync(resource, clientId)
.then(function (result) {
sessionService.logIn(result.idToken);
console.log(result);
deferred.resolve();
}, function () {
// We require user credentials so triggers authentication dialog
AuthenticationContext.acquireTokenAsync(resource, clientId, redirectUri)
.then(function (result) {
console.log(result);
sessionService.logIn(result.idToken);
deferred.resolve();
}, function (err) {
console.log("Failed to authenticate" + err);
deferred.reject("failed to authenticate");
});
});
I've also tried using result.accessCode, which also doesn't work.
StartUp.Auth.cs in Web Api:-
app.UseCors(Microsoft.Owin.Cors.CorsOptions.AllowAll);
app.UseWindowsAzureActiveDirectoryBearerAuthentication(
new WindowsAzureActiveDirectoryBearerAuthenticationOptions
{
Tenant = ConfigurationManager.AppSettings["ida:Tenant"],
TokenValidationParameters = new TokenValidationParameters {
ValidAudiences = Audiences
}
});
}
Can anyone help please?
Thanks
You appear to be sending the wrong token to the API - you are supposed to send result.accessToken. See https://github.com/Azure-Samples/active-directory-cordova-multitarget/blob/master/DirSearchClient/js/index.js for an example.

Resources