I want to retrieve the user details for displaying the username of the user who is logged-in
I need to fetch the username from "http://127.0.0.1:8000/rest-auth/user/" from django-rest-auth
I am new to reactjs and tried the authentication which was successfully but couldn't get pass this.
I have tried this so far
axios.get(`http://127.0.0.1:8000/rest-auth/user/`,
{
headers: { 'Authorization': "token " + localStorage.getItem('token') }
}
).then(res => {
console.log(res)
}).catch(Error => {
console.log(Error)
})
which returns the forbidden 403 error;
Errors
Error: Request failed with status code 403
at createError (createError.js:16)
at settle (settle.js:17)
at XMLHttpRequest.handleLoad (xhr.js:61)
Also in the above code I also specified the headers in the following manner headers: { 'Authorization': "token key_from_DRF " } but no luck
I have also tried this
axios.get(`http://127.0.0.1:8000/rest-auth/user/`,
{
headers: { 'Content-Type': 'application/json' }
}
)
.then(res => {
console.log(res)
}).catch(Error => {
console.log(Error)
})
which returns the same error as before.
How should I execute this request successfully?
The axios POST method is correct, however make sure you passes the token
let tokentoserver = localStorage.getItem('token');
console.log(tokentoserver);
axios.get(`http://127.0.0.1:8000/rest-auth/user/`,
{
headers: { 'Authorization': "Token " tokentoserver }
}
).then(res => {
console.log(res)
}).catch(Error => {
console.log(Error)
})
I have removed the + sign you used to add token together
Related
This is my JS code for the API
export const getUser = async (user) => {
//Working
const json = await fetch( "*****/username/getUser", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({
user:user
}),
})
.then((res) => {
return res.json();
})
.catch((err) => {
console.log("Error in getUser: " + err);
});
return json;
};
Here is an attempt to make the request, which unfortunately return the authentication error.
fetchUser.request("kirolosM")
.then((result)=>{
console.log(result);
}).catch((err)=>{console.log("Error ",err);})
The error
{
"message": "Missing Authentication Token"
}
I have tested the API using postman and it is working as expexted.
Probably useful to compare the request sent from your json code to the one you're sending from postman. It looks like you need to include you auth token in your headers in your request.
Something like
export const getUser = async (user) => {
//Working
const json = await fetch( "*****/username/getUser", {
method: "POST",
headers: {
"Content-Type": "application/json",
"Authentication": `Bearer ${token}`
},
...
So I have this react native code that sends a token in string format, yes I've checked that var token = getAccessToken() is a string and I've console.log it to ensure it is a JWT token as well. But on the Django side when I check request.headers.get('Authorization', None) it outputs: 'Bearer [object Object]' what's going on?
React Native Code
import {Auth} from 'aws-amplify';
export async function getAccessToken() {
try {
const currentUser = await Auth.currentAuthenticatedUser();
console.log(currentUser);
Auth
.currentSession()
.then(res => {
let accessToken = res.getAccessToken();
// let jwt = accessToken.getJwtToken();
// You can print them to see the full objects
// console.log(`myAccessToken: ${JSON.stringify(accessToken)}`);
// console.log(`myJwt: ${JSON.stringify(jwt)}`);
console.log(accessToken.jwtToken)
return accessToken.jwtToken
});
} catch (error) {
console.log('error signing up:', error);
}
}
const getPosts = () => {
var token = getAccessToken();
const config = {
headers: { Authorization: `Bearer ` + token }
};
axios
.get(`${url}/posts`, config)
.then(response => {
console.log(response)
setData(response.data);
})
.catch(error => {
console.log(JSON.stringify(error));
});
}
I also tried
const config = {
headers: { Authorization: `Bearer ${token}` }
};
I also tried
function getPosts() {
var token = getAccessToken().then(token => {
const config = {
headers: {
Authorization: `Bearer ${token}`
}
};
console.log(token)
axios
.get(`${url}/posts`, config)
.then(response => {
console.log(response)
setData(response.data);
})
.catch(error => {
console.log(JSON.stringify(error));
});
}).catch(error => {
console.log(JSON.stringify(error));
});;
};
and console.log(token) is outputting "undefined"
Update getAccessToken to return result of
Auth .currentSession()
And
Make getPosts function async and await getAccessToken().
OR
Use the then block to result of promise
getAccessToken().then(token=>{ // Call the api },err=>{ // Handle the error }
Otherwise what you are getting is a promise that's not resolved yet.
I've been trying to implement some authentication component in my app for a few hours now, and I still don't understand some of the things that are happening.
Basically, I'd like to send a POST request containing some credentials to my API, which sends me a cookie back with a token if the credentials worked. Then, the cookie should be included in the headers of all future requests to my API (which I believed was automatic).
server.js (my API is a mockup for now, with JSON files)
...
app.post('/api/login', jsonParser, (req, res) => {
fs.readFile(ACCOUNTS_FILE, (err, data) => {
if (err) {
console.error(err);
process.exit(1);
}
const accounts = JSON.parse(data);
const credentials = {
email: req.body.email,
password: req.body.password,
};
var token = null;
for (var i = 0; i < accounts.length; ++i) {
const account = accounts[i];
if (account.email === credentials.email
&& account.password === credentials.password) {
token = account.token;
break;
}
}
if (token) {
res.setHeader('Set-Cookie', `access_token=${token}; Secure; HttpOnly;`);
res.json({ token });
} else {
res.json({ token: null });
}
});
});
...
app.js
...
handleConnection(e) {
e.preventDefault();
const email = this.state.email.trim();
const password = this.state.password.trim();
if (!email && !password) {
return (false);
}
fetch(loginUrl, {
method: 'POST',
headers: {
Accept: 'application/json',
'Content-Type': 'application/json',
credentials: 'include',
},
body: JSON.stringify(this.state),
})
.then((response) => response.json())
.then((data) => {
console.log(data);
})
.catch((error) => {
console.warn(error);
});
return (true);
}
...
Now the console.log(data) always displays my token (or null if my credentials are wrong), but the cookie thing doesn't work...
See, I receive the Set-Cookie header, but I still have no cookie on my page.
And even if I managed to get the cookie, when I try to create a cookie using document.cookie = "access_token=123"; and then send the request again, my cookie doesn't go in my header like it would with a jQuery Ajaxcall :
I read here that adding credentials: 'include' would save the day, but unfortunately it didn't.
What am I missing here?
Thanks in advance!
I had the same problem and I found the answer in Peter Bengtsson's comment here: https://davidwalsh.name/fetch
If I understood, in your case the fetch should be:
fetch(loginUrl, {
credentials: 'same-origin',
method: 'POST',
headers: {
Accept: 'application/json',
'Content-Type': 'application/json'
},
body: JSON.stringify(this.state),
})
I am trying to optain a token from Django - OauthToolkit but I only get the "unsupported_grant_type" error:
Here is what I have writen in react-native:
async getToken (client_id, client_key, username, password) {
let response = await fetch('https://example.com/o/token/', {
method: 'POST',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
},
body: JSON.stringify({
'client_id': client_id,
'client_secret': client_key,
'grant_type': 'password',
'username': username,
'password': password,
})
})
let responseJson = await response.json()
var token = responseJson.error <- written to see the error (shoul be responseJson.acces_token)
this.setState({token})
}
other posts mentioned it could be an error in the headers - but it leaves me clueless right now.
After scratching my head and countless google searches, here's how I did it.
allow me to make some assuptions
Assume your backend server works fine, and any endpoints are protected.
Assume when you go to access an endpoint you get the error
"detail": "Authentication credentials were not provided."
Assume you can authenticate/get access token from postman or by sending a POST request to /o/token with the parameters
username
password
client_id
grant_type
With django-oauth-toolkit, it's crucial to send the data/body as
'Content-Type': 'application/x-www-form-urlencoded'
Note: My approach might not be neat so I welcome any constructive criticism/advise
import { AUTH_LOGIN} from 'react-admin';
var _client_id = 'xxxxxxxxx';
var _grant_type = 'password';
export default (type, params) => {
if (type === AUTH_LOGIN) {
const {username, password } = params;
let _data = "grant_type="+_grant_type+"&username="+username+"&password="+password+"&client_id="+_client_id
const request = new Request('http://localhost:8000/api/ps/o/oauth/token/', {
method: 'POST',
headers: new Headers({
'Content-Type': 'application/x-www-form-urlencoded',}),
body : _data,
})
return fetch(request)
.then(response => {
if (response.status < 200 || response.status >= 300) {
throw new Error(response.statusText);
}
return response.json();
})
.then(({ access_token }) => {
localStorage.setItem('token', access_token);
});
}
return Promise.resolve();
}
Finally yet importantly, /o/token returns a dictionary with key 'access_token' and not token. As such, modify your code as highlighted below
.then(({ access_token }) => {localStorage.setItem('token', access_token);});
How can I upload video files to facebook using FB api? I looked around stackoverflow but I can only find answers when the video/picture is already online somewhere, but I want to let the user directly upload a file to facebook via my application.
One solution that can upload to facebook is https://stackoverflow.com/a/8195849/364938, but it assumes I have the picture online somewhere.
Is this even possible? If if is, then how?
This is my code for uploading video using javascript from client side.I used axios for http requests, but you can use your own.
function uploadVideo(adaccount, access_token, file) {
return axios({
method: 'POST',
url: `${adaccount}/advideos`,
params: {
access_token,
upload_phase: 'start',
file_size: file.size
}
})
.then(res => {
return new Promise(resolve => {
resolve(transferVideo(
adaccount,
access_token,
res.data.upload_session_id,
res.data.start_offset,
res.data.end_offset,
file,
1
))
})
})
.catch(err => {
// Note: you can handle your error here
console.log(err)
})
}
function transferVideo(adaccount, token, sessionId, start, end, file, number) {
if (start === end) {
return new Promise(resolve => {
resolve(postVideo(adaccount, token, sessionId, file.name))
})
}
const blob = new Blob([file], {
type: file.type
})
const chunk = blob.slice(start, end, file.type)
const formData = new FormData()
formData.append(
'video_file_chunk',
chunk,
`#chunk${number}.${file.type.split('/')[1]}`
)
return new Promise(resolve => {
resolve(uploadVideoChunk(
adaccount,
token,
start,
sessionId,
formData
))
})
.then(res => {
return new Promise(resolve => {
resolve(transferVideo(
adaccount,
token,
sessionId,
res.start_offset,
res.end_offset,
file,
number++
))
})
})
.catch(err => {
throw new Error(JSON.stringify(err))
})
}
function uploadVideoChunk(adaccount, access_token, start_offset, upload_session_id, formData) {
return axios.post(`${adaccount}/advideos`, formData, {
headers: {
'content-type': 'multipart/form-data'
},
params: {
access_token,
upload_phase: 'transfer',
start_offset,
upload_session_id
}
})
.then(res => res.data)
.catch(err => {
throw new Error(JSON.stringify(err))
})
}
function postVideo(adaccount, access_token, upload_session_id, title) {
return axios({
method: 'POST',
url: `${adaccount}/advideos`,
params: {
access_token,
upload_phase: 'finish',
upload_session_id,
title
}
})
.then(res => res.data)
.catch(err => {
throw new Error(JSON.stringify(err))
})
}