I have a small facebook application where I want to publish a swf file to a user's wall and my wall.I have got this code so far.However, I am getting an error when I click on Click to share..How do I sort this out?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="../JQuery/JQuery.js"></script>
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script type="text/javascript">
function publishStream(targetId, name, links, picture, source, userName,message) {
FB.ui(
{
method: 'feed',
to: targetId,
name: name,
link: links,
picture: picture,
source: source, // The URL of a media file (e.g., a SWF or video file) attached to this post
caption: 'Shared by '+userName,
actions: {name: 'Try App', link: links},
message: message
},
function(response){
if (response && response.post_id) {
//alert('Post was published.');
} else {
// alert('Post was not published.');
}
});
}
</script>
</head>
<body>
<p onclick="publishStream('id', 'name', 'http://t2.gstatic.com/images?q=tbn:ANd9GcSclvwUe23dKnjge54JJH6kQM-8iyTRBT_N5-TCWojVmcD0bTi8YQ', 'http://t2.gstatic.com/images?q=tbn:ANd9GcSclvwUe23dKnjge54JJH6kQM-8iyTRBT_N5-TCWojVmcD0bTi8YQ', 'http://t2.gstatic.com/images?q=tbn:ANd9GcSclvwUe23dKnjge54JJH6kQM-8iyTRBT_N5-TCWojVmcD0bTi8YQ','username','Hello') ">Click to share</p>
</body>
</html>
The error is
API Error Code: 191
API Error Description: The specified URL is not owned by the application
Error Message: redirect_uri is not owned by the application.
The comment from Igy above is most likely correct. Under your applications advanced settings try disabling the stream post URL security option. This option forces you to essentially keep your links within your application so external references will fail.
Related
I'm trying to setup a gatsbyJS website on AWS amplify with a contact form.
When the user answers the form, a POST request is sent to sendgrid API and I receive an e-mail with the content of the form.
This behavior works perfectly on localhost (gatsby develop). But when I try to send the form from the AWS amplify hosted website, the POST request receives a 405 response "Method not allowed":
firefox dev console
MethodNotAllowedThe specified method is not allowed against this resource.POSTOBJECT...97WD...<HostId...NvPyRAXpAs7f...
Here is my promise code that sends the mail:
import sendgrid from "#sendgrid/mail";
sendgrid.setApiKey(process.env.GATSBY_SENDGRID_API_KEY);
//Promise pour envoi du mail
async function sendmail(req, res) {
try {
await sendgrid.send({
to: process.env.GATSBY_SENDGRID_AUTHORIZED_EMAIL,
from: `${req.body.email}`,
subject: `${req.body.subject}`,
html: `<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en">
<head>
<meta charset="utf-8">
<title>RSVP</title>
<meta name="description" content="The HTML5 Herald">
<meta name="author" content="SitePoint">
<meta http-equiv="Content-Type" content="text/html charset=UTF-8" />
<link rel="stylesheet" href="css/styles.css?v=1.0">
</head>
<body>
<div class="container" style="margin-left: 20px;margin-right: 20px;">
<h3>Nouvelles inscription de : ✉️${req.body.email} </h3>
<div style="font-size: 16px;">
<p> Prénoms: ${req.body.firstname}</p>
<p> Noms: ${req.body.lastname}</p>
<p> Présences: ${req.body.presences}</p>
<p> Message: ${req.body.message}</p>
<h3>JSON raw:</h3>
<p>${req.body.messageRaw}</p>
<br>
</div>
</div>
</div>
</body>
</html>`,
}
)
}catch(error){
console.log(error);
return res.status(error.statusCode || 500).json({ error: error.message });
}
return res.status(200).json({ error: "" });
} export default sendmail;
And here is the onSubmit function that calls the promise thanks to fetch API:
...
const { user } = useAuth0();
...
const onSubmit = async () => {
const toastId = toast.loading("Please wait...")
let data = getValues();
let firstnameString = JSON.stringify(getValues("firstname"));
let lastnameString = JSON.stringify(getValues("lastname"));
let presenceString = JSON.stringify(getValues("presence"));
let commentairesString = JSON.stringify(getValues("message"));
let dataString = JSON.stringify(data);
fetch("/api/sendmail", {
body: JSON.stringify({
email: user.email,
subject: "RSVP mariage",
firstname: firstnameString,
lastname: lastnameString,
presences: presenceString,
message: commentairesString,
messageRaw: dataString,
}),
headers: {
"Content-Type": "application/json",
//"Access-Control-Allow-Methods": "OPTIONS, POST"
},
method: "POST",
}).then(res => {
reset();
toast.success('Message Envoyé !', {
id: toastId,
duration: 4000,
position: 'sticky',
});
}).catch(err => {
toast.error(`Oups, il y a eu une erreur: ${err.toString()}`,{
id: toastId,
duration: 4000,
position: 'sticky',
});
})
};
return (...
I double checked the sendgrid API key is correct when building on
amplify.
The code works on localhost (email is sent), no errors.
Based on this article: 405 Method not allowed - description and on this stackoverflow question.
I tried to add a redirect with the sendgrid API address:
https://api.sendgrid.com/V3/mail/send . -> Same 405 response is returned.
I tried to allow the POST method in the code with those headers: "Access-Control-Allow-Methods": "OPTIONS, POST" -> Same 405 response is returned.
Is there any limitations with AWS amplify that could prevent a POST request to be sent to another domain?
It doesn't seem to be a CORS issue if I am right?
Note: As a workaround, I'm considering to make a lambda function to call the sendgrid API if there are any limitations from amplify. Does it seem a better practice ?
i want to integrate PLAID system on my project based Laravel framework. Currently i'm developing on step to display Consent Pane PLAID from this doc PLAID LINK DOC. I'm using the javascript code. but i still failed to integrate it. here is my code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Plaid</title>
<script src="https://cdn.plaid.com/link/v2/stable/link-initialize.js"></script>
</head>
<body >
plaid
</body>
<script>
const handler = Plaid.create({
token: 'link-sandbox-xxx',
onSuccess: (public_token, metadata) => {
console.debug("onSuccess");
console.log('public_token: ' + public_token);
console.log('account ID: ' + metadata.account_id);
},
onLoad: () => {
console.debug("onLoad");
},
onExit: (err, metadata) => {
console.debug("onExit");
console.log('metadata ' + metadata);
},
onEvent: (eventName, metadata) => {
console.debug("onEvent");
},
receivedRedirectUri: "https://domainname.com/plaid",
});
handler.open();
</script>
</html>
Display error
POST https://sandbox.plaid.com/link/workflow/start 400 (Bad Request)
Error: oauth uri does not contain a valid oauth_state_id query parameter.
i already added new URL my API menu on PLAID Dashboard but still display this error.
Please help. How do i able to integrate that on my laravel?
The receivedRedirectUri should not be set when initializing Link for the first time. It is used when initializing Link for the second time, after returning from the OAuth redirect.
function makeApiCall(){
gapi.client.load('calendar', 'v3', function () {
var request = gapi.client.calendar.events.insert
console.log(request);
({
'calendarId': '',
"resource": resource
});
});
}
Unless you have forgotten to post a section of your code you have probably forgotten to register the library, as well as authorizing the user.
<script src="https://apis.google.com/js/client:platform.js"></script>
full example using Google sign-in
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello cal v3 </title>
<!-- Create a client id on Google developer console. Web credentials https://youtu.be/pBVAyU4pZOU -->
<meta name="google-signin-client_id"
content="YourClientId">
<meta name="google-signin-scope" content="https://www.googleapis.com/auth/calendar">
</head>
<body>
<h1>Hello cal v3 </h1>
<!-- The Sign-in button. This will run `getFileAsync()` on success. -->
<p class="g-signin2" data-onsuccess="makeacall"></p>
<!-- The API response will be printed here. -->
<textarea cols="80" rows="20" id="query-output"></textarea>
<script>
// Query the API and print the results to the page.
async function makeacall() {
try {
await gapi.client.load('calendar', 'v3');
const response = gapi.client.calendar.events.insert({
calendarId: 'XXX',
resource: resource
});
displayResults(response)
} catch (e) {
console.error('Error getting files', e)
}
}
function displayResults(response) {
var formattedJson = JSON.stringify(response.result, null, 2);
document.getElementById('query-output').value = formattedJson;
}
</script>
<!-- Load the JavaScript API client and Sign-in library. -->
<script src="https://apis.google.com/js/client:platform.js"></script>
Redirect uri mismatch JavaScript origin error
Make sure that you have configured your web client properly on Google developer console and added the proper javascript origin. Simple solution for redirect_uri_mismatch error with JavaScript
you need to init gapi on page load
gapi.auth2.init({
client_id: 'xxxxxxxxxxx'
});
I'm trying this code but it returned me this error.I think issue with clientID i changed the clientID with other account then it work fine but when i tried to implement this clientID which is in the code ,it's show me error.
Anyone who can help me in this regard.I will be very thankful to you.
<head>
<title>Paypal Checkout</title>
<meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Ensures optimal rendering on mobile devices. -->
<meta http-equiv="X-UA-Compatible" content="IE=edge" /> <!-- Optimal Internet Explorer compatibility -->
</head>
<body>
<script
src="https://www.paypal.com/sdk/js?client-id=Ae5Nri4XLfck8VR95yNNjYo8UymUe4n7Uk3DBID2UlkpemxB125veepMUkM5DxEiglownCaxa3jb1KR5">
</script>
enter code here
<div id="paypal-button-container"></div>
<script>
paypal.Buttons({
createOrder: function(data, actions) {
// This function sets up the details of the transaction, including the amount and line item details.
return actions.order.create({
purchase_units: [{
amount: {
value: '10'
}
}]
});
},
onApprove: function(data, actions) {
// This function captures the funds from the transaction.
return actions.order.capture().then(function(details) {
// This function shows a transaction success message to your buyer.
alert('Transaction completed by ' + details.payer.name.given_name);
console.log(details);
});
}
}).render('#paypal-button-container');
// This function displays Smart Payment Buttons on your web page.
</script>
</body>
I think the clientID that i'm using this account is restricted.When i open the inspect the code then i got this message
click here
I'm developing a PWA and I'm trying to use workbox to manage the service-worker and the caching of assets.
In my PWA I have to show all the newer images if the device is online and, if not, the images in the cache.
When I try to implement it I see that the staleWhileRevalidate method on image is called only once in the page for each image, also if I try to refresh multiple times. I need to close the webpage and when I reopen it the image is updated correctly. It's normal that it work in this way?
When I try it with localhost, the staleWhileRevalidate is called every time I reload the page, but when I load the website on a remote server, the app does not work anymore in this way.
service-worker.js:
importScripts('workbox-sw.prod.v2.0.0.js');
const workboxSW = new WorkboxSW();
var CACHE_NAME = 'my-cache';
var filesToCache = [
'imgs/images.png',
'index.html'
];
self.addEventListener('install', function(e) {
console.log('[ServiceWorker] Install');
e.waitUntil(
caches.open(CACHE_NAME).then(function(cache) {
console.log('[ServiceWorker] Caching App Shell');
return cache.addAll(filesToCache);
})
);
});
workboxSW.router.registerRoute(
/.*\/imgs\/(.*\/)?.*\.(png|jpg|jpeg|gif)/,
({event}) => {
console.log("staleWhileRevalidate called);
return workboxSW.strategies.staleWhileRevalidate({cacheName: CACHE_NAME}).handle({event}).catch((error) => {
console.log("Error staleWhileRevalidate");
return error;
});
}
);
index.html:
<!DOCTYPE html>
<html>
<head >
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title class="title">PWA</title>
</head>
<body>
<div class="container">
<img src="imgs/image.png">
</div>
<script>
if ('serviceWorker' in navigator) {
window.addEventListener('load', function() {
navigator.serviceWorker.register('service-worker.js').then(function(registration) {
console.log('ServiceWorker registration successful);
}, function(err) {
console.log('ServiceWorker registration failed: ', err);
});
});
}
</script>
</body>
</html>
Installing (not in localhost)
First Reload (not in localhost)
Second Reload (and more times)