We Keep Coding

What's wrong with my authorization syntax? Getting 403 - ImgurAPI

I'm trying to get a response from the Imgur API but despite my best efforts I seem to be passing the Client ID improperly.
const key = `Client-ID ${process.env.REACT_APP_IMGURKEY}`;
fetch(url, {
method: "GET",
headers: new Headers({
Authorization: key
})
})
result of the fetch is 403: invalid Client ID, I've double checked and confirmed client ID is valid.

You need to retrieve an access token in order to be able to make requests to "Authed" requests in Imgur's api.
More details: https://apidocs.imgur.com/?version=latest#authorization-and-oauth
Basically you need to redirect the user of your app to this URL:
const YOUR_CLIENT_ID = process.env.REACT_APP_IMGURKEY;
const url = 'https://api.imgur.com/oauth2/authorize?client_id=' + YOUR_CLIENT_ID + ' &response_type=token'
Then the user will see an Imgur page, asking them to give permission to your app. After the user agreed to give permission, they are taken back to the URL you configured in your application preferences, and the access token will be in the URL:
https://example.org/#access_token=ACCESS_TOKEN&expires_in=315360000&token_type=bearer&refresh_token=___&account_username=___&account_id=____
Then you can make requests passing the access token like this:
fetch(url, {
method: "GET",
headers: new Headers({
Authorization: "Bearer " + ACCESS_TOKEN
})
})

Problems Github Api Authorization

I'm trying to do a authorization request with Github Api, passing the username and password.
But it's not working and i'm getting 401 status code.
In the Documentation there's a part saying
To use Basic Authentication with the GitHub API, simply send the username and password associated with the account.
That's my code:
this.api
.post('/user', { username: 'Example', password: '1234' })
.then(res => resolve(res.data))
.catch(err => reject(err));

Not sure if you aim to use the Basic Authentication provided by Github API. If that's the case I think you should use the Axios auth header:
axios.get('https://example.com', {
auth: { user: "username", password: "password" }
});
Here's what Axios docs say:
// `auth` indicates that HTTP Basic auth should be used, and supplies credentials.
// This will set an `Authorization` header, overwriting any existing
// `Authorization` custom headers you have set using `headers`.
// Please note that only HTTP Basic auth is configurable through this parameter.
// For Bearer tokens and such, use `Authorization` custom headers instead.
auth: {
username: 'janedoe',
password: 's00pers3cret'
},
There's another way to manually set the authorization header like this:
axios.get('https://example.com/', {
headers: {
Authorization: 'Basic ' + Base64.encode('username' + ':' + 'password');
}
})
And the last note is that deprecation is coming:
Deprecation Notice: GitHub will discontinue password authentication to the API. You must now authenticate to the GitHub API with an API token, such as an OAuth access token, GitHub App installation access token, or personal access token, depending on what you need to do with the token.
Consider using tokens instead of username and password.

Note that if your account has activated 2FA (two-factor authentication), then you would need to use a PAT (Personal Access Token) as your password.
curl --header 'Authorization: token INSERTACCESSTOKENHERE'
--header 'Accept: application/vnd.github.v3.raw'
--remote-name
--location https://api.github.com/...
See "Passing headers with axios POST request"
const headers = {
'Content-Type': 'application/json',
'Accept': 'application/vnd.github.v3.raw',
'Authorization': 'token INSERTACCESSTOKENHERE'
}
axios.post(url, data, {
headers: headers
})
.then((response) => {
dispatch({
type: yourEvent,
data: response.data[0]
})
})
.catch((error) => {
dispatch({
type: yourError
})
})

Basic authentication requires you to add a header to the ajax request which gets send to the GitHub API. This is already answered in use-basic-authentication-with-jquery-and-ajax.

Http request works in PostMan but not in JS

I have http patch request with Bearer Token Authorization. But the Http Request get a Unauthorized error from the Server, when making the exact same Request(console.log(url + token) and then copy it from the console) in Postman, it works.
What could be the Problem ?
this.getToken().subscribe((data: FormData) => {
const httpOptions = {
headers: new HttpHeaders({
'Authorization': ('Bearer ' + data['access_token'])
})
}
console.log("URL with " + httpOptions.headers.get("Authorization"));
this.http.patch("URL",httpOptions).subscribe((articledata: Article)=>
{
console.log(articledata);
})
});
So this should work, since copying the output and using it in Postman works, but i get a 401 Unauthorized.

For Anyone that needs it, i used http.patch wrong, the headers are the 3rd parameter after url and body.

Authorization using fetch API

How can I send authorization credentials using fetch?
It worked using postman but on Chrome I keep receiving this message:
Request cannot be constructed from a URL that includes credentials

You can't define user:pass#host in the URL. Just set the Authorization http Header:
var headers = new Headers();
headers.append('Authorization', 'Basic ' + btoa(username + ':' + password));
fetch('https://host.com', {headers: headers})

Maybe you can use some extension like Modify Headers and include in it your credentials data like you are including un postman.

cloudinary authentication primer

I am trying to use the Cloudinary REST API, but the client libraries provided are not useful for my purpose.
So the settings I use are:
api_key = '111111111111111';
api_secret = 'fdgdsfgsdfgsdfgsdfgsdfg';
my_authorization = 'Basic ' + window.btoa(this.api_key + ':' + this.api_secret);
url_base = 'http://api.cloudinary.com/api/v1_1';
cloud_name = '/http-mysite-com';
connect_method = 'GET';
tag_list = '/tags/image';
I make the call with something similar to this:
request(tag_list) {
connection.request({
method: connect_method,
url: url_base + cloud_name + service_url,
headers: {
'Authorization': authorization,
'Content-Type': 'application/json'
}
}).then(function(response) {
// triumph
}, function(er) {
// all is lost
});
};
The response is this:
XMLHttpRequest cannot load
http://api.cloudinary.com/api/v1_1/http-mysite-com/tags/image. No
'Access-Control-Allow-Origin' header is present on the requested
resource. Origin 'http://myhost:8000' is therefore not allowed
access. The response had HTTP status code 404.
What am I doing wrong?
Thanks
PS I also tried using 'https' instead of 'http', as the documentation recommends. In that case I get back:
XMLHttpRequest cannot load
https://api.cloudinary.com/v1_1/http-mysite-com/tags/image. The
request was redirected to
'http://api.cloudinary.com/api/v1_1/http-mysite-com/tags/image',
which is disallowed for cross-origin requests that require preflight.

Admin API calls use your api_secret which should not be revealed in your client-side code. That's why Cloudinary doesn't support CORS headers for the Admin API.
Therefore, Admin API calls should be performed on the server-side only.