discord api add user to guild - javascript

Hi I am trying to use discord api to add the user to the guild when he login. But I am getting 401 Unauthorized and I am not sure why.
This is my code:
const data = new FormData();
data.append("client_id", CLIENT_ID);
data.append("client_secret", CLIENT_SECRET);
data.append("grant_type", "authorization_code");
data.append("redirect_uri", `http://localhost:3000/callback`);
data.append("scope", "identify,guilds.join");
data.append("code", req.query.code);
var response = await fetch("https://discord.com/api/oauth2/token", {
method: "POST",
body: data
});
const json = await response.json();
var resp = await fetch(`https://discord.com/api/guilds/813847215058845708/members/463696108766494730`, {
method: "PUT",
headers: {
"Authorization": `Bot ${json.access_token}`,
"Content-Type": "application/json",
}
});
console.log(resp)
Everything seems to be working,I can get the user avatar,name and etc. but can't add him to the guild,anyone help me,plz

You're providing an invalid authorization header. You can't use your access token with the bot prefix since you're making a normal OAuth2 call. Instead you need to provide the token type returned by the Discord-API.
Change
headers: {
"Authorization": `Bot ${json.access_token}`,
"Content-Type": "application/json",
}
to
headers: {
authorization: `${json.token_type} ${json.access_token}`
}
Also, the way you pass your scopes seems to be incorrect as well. Try
data.append("scope", "identify guilds guilds.join");

Related

'unsupported_grant_type' when trying to get an access token from Discord API

So I am trying to implement Discord login to my website, but when trying to exchange the code for an access token from https://discord.com/api/oauth2/token I just get { error: 'unsupported_grant_type' }.
My code:
const tokenResponseData = await request('https://discord.com/api/oauth2/token', {
method: 'POST',
data: JSON.stringify({
client_id: config.clientId,
client_secret: config.clientSecret,
code: code,
grant_type: 'authorization_code',
redirect_uri: `http://localhost:3000/api/auth`,
scope: 'identify',
}),
headers: {
'Content-Type': 'application/x-www-form-urlencoded',
},
});
Been struggling with this for a while now, so any help would be great!
According to this issue on the Discord GitHub, this can happen when your body is incorrectly formatted.
After some digging, I saw this post on SO which has led me to believe that you should use URLSearchParams rather than stringifying your json data.
let params = new URLSearchParams();
params.append('client_id', config.clientId);
params.append('client_secret', config.clientSecret);
params.append('code', code);
params.append('grant_type', 'authorization_code');
params.append('redirect_uri', `http://localhost:3000/api/auth`);
params.append('scope', 'identify');
const tokenResponseData = await request(
'https://discord.com/api/oauth2/token',
{
method: 'POST',
data: params,
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
}
}
);
Turns out I was doing it all wrong. I needed to have the request parameters formatted like URL queries and sent as a string in the body of the POST request.
const tokenResponseData = await fetch(
`https://discord.com/api/oauth2/token`,
{
method: 'POST',
body: `client_id=${encodeURIComponent(`${config.clientId}`)}&client_secret=${encodeURIComponent(`${config.clientSecret}`)}&grant_type=authorization_code&code=${code}&redirect_uri=${encodeURIComponent(`http://localhost:3000/api/auth`)}`,
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
}
}
);

Creating tickets using Zendesk api with React

I working on intergrating a react app with the zendesk api for creating support tickets.
Till now i have completed the form flow, but when i making the request to the zendesk api i am getting 401.
I am using the api_key approach for this.
I am fairly new to zendesk, if anyone can help me regarding that.
Here is my code after user clicks submit.
const onSubmit = async () => {
try {
console.log('setInfo', info)
const data = { request: { subject: 'test', comment: { body: 'testdesc' } } }
const user = 'test#test.com'
const api_token = 'some_api_key'
const url = 'https://url.zendesk.com/api/v2/tickets.json'
const response = await fetch(url, {
method: 'POST', // *GET, POST, PUT, DELETE, etc.
mode: 'no-cors',
headers: {
'Content-Type': 'application/json',
Authorization: api_token,
// 'Content-Type': 'application/x-www-form-urlencoded',
},
body: JSON.stringify(data), // body data type must match "Content-Type" header
})
console.log('respone', response)
} catch (error) {
console.log('respone error', error)
}
}
It looks like you're not sending the right authorization header. According to Zendesk API reference you need to use the following format for the credentials:
{email_address}/token:{api_token}
Example:
jdoe#example.com/token:6wiIBWbGkBMo1mRDMuVwkw1EPsNkeUj95PIz2akv
After base64-encoding the resulting string, add it to the Authorization header as follows:
Authorization: Basic amRvZUBleGFtcGxlLmNvbS90b2tlbjo2d2lJQldiR2tCTW8xbVJETXVWd2t3MUVQc05rZVVqOTVQSXoyYWt2

"grant_type parameter is missing": Spotify API PKCE OAuth Flow Troubles

I'm developing a React app that uses the Spotify API I can't figure out why I'm getting this error when trying to get an access token with the API's PKCE OAuth flow.
{
error: "unsupported_grant_type",
error_description: "grant_type parameter is missing"
}
I'm following the directions from the guide exactly and I'm able to obtain an auth code just fine. Here's my call trying to get the token.
let res = await axios.post("https://accounts.spotify.com/api/token", {}, {
headers: {
"Content-Type": "application/x-www-form-urlencoded"
},
params: {
"grant_type": "authorization_code",
"code": data.code,
"redirect_uri": redirectUri,
"code_verifier": verifier,
"client_id": clientId
}
}).catch(err => console.error(err));
I've tried passing the params in the body of the post request and as url params and both produce the same results. As you can see, I'm clearly providing a grant_type and I'm using the value that the guide said to use.
I've tried every method I was able to find on the internet, nothing seemed to be working, but after a few hours, this succeeded:
const headers = {
Authorization:
'Basic ' +
new Buffer(CLIENT_ID + ':' + CLIENT_SECRET).toString('base64'),
}
const { data } = await axios.post(
'https://accounts.spotify.com/api/token',
'grant_type=client_credentials',
headers: { headers },
)
this.token = data.access_token
After this, you can simply use any endpoint as seen in the Spotify API examples.
Use querystring npm package to parse the data since we're using application/x-www-form-urlencoded in the header
And change the grant_type to grant_type: "client_credentials"
var querystring = require('querystring');
const headers = {
headers: {
"Content-Type": "application/x-www-form-urlencoded",
}
};
let data = {
grant_type: "client_credentials",
code: data.code,
redirectUri: "http://localhost:8000/callback",
client_id: your_client_id,
client_secret: your_client_secret,
};
we use query.stringify() for the data because the content type is application/x-www-form-urlencoded also don't use params since its a post request
axios
.post(
"https://accounts.spotify.com/api/token",
querystring.stringify(data),
headers
)
.then((response) => {
console.log(response);
})
.catch((error) => {
console.log(error);
});
This works for me:
const headers = {
'Content-Type': 'application/x-www-form-urlencoded',
Authorization:
'Basic ' +
Buffer.from(this.clientId + ':' + this.clientSecret).toString('base64'),
};
this.http.post(
'https://accounts.spotify.com/api/token',
'grant_type=client_credentials',
{ headers },
).subscribe(data => {
console.log(data);
});
I have the same issue, and it's resolved with stringfying request body data
const requestAccessToken = ({
code,
grantType = "authorization_code",
redirectUri = `${APP_BASE_URL}/callback`,
}) => {
const data = qs.stringify({ //query-string library
code,
grant_type: "client_credentials",
redirect_uri: redirectUri,
});
return axios.post(
[SPOTIFY_ACCOUNTS_BASE_URL, SPOTIFY_ACCOUNTS_TOKEN_URI].join(""),
data,
{
headers: {
Authorization: `Basic ${Buffer.from(
`${SPOTIFY_CLIENT_ID}:${SPOTIFY_CLIENT_SECRET}`,
).toString("base64")}`,
"Content-Type": "application/x-www-form-urlencoded",
},
},
);
};
Have you traced the message and verified that the request body is definitely as expected? Your OAuth fields look totally correct so I suspect this could just be an axios syntax issue.
I could be wrong but should the 'params' field be called 'data' instead, as in this class of mine.

How to get guild info using discord oauth?

How can i get a particular guild info? It's working if i remove guilds.id, but then it only return list of all guilds i am in.
what is the correct method to get and update guild information using discord api?
This is how i'm getting my access_token:
const key = req.query.code,
options = {
href:`https://discordapp.com/api/oauth2/token`,
code : `code=${key}`,
grant_type : grant_type=authorization_code`,
redirect_uri :`redirect_uri=${redirect}`
};
request({
uri: `${options.href}?${options.grant_type}&${options.code}&${options.redirect_uri}`,
method: 'POST',
headers: {
Authorization: `Basic ${creds}`,
}
}, (err,response, body) => {
if(err) return console.log(err);
console.log(body) // console log access_token
})
Using access_token to make request
//My get request options
const options = {
url: `https://discordapp.com/api/guilds/${guilds.id}`,
method: 'GET',
json: true,
headers: {
authorization: `${token_type} ${access_token}`}
}
//Both of these options arent working
//token_type = bot
//token_type = Bearer
Gives me 401: Unauthorized.
My access_token scope is:
`identify email guilds guilds.join gdm.join rpc connections`

React - GET and POST requests with axios

In my application I need to GET some data (for which I provide the native authtoken).
In the same event, however, I also need to POST a second token to be consumed by a few endpoints, for external backend api calls.
How do I POST this second token using my working code below using axios?
Should I extend Authorization bearer or simply POST Spotify Token as string data?
How so?
My code:
getData(event) {
const {token} = this.props.spotifyToken
const options = {
url: `${process.env.REACT_APP_WEB_SERVICE_URL}/endpoint`,
method: 'get',
headers: {
'Content-Type': 'application/json',
Authorization: `Bearer ${window.localStorage.authToken}`
}
};
return axios(options)
.then((res) => {
console.log(res.data.data)
})
.catch((error) => { console.log(error); });
};
For an async await applied to your code would look something like this.
async getData(event) {
const {token} = this.props.spotifyToken
let getRes = await axios.get(`${process.env.URL}/endpoint` {
headers: {
'Content-Type': 'application/json',
'Authorization': `Bearer ${window.localStorage.authToken}`
}
}
let postRes = await axios.post(`${process.env.URL}/endpoint` {
headers: {
'Content-Type': 'application/json',
'Authorization': `Bearer ${window.localStorage.authToken}`
}
}
console.log(getRes.data.data);
console.log(postRes.data.data);
};
In this specific case, where a token is needed to fetch data at backend, I found that passing token at url is more suitable, like so:
#endpoint.route('/endpoint/<select>/<user_id>/<token>', methods=['GET'])
def endpoint(name, user_id, token):
# business logic
and:
const options = {
url: `${process.env.REACT_APP_WEB_SERVICE_URL}/endpoint/${select}/${userId}/${this.props.spotifyToken}`,
method: 'get',
headers: {
'Content-Type': 'application/json',
Authorization: `Bearer ${window.localStorage.authToken}`
}
};
otherwise, backend code would run twice, for POST and GET, which is not desired in my case.

Categories