unauthorized with sendgrid smtp - reactjs

I'm sending emails using sendgrid smtp and always get unauthorized error for the request.
I followed the docs here https://sendgrid.com/docs/for-developers/sending-email/api-getting-started/.
Should I login in from my terminal or something like this?
const sendFunc = () => {
return fetch('https://api.sendgrid.com/v3/mail/send', {
method: 'Post',
mode: 'no-cors',
headers: {
'Content-Type': 'application/json',
'Authorization': 'Bearer {my apiKey-here}'
},
data: { "personalizations": [{ "to": [{ "email": "mahmoudnafea19#gmail.com", "name": "John Doe" }], "subject": "Hello, World!" }], "content": [{ "type": "text/plain", "value": "Heya!" }], "from": { "email": "mahmoud.m.elsayed19#gmail.com", "name": "Sam Smith" }, "reply_to": { "email": "sam.smith#example.com", "name": "Sam Smith" } }
}).then((response) => console.log(response)).catch((err) => console.log(err))
}

I had to pass the data and headers as objects outside the function call

Related

Getting CORS Error while Integrating FedEx with React Js

While working on FedEx integration with React, we are able to get authorization key using Google extension but unable to work on other APIs. All the APIs are perfectly working in postman but not while integration. Tried checking rates and transit times but getting CORS error. I have included the code and error screenshot.Could you please help?
let body = JSON.stringify({
"accountNumber": {
"value": "XXXXXXXXX"
},
"requestedShipment": {
"shipper": {
"address": {
"postalCode": 75063,
"countryCode": "US"
}
},
"recipient": {
"address": {
"postalCode": "L0J 0A0",
"countryCode": "CA"
}
},
"pickupType": "DROPOFF_AT_FEDEX_LOCATION",
"serviceType": "FEDEX_GROUND",
"rateRequestType": [
"LIST",
"ACCOUNT"
],
"customsClearanceDetail": {
"dutiesPayment": {
"paymentType": "SENDER",
"payor": {
"responsibleParty": null
}
},
"commodities": [{
"description": "Camera",
"quantity": 1,
"quantityUnits": "PCS",
"weight": {
"units": "KG",
"value": 20
},
"customsValue": {
"amount": 100,
"currency": "USD"
}
}]
},
"requestedPackageLineItems": [{
"weight": {
"units": "KG",
"value": 20
}
}]
}
});
axios.post("https://apis-sandbox.fedex.com/rate/v1/rates/quotes", body, {
headers : {
"Accept": "*/*",
"Content-Type": "application/json",
"authorization": `Bearer XXX`,
"Access-Control-Allow-Origin": "*",
}
}).then(res => console.log(res.data));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
Cors error cannot be solved from front end , cause its a browser error. so You have to create proxy server to solve this
create an API in backend and send request from server to fedex.

Login token Axios post request gets Unauthorized response

I am encountering some difficulties while trying to update some data in a mysql database.
I am making an axios post request towards this api and inside the header I am sending the token that I receive from the backend after succesfull login.
I will show here the apiDocumentation and the POST req that I am making because I really don't understand how to send the login token to have authorization to the data.
Any help would very helpfull.
This is the backend apiDocumentation:
"post": {
"summary": "Post new data row",
"description": "Post new data row",
"parameters": [
{
"name": "token",
"in": "header",
"required": true,
"description": "token",
"schema": {
"type": "string"
}
}
],
"requestBody": {
"required": true,
"content": {
"application/json": {
"schema": {
"type": "object",
"properties": {
"data": {
"type": "string",
"example": "{\"test\":1}"
},
"type": {
"type": "string",
"example": "1"
},
"status": {
"type": "integer",
"example": 1
}
},
"required": [
"data",
"type"
]
}
}
}
},
This is my Post request that I am doing in my code:
case "newsTitle" :{
const {titlu} = this.state;
data = JSON.stringify(titlu);
const token = this.props.history.location.state.token;
const headers = {
//"token":token
"Authorization": token,
'Accept': '*/*',
//"Content-Type": "multipart/form-data"
"Content-Type":"application/json"
};
try {
const response = await axios.post(url, data, headers);
console.log("response::", response);
try this
case "newsTitle" :{
const {titlu} = this.state;
data = JSON.stringify(titlu);
const token = this.props.history.location.state.token;
const headers = {
//"token":token
'Authorization': `Bearer ${token}`
'Accept': '*/*',
//"Content-Type": "multipart/form-data"
"Content-Type":"application/json"
};
try {
const response = await axios.post(url, data, headers);
console.log("response::", response);

Users added via graph not receiving welcome email

First I tried adding a group owner as both owner and member in the same http call as I created the group:
{
"description": "test group",
"displayName": "test_group",
"groupTypes": [
"Unified"
],
"mailEnabled": true,
"mailNickname": "project.1-TestPreview",
"members#odata.bind": [
"https://graph.microsoft.com/v1.0/users/{id}"
],
"owners#odata.bind": [
"https://graph.microsoft.com/v1.0/users/{id}"
],
"securityEnabled": false,
"visibility": "private"
}
The user is added as a member and owner successfully, but not receiving a welcome email.
I then tried to split the http calls, thinking that there was an issue with the emails as the group was created at the same time as the user was added.
I created the group with one user being added in the creation http call same as above and three other users being added as owner and member ~30 seconds after the group was created. For this I used
queries:
{
"type": "POST",
"url": "https://graph.microsoft.com/v1.0/$batch"
}
body
{
"requests": [
{
"body": {
"#odata.id": "https://graph.microsoft.com/v1.0/users/{id}"
},
"headers": {
"Content-Type": "application/json"
},
"id": "1",
"method": "POST",
"url": "groups/{id}/members/$ref"
},
{
"body": {
"#odata.id": "https://graph.microsoft.com/v1.0/users/{id}"
},
"headers": {
"Content-Type": "application/json"
},
"id": "2",
"method": "POST",
"url": "groups/{id}/members/$ref"
},
{
"body": {
"#odata.id": "https://graph.microsoft.com/v1.0/users/{id}"
},
"headers": {
"Content-Type": "application/json"
},
"id": "3",
"method": "POST",
"url": "groups/{id}/members/$ref"
}
]
}
I added the users as owners with the same method. None of them received a welcome email. How can I make sure that the email fires?
I am doing this in Logic Apps:
You need a proper Microsoft 365, Office 365 or Exchange license. Do you have one?

Access HTML node not generated by React

I have this in the head of my mark up:
it generates a random ID which comes from PHP
I need to pass the value of the attrbiute content inside my AXIOS post:
submitForm (e) {
e.preventDefault();
var current = this.props.currentState;
axios({
url: '/save-data',
method: 'POST',
contentType: 'application/json',
data: {
"candidate": {
"first_name": current.name,
"last_name": this.state.lastName,
"email": this.state.email,
"university": this.state.location,
"degree_area": this.state.degree,
"year_of_graduation": this.state.year
},
"tshirt": {
"color_id": current.activeColorTextID,
"options": [{
"icon_id": current.optionA.icon_id,
"option_id": current.optionA.option_id
}, {
"icon_id": current.optionB.icon_id,
"option_id": current.optionB.icon_id
}, {
"icon_id": current.optionC.icon_id,
"option_id": current.optionC.icon_id
}]
}
},
headers: { 'Content-Type': 'application/json' }
}).then(function(response){
console.log(response);
});
}
this is the jQuery version:
$(function() {
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
$.ajax({
url: '/save-data',
type: 'POST',
contentType: 'application/json',
data: JSON.stringify({
"candidate": {
"first_name": "",
"last_name": "",
"email": "",
"university": "UCL",
"degree_area": "IT",
"year_of_graduation": "2016"
},
"tshirt": {
"color_id": 1,
"options": [{
"icon_id": 1,
"option_id": 2
}, {
"icon_id": 2,
"option_id": 5
}, {
"icon_id": 4,
"option_id": 12
}]
}
}),
dataType: 'json'
});
});
but I need to achieve it in React.
can react access that HTML element content attribute?
You could easily use document.querySelector:
submitForm (e) {
e.preventDefault();
var current = this.props.currentState;
axios({
url: '/save-data',
method: 'POST',
contentType: 'application/json',
data: {
"candidate": {
"first_name": current.name,
"last_name": this.state.lastName,
"email": this.state.email,
"university": this.state.location,
"degree_area": this.state.degree,
"year_of_graduation": this.state.year
},
"tshirt": {
"color_id": current.activeColorTextID,
"options": [{
"icon_id": current.optionA.icon_id,
"option_id": current.optionA.option_id
}, {
"icon_id": current.optionB.icon_id,
"option_id": current.optionB.icon_id
}, {
"icon_id": current.optionC.icon_id,
"option_id": current.optionC.icon_id
}]
}
},
headers: {
'Content-Type': 'application/json',
'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').attributes['content'].value
}
}).then(function(response){
console.log(response);
});
}

Trying to post json in angularjs will 400 bad request

I am trying to post a static new entry using angularjs $http call but it will throws 400 bad request I am not getting why? Here I am passing the exact same type of json object in input.
Below is my main json file in which I want to add new record .
{
"count": 384,
"next": "http://104.197.128.152:8000/v1/tracks?page=2",
"previous": null,
"results": [
{
"id": 38,
"title": "Hey Jude",
"rating": "4.9",
"genres": [
{
"id": 5,
"name": "ramesh"
}
]
},
{
"id": 39,
"title": "hello adele",
"rating": "4.0",
"genres": [
{
"id": 4,
"name": "bollywood"
},
{
"id": 8,
"name": "metakai"
}
]
}
]
}
Data which I want to post:
var data = {
"id": 79,
"title": "new song anand",
"rating": "4.0",
"genres": [
{
"id": 4,
"name": "bollywood"
},
{
"id": 8,
"name": "metakai"
}
]
}
Syntax for posting data:
$http({
method: 'POST',
url: 'http://104.197.128.152:8000/v1/tracks',
dataType: 'json',
data: data,
headers: { 'Content-Type': 'application/json; charset=UTF-8' }
}).success(function (data) {
console.log(data,"success");
}).error(function (data) {
console.log(data,"fail");
});
Remove dataType: 'json' and charset=UTF-8 from headers.
$http({
method: 'POST',
url: 'http://104.197.128.152:8000/v1/tracks',
data: data,
headers: { 'Content-Type': 'application/json'}
}).success(function (data) {
console.log(data,"success");
}).error(function (data) {
console.log(data,"fail");
});
It must work .
And if not re-check your JSON format. Something must be missing.

Resources