I am building a website using the Twitter and Facebook JavaScript SDKs. I am attempting to perform tweets and facebook shares from the site. But I am getting the following error when I try to send a tweet OR facebook share from my website:
Chrome:
Unsafe JavaScript attempt to access frame with URL http://edro.no-ip.org:3000/#_=_ from frame with URL http://platform.twitter.com/widgets/tweet_button.1354761327.html#_=1355186876357&count=none&id=twitter-widget-0&lang=en&original_referer=http%3A%2F%2Fedro.no-ip.org%3A3000%2F%23_%3D_&related=xbox%3AGhostfire%20Games&size=m&text=Check%20out%20this%20fun%20story!%20%23atalltale&url=http%3A%2F%2Fedro.no-ip.org%3A3000%2Fstories%2FiqU9xW1FJI. The frame requesting access set 'document.domain' to 'twitter.com', but the frame being accessed did not. Both must set 'document.domain' to the same value to allow access.
Safari:
Unsafe JavaScript attempt to access frame with URL http://edro.no-ip.org:3000/ from frame with URL http://platform.twitter.com/widgets/tweet_button.1354761327.html#_=1355197702032&count=none&id=twitter-widget-0&lang=en&original_referer=http%3A%2F%2Fedro.no-ip.org%3A3000%2F&related=xbox%3AGhostfire%20Games&size=m&text=Check%20out%20this%20fun%20story!%20%23atalltale&url=http%3A%2F%2Fedro.no-ip.org%3A3000%2Fstories%2FiqU9xW1FJI. Domains, protocols and ports must match.
Here's the code (I only included the relevant parts):
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="https://www.facebook.com/2008/fbml">
<head>
<title>Title</title>
<link rel="stylesheet" href="/stylesheets/style.css">
</head>
<body>
</body>
<center>
<h1>Page Header</h1>
 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<div id="fb-root"></div>
<script type="text/javascript">
// Once the Facebook SDK is fully loaded, this callback will be invoked
window.fbAsyncInit = function()
{
FB.init({
appId: "250634021702621",
status: true,
cookie: true,
channelUrl: '//edro.no-ip.org:3000/channel.html',
});
FB.Event.subscribe('auth.statusChange', handleStatusChange);
};
// Callback for once we are logged in and authorized
function handleStatusChange(response) {
document.body.className = response.authResponse ? 'connected' : 'not_connected';
if (response.authResponse)
{
}
};
// Declare a generic SDK loading function
var loadSDK = function(doc, script, id, src)
{
var js, fjs = doc.getElementsByTagName(script)[0];
if (!doc.getElementById(id))
{
js = doc.createElement(script);
js.id = id;
js.src = src;
js.async = true; // Makes SDK load asynchronously
fjs.parentNode.insertBefore(js,fjs);
}
};
// Twitter SDK loading
loadSDK(document, 'script', 'twitter-wjs', 'https://platform.twitter.com/widgets.js');
// Facebook SDK loading
loadSDK(document, 'script', 'facebook-jssdk', '//connect.facebook.net/en_US/all.js');
// Facebook callback - useful for doing stuff after Facebook returns. Passed as parameter to API calls later.
var myResponse;
function callback(response)
{
if (response)
{
// For debugging - can query myResponse via JavaScript console
myResponse = response;
if (response.post_id)
{
}
else
{
// Else we are expecting a Response Body Object in JSON, so decode this
var responseBody = JSON.parse(response.body);
// If the Response Body includes an Error Object, handle the Error
if(responseBody.error)
{
}
// Else handle the data Object
else
{
}
}
}
}
// All API calls go here
$(document).ready(function ()
{
// Post to your wall
$('#post_wall').click(function ()
{
FB.ui(
{
method: 'feed',
// useful if we want the callback to go to our site, rather than the JavaScript, so we can log an event
redirect_uri: 'http://edro.no-ip.org:3000',
link: 'http://edro.no-ip.org:3000/stories/{game.id}',
picture: 'http://fbrell.com/f8.jpg',
name: 'name',
caption: 'caption',
description: 'description'
// display: 'popup'
},
callback
);
return false;
});
});</script>
<!-- Tweet code-->
Tweet
<!-- Facebook share code-->
<p id="msg">Share on Facebook</p>
</center>
</html>
"Domains, protocols and ports must match."
Typical mismatch in (older versions of ?) Safari is http://www.example.com and http://example.com.
Related
This question already has answers here:
How do I return the response from an asynchronous call?
(41 answers)
Closed 5 years ago.
I'm trying to teach myself web related stuff like JavaScript and APIs after learning C/C++. This project is supposed to be a simple webpage that uses the Facebook JavaScript SDK to login with Facebook and display information from a profile. I have successfully gotten the login part done but I'm having trouble calling the FB.api() function because I need an access token. Right now I'm trying to save the access token to a var called token but it doesn't seem to be working. I am using three console.log() to debug and I've found that the last/third call returns undefined because for some reason it seems to be running first (according to the F12 dev console in Firefox). What is going on?
main.js:
function main()
{
var token;
FB.getLoginStatus(function getLoginStatusCallback(response)
{
if (response.status === "connected")
{
document.getElementById("loginButton").style.display = "none";
}
else
{
document.getElementById("loginButton").style.display = "all";
}
//THIS OUTPUTS THE TOKEN SUCCESSFULLY
console.log(response.authResponse.accessToken);
//THIS WORKS
token = response.authResponse.accessToken;
//THIS OUTPUTS THE TOKEN SUCCESSFULLY
console.log(token);
}, true);
//THIS OUTPUTS UNDEFINED!
console.log("token = " + token);
Fb.api("/me", "get", token, function() {
//stuff here
});
}
How I'm initializing the FB JavaScript SDK and calling main (so I can use the FB object elsewhere).
facebook.js:
window.fbAsyncInit = function() {
FB.init({
appId: 'my app id here',
cookie: true,
xfbml: true,
version: 'v2.8'
});
FB.AppEvents.logPageView();
//CALLING MAIN HERE
main();
};
(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {
return;
}
js = d.createElement(s);
js.id = id;
js.src = "https://connect.facebook.net/en_US/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
The header in my HTML file (defining the SDK initialization first):
<head>
<meta charset="utf-8" />
<title>Profile</title>
<link rel="stylesheet" href="style.css" />
<script src="facebook.js"></script>
<script src="main.js"></script>
</head>
Here is the dev console from Firefox (third console.log seems to run first for some reason, why is this happening?):
token = undefined main.js:23:4 <-- I think it should run last but it runs first
TheTokenPrintsHere main.js:18:7
TheTokenPrintsHere main.js:20:7
I'm coming from C/C++ if that helps and this is my first experience with APIs and web SDKs. Thank you!
What you're observing is a result of JavaScript executing your code Asynchronously. All of the code inside the function getLoginStatusCallback(response) block will be executed after it receives a response from FaceBook (which could take 2 seconds, 5 seconds, or 2 minutes).
JavaScript only has one thread, so the language designers made it such that this block of code will be executed only when a response is received.
If you want to force your code to execute synchronously, you can move the last 2 statements inside the first child block of main() like so:
function main()
{
var token;
FB.getLoginStatus(function getLoginStatusCallback(response)
{
if (response.status === "connected")
{
document.getElementById("loginButton").style.display = "none";
}
else
{
document.getElementById("loginButton").style.display = "all";
}
token = response.authResponse.accessToken;
console.log("token = " + token);
Fb.api("/me", "get", token, function() {
// this will work now.
});
}, true);
}
My aim is to output some of my Google Analytics data inside a new-tab page using a Chrome extension.
I've followed the "Hello Analytics API: JavaScript quickstart for web applications" found at
https://developers.google.com/analytics/devguides/reporting/core/v3/quickstart/web-js#clientId as the basis for my new-tab page:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello Analytics - A quickstart guide for JavaScript</title>
</head>
<body>
<button id="auth-button" hidden>Authorize</button>
<h1>Hello Analytics</h1>
<textarea cols="80" rows="20" id="query-output"></textarea>
<script>
// Replace with your client ID from the developer console.
var CLIENT_ID = 'TAKEN OUT FOR SECURITY';
// Set authorized scope.
var SCOPES = ['https://www.googleapis.com/auth/analytics.readonly'];
function authorize(event) {
// Handles the authorization flow.
// `immediate` should be false when invoked from the button click.
var useImmdiate = event ? false : true;
var authData = {
client_id: CLIENT_ID,
scope: SCOPES,
immediate: useImmdiate
};
gapi.auth.authorize(authData, function(response) {
var authButton = document.getElementById('auth-button');
if (response.error) {
authButton.hidden = false;
}
else {
authButton.hidden = true;
queryAccounts();
}
});
}
function queryAccounts() {
// Load the Google Analytics client library.
gapi.client.load('analytics', 'v3').then(function() {
// Get a list of all Google Analytics accounts for this user
gapi.client.analytics.management.accounts.list().then(handleAccounts);
});
}
function handleAccounts(response) {
// Handles the response from the accounts list method.
if (response.result.items && response.result.items.length) {
// Get the first Google Analytics account.
var firstAccountId = response.result.items[0].id;
// Query for properties.
queryProperties(firstAccountId);
} else {
console.log('No accounts found for this user.');
}
}
function queryProperties(accountId) {
// Get a list of all the properties for the account.
gapi.client.analytics.management.webproperties.list(
{'accountId': accountId})
.then(handleProperties)
.then(null, function(err) {
// Log any errors.
console.log(err);
});
}
function handleProperties(response) {
// Handles the response from the webproperties list method.
if (response.result.items && response.result.items.length) {
// Get the first Google Analytics account
var firstAccountId = response.result.items[0].accountId;
// Get the first property ID
var firstPropertyId = response.result.items[0].id;
// Query for Views (Profiles).
queryProfiles(firstAccountId, firstPropertyId);
} else {
console.log('No properties found for this user.');
}
}
function queryProfiles(accountId, propertyId) {
// Get a list of all Views (Profiles) for the first property
// of the first Account.
gapi.client.analytics.management.profiles.list({
'accountId': accountId,
'webPropertyId': propertyId
})
.then(handleProfiles)
.then(null, function(err) {
// Log any errors.
console.log(err);
});
}
function handleProfiles(response) {
// Handles the response from the profiles list method.
if (response.result.items && response.result.items.length) {
// Get the first View (Profile) ID.
var firstProfileId = response.result.items[0].id;
// Query the Core Reporting API.
queryCoreReportingApi(firstProfileId);
} else {
console.log('No views (profiles) found for this user.');
}
}
function queryCoreReportingApi(profileId) {
// Query the Core Reporting API for the number sessions for
// the past seven days.
gapi.client.analytics.data.ga.get({
'ids': 'ga:' + profileId,
'start-date': '7daysAgo',
'end-date': 'today',
'metrics': 'ga:sessions'
})
.then(function(response) {
var formattedJson = JSON.stringify(response.result, null, 2);
document.getElementById('query-output').value = formattedJson;
})
.then(null, function(err) {
// Log any errors.
console.log(err);
});
}
// Add an event listener to the 'auth-button'.
document.getElementById('auth-button').addEventListener('click', authorize);
</script>
<script src="https://apis.google.com/js/client.js?onload=authorize"></script>
</body>
</html>
I get the following errors:
Refused to execute inline script because it violates the following
Content Security Policy directive: "script-src 'self' blob:
filesystem: chrome-extension-resource:". Either the 'unsafe-inline'
keyword, a hash
('sha256-ZJ1hGXIQLHmnXhFZqYWEDfv/ypJQ/Yvh6mYGne3Nf0s='), or a nonce
('nonce-...') is required to enable inline execution.
Refused to load the script 'https://apis.google.com/js/client.js?onload=authorize' because it violates the following Content Security Policy directive: "script-src 'self' blob: filesystem: chrome-extension-resource:".
Please advise.
Thanks,
Jack
By default, inline script(Your first error) won't be executed, and only local script is loaded (Your second error).
To solve this, take a look at Content Security Policy, the recommendation would be extracting inline script to an external script (Your first error) and making a local copy of remote script (Your second error).
I'm implementing "Google Sign In" into my website to handle all user authentication etc.. I will have a back-end database that I use to store information against users to keep track of their profile and their actions etc..
I've followed the Google Developer documentation and have got a "Google Sign In" button on a web page and when this button is clicked I choose my account and am signed in and the id_token goes off and is authenticated with my back-end server successfully. The only problem I'm now having is that when I refresh the page the button is back to "Sign In" rather than staying signed in, is this normal behaviour or is there something I'm missing? I don't want users to have to have to sign in again whenever the page changes.
On a side note I have managed to store the id_token from successfully logging into Google in localStorage and then using this id_token to re-authenticate with the back-end server automatically (as you can see in the commented out code) but this doesn't obviously automatically change the status of the "Google Sign In" button which would confuse users on the client-side.
Can anyone shed any light on this problem please?
Not signed in:
After signing in (doesn't currently stay like this after a page refresh):
login.html:
<!DOCTYPE html>
<html>
<head>
<title>Login</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./css/base.css"/> <!-- Base CSS -->
<script src="./js/all.js"></script> <!-- All JavaScript file -->
<script src="./js/Logger.class.js"></script> <!-- Logger class -->
<script src="./bower_components/jquery/dist/jquery.min.js"></script> <!-- jQuery -->
<script src="./js/gSignIn.js"></script>
<!-- Polymer -->
<script src="./bower_components/webcomponentsjs/webcomponents-lite.min.js"></script> <!-- Web Components Import -->
<!-- Element Imports -->
<link rel="import" href="./bower_components/paper-button/paper-button.html"/>
<link rel="import" href="./bower_components/google-signin/google-signin.html"/>
</head>
<body>
<google-signin id="gSignIn" client-id="--- REMOVED FOR PRIVACY ---" scopes="profile email openid"></google-signin>
Sign Out
</body>
</html>
gSignIn.js:
/**
* Google Sign In JavaScript
*/
$(document).ready(function() {
var logger = new Logger("gSignIn.js", false); // logger object
var id_token = null;
logger.log("Load", "Successful");
// Try to automatically login
// if (localStorage !== null) { // If local storage is available
// if (localStorage.getItem("gIDToken") !== null) { // If the Google ID token is available
// id_token = localStorage.getItem("gIDToken");
// // Send off AJAX request to verify on the server
// $.ajax({
// type: "POST",
// url: window.api.url + "googleauth/verify/",
// data: { "id_token": id_token },
// success: function (data) {
// if (!data.error) { // If there was no error
// logger.log("Google SignIn", "Successfully signed in!");
// }
// }
// });
// }
// }
/**
* EVENT: Google SignIn success
*/
$("#gSignIn").on("google-signin-success", function () {
id_token = getGoogleAuthResponse().id_token;
var profile = getGoogleProfile();
console.log("ID: " + profile.getId()); // Don't send this directly to your server!
console.log("Name: " + profile.getName());
console.log("Image URL: " + profile.getImageUrl());
console.log("Email: " + profile.getEmail());
// Send off AJAX request to verify on the server
$.ajax({
type: "POST",
url: window.api.url + "googleauth/verify/",
data: { "id_token": id_token },
success: function (data) {
if (!data.error) { // If there was no error
logger.log("Google SignIn", "Successfully signed in!");
// Store the id_token
if (localStorage !== null) { // If localStorage is available
localStorage.setItem("gIDToken", id_token); // Store the id_token
}
}
}
});
});
$("#signOut").click(function () {
var auth2 = gapi.auth2.getAuthInstance();
auth2.signOut().then(function () {
console.log("User signed out.");
});
});
/**
* Get Google Profile
*
* #returns object
*/
var getGoogleProfile = function () {
var profile = gapi.auth2.getAuthInstance().currentUser.get().getBasicProfile();
return profile;
};
/**
* Get Google Auth Response
*
* #returns object
*/
var getGoogleAuthResponse = function () {
var response = gapi.auth2.getAuthInstance().currentUser.get().getAuthResponse();
return response;
};
});
Thanks!
I had the same problem and, after ensuring third party cookies were enabled, it came down to the hostname, localhost in this case.
In the end, I had to fake a domain using /etc/hosts, ensure google developers dashboard has that domain whitelisted, and start using that domain instead of localhost.
I can only assume that gapis don't like localhost, even though it's whitelisted in my google developers dashboard for the account I'm using. If you do manage to get localhost to work, do give me a shout!
Another way to do this is to access localhost from a nonstandard port (not 80). I managed to get around this headache by using an nginx proxy from port 80 to 81:
server {
listen 81;
location / {
proxy_pass http://localhost:80;
}
}
I'm using the LinkedIn Javascript API to sign in users to my application, however the API is not returning the email address even though I'm requiring permission for that specific field. I'm including the API script as follows:
<script type="text/javascript" src="//platform.linkedin.com/in.js">
api_key: API_KEY
scope: r_fullprofile r_emailaddress
</script>
then I'm including the Log In button in the markup:
<script type="in/Login" data-onAuth="onLinkedInAuth">
and finally I have a function to add the callback for the API response:
function onLinkedInAuth() {
var fields = ['first-name', 'last-name', 'email-address'];
IN.API.Profile("me").fields(fields).result(function(data) {
console.log(data);
}).error(function(data) {
console.log(data);
});
};
I'm only getting the First and Last Name but the API doesn't return the email field.
Reference: https://developer.linkedin.com/documents/profile-fields#email
1- be sure you made email permission (r_emailaddress) in your app http://developer.linkedin.com/documents/authentication#granting
2- then you may use this
<script type="text/javascript" src="http://platform.linkedin.com/in.js">
api_key: key
**onLoad: onLinkedInLoad**
authorize: true
</script>
<script>
function onLinkedInLoad() {
IN.Event.on(IN, "auth", onLinkedInAuth);
}
// 2. Runs when the viewer has authenticated
function onLinkedInAuth() {
IN.API.Profile("me").fields("first-name", "last-name", "email-address").result(function (data) {
console.log(data);
}).error(function (data) {
console.log(data);
});
}
</script>
hope this will help you :)
thanks
Hello there #Ulises Figueroa,
May be I am coming in a bit late but this is how I had got this done:
Start off with the initial script tag on the top of your page within the head section:
<script>
Client Id Number here:
onLoad: onLinkedInLoad
authorize: true
</script>
Then, in your JS File,(I had placed an external JS File to process this API sign up/ Auth), have the following details placed:
function onLinkedInLoad() {
IN.Event.on(IN, "auth", getProfileData);
}
function onSuccess(data) {
console.log(data);
}
function onError(error) {
console.log(error);
}
function getProfileData(){
IN.API.Profile("me").fields(["firstName","lastName", "email-address", "positions"]).result(function(data) {
var profileData = data.values[0];
var profileFName = profileData.firstName;
var profileLName = profileData.lastName;
if(data.values[0].positions._total == "0" || data.values[0].positions._total == 0 || data.values[0].positions._total == undefined) {
console.log("Error on position details");
var profileCName = "Details Are Undefined";
}
else {
var profileCName = profileData.positions.values["0"].company.name;
}
var profileEName = profileData.emailAddress;
//console.log all the variables which have the data that
//has been captured through the sign up auth process and
//you should get them...
});
}
Then last but not the least, add the following in your HTML DOCUMENT which can help you initiate the window popup for the linkedin auth sign up form:
<script type="in/Login"></script>
The above setup had worked for me. Sure this will help you out.
Cheers and have a nice day.
Implementation looks good. I'd believe this is a result from the profile's privacy settings. Per linked-in's docs:
Not all fields are available for all profiles. The fields available depend on the relationship between the user you are making a request on behalf of and the member, the information that member has chosen to provide, and their privacy settings. You should not assume that anything other than id is returned for a given member.
I figured out that this only happens with certain LinkedIn accounts, so this might be caused because some privacy setting with the email. I couldn't find any reference to the documentation so I had to consider the case when email field is not available.
I have been seeing questions on Stack Overflow to access the Facebook friends list of a user. I have tried in many different ways to do this and unfortunately nothing seems to be working for me.
Can any one tell me the exact problem I am facing? I'm totally new to javascript. Below is the code I am using
<html>
<head>
<title>My Facebook Login Page</title>
</head>
<body>
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
var friends = new Array();
FB.init({
appId : 'some_id', // App ID
channelUrl : 'http://apps.facebook.com/myapp', // Channel File
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
FB.api('/me/friends', function(response) {
if(response.data) {
$.each(response.data,function(index,friend) {
alert(friend.name + ' has id:' + friend.id);
});
} else {
alert("Error!");
}
});
};
// Load the SDK Asynchronously
(function(d){
var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;}
js = d.createElement('script'); js.id = id; js.async = true;
js.src = "http://connect.facebook.net/en_US/all.js";
d.getElementsByTagName('head')[0].appendChild(js);
}(document));
</script>
<p>
<fb:profile-pic uid='loggedinuser' facebook-logo='true'/>
</p>
</br>
</br>
"Welcome, <fb:name uid='' useyou='false'></fb:name>
</br>
</br>
</br>
</br>
</br>
</br></br> <fb:login-button autologoutlink="true" />
</body>
</html>
I am getting the response as undefined and am not able to even login to facebook. I tried using the following sample http://jobyj.in/api/get-facebook-friends-using-javascript-sdk/. This works fine with the Demo but then I downloaded it and tried to run from my machine it is also not giving me any result.
Any suggestions for me?
Update
I am using the example given by #Somnath below and able to login. But after that getting the value undefined for response.session resulting in zero friends list. Any idea for this?
Here is tutorial for login through javascript.
Tutorial Javascript SDK
Ist try to log in. Otherwise you will get undefined response.
FB.getLoginStatus(function(response) {
if (response.session) {
// logged in and connected user, someone you know
FB.api('/me/friends', function(response) {
if(response.data) {
$.each(response.data,function(index,friend) {
alert(friend.name + ' has id:' + friend.id);
});
} else {
alert("Error!");
}
});
}
});
You will get friend list of logged in user.
Updated Answer:
Don't specify channelUrl at time of initialization. Only give only following four parameters. Try this out.
FB.init({
appId : 'some_id', // App ID
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
Update2:
Try using fql:
if (response.session) {
//getting current logged in user's id from session object
globaluserid=response.session["uid"];
//fetching friends uids from 'friend' table. We are using FB.api syntax
FB.api(
{
method: 'fql.query',
query: 'SELECT uid1 FROM friend WHERE uid2='+globaluserid
},
function(response) {
//once we get the response of above select query we are going to parse them
for(i=0;i<response.length;i++)
{
//fetching name and square profile photo of each friends
FB.api(
{
method: 'fql.query',
query: 'SELECT name,pic_square FROM user WHERE uid='+response[i].uid1
},
function(response) {
//creating img tag with src from response and title as friend's name
htmlcontent='<img src='+response[0].pic_square+' title='+response[0].name+' />';
//appending to div based on id. for this line we included jquery
$("#friendslist").append(htmlcontent);
}
);
}
}
);
} else {
// no user session available, someone you dont know
top.location.href="../kfb_login.php";
}