I have a page tab app. The site that has my app hosted has SSL enabled. When I view the page tab using IE9 I get an insecure content error and in my console I can see:
HTTPS security is compromised by http://static.ak.facebook.com/connect/xd_arbiter.php?version=11
this is only when I view the page tab using regular http protocol e.g:
http://www.facebook.com/mypage/myapp
if I am viewing Facebook securely it does not happen, e.g:
https://www.facebook.com/mypage/myapp
The app uses the JavaScript SDK but I am doing things to ensure it uses the secure version such as:
FB._https = true;
before
FB.init()
when I link to the SDK I am sure I am using the secure connection:
(function (d) {
var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
if (d.getElementById(id)) { return; }
js = d.createElement('script'); js.id = id; js.async = true;
js.src = "https://connect.facebook.net/en_US/all.js";
ref.parentNode.insertBefore(js, ref);
} (document));
I do not get these errors if I view the pages directly on my server , it only happens when viewed inside of the page tab. I'm thinking that Facebook is generating this call to unsecure resources. I've done allot of searching but can't find a way to fix this. Could anyone recommend a way to deal with this? Any help would be very much appreciated. Thanks!
Related
Here I have a very, very noob question. I'm trying to create a web facebook app, using Javascript SDK. I have never done any website, any app, etc. So very basic, excuse me in advance..
Basically, I'm following the steps decribed in the quickstart: https://developers.facebook.com/docs/javascript/quickstart
I created a html file, and copy-pasted exactly what is described on this page:
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'your-app-id',
xfbml : true,
version : 'v2.8'
});
FB.AppEvents.logPageView();
};
(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 = "//connect.facebook.net/en_US/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
I changed "your-app-id" with the id I was provided.
Then I just open my html file with my web browser, which is showing a blank page, I guess it's normal at that point.
Then, I go to the next step, that is supposed to "trigger a share dialog" (see: https://developers.facebook.com/docs/javascript/examples). Again, I copy-paste the provided snipped starting with FB.UI(... and paste it after the FB.init() call, which is just before the "FB.AppEvents.logPageView();" line, if I'm not mistaken (?).
And then I reload my html file with my browser.
According to the "examples" page, "Now when you reload your page, you'll see a Share dialog appear over the top of the page."
Well, it's still a blank page.
So, I guess my approach is very naive.. is it supposed to work just like that? Or if not, what am I doing wrong? Am I supposed to download something before?
Thanks in advance for any help! :)
You have to test this on a real server, not just by opening the html file in a browser. Either upload it to an external server or start one on localhost. You can also try adding the protocol:
js.src = "https://connect.facebook.net/en_US/sdk.js";
...but i would recommend using a server on localhost and NOT adding the protocol.
I am trying to upgrade my firebase GAS webapp, and previously I had a popup which would log the user in with Google. I'm not sure what I'm doing wrong, but I have upgraded to the new firebase, and am now trying to get the same login working with the new code format.
What is happening, is that the popup comes up and immediately disappears. Can anyone see what I am doing wrong here?
Thanks for you help.
<html lang="en">
<head>
<script src="https://www.gstatic.com/firebasejs/3.1.0/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/3.1.0/firebase-auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/3.1.0/firebase-database.js"></script>
<script>
var config = {
apiKey: "",
authDomain: "",
databaseURL: "",
storageBucket: ""
};
firebase.initializeApp(config);
</script>
</head>
<body>
<label id="name">First Name</label>
<script>
var provider = new firebase.auth.GoogleAuthProvider();
firebase.auth().signInWithPopup(provider).then(function(result) {
var user = result.user;
document.getElementById("name").value = user;
}).catch(function(error) {
console.log(error);
});
</script>
</body>
</html>
The problem is solved. I got onto the wonderful people at Firebase, and Dane and I worked through it all till it worked. My code was fine, the issue was in the credentials. If you have the same issue, are all the steps we went through:
Google Configuration
Go to this link google developers console
Go to the credentials option on the left hand side of the screen
Click Browser API Key and copy it
Ensure the API key you copied is the same as the API key in your web app configuration. If it doesn't match, replace the api key in your code with the API key that you copied
Under 'OAuth 2.0 client IDs', click 'Web client (auto created by Google Service)'
Navigate to 'Authorised JavaScript origins' section
Add the full URL you're accessing when you're testing the page, or to be sure, a more general one like https://script.google.com/*
Click on the oAuth web application
For authorized javascript origins please add .firebaseapp.com
For authorized redirect URIs please add .firebaseapp.com/__/auth/handler
Click 'Web client (auto created by Google Service)'
Copy the Client ID and Client Secret
Go to the sign In method page of Firebase Console
Click Google
Click Web SDK configuration
Update the Client ID and Secret with the values you obtained
Click save
Firebase Configuration
Go to this firebase console
Select your project, click on the Auth option on the left hand side of the screen, then select sign in method at the top of the screen
Scroll down to the OAuth redirect domains and see if your custom domain is listed
If not, click Add domain, input your custom domain and click Add
Open Google Chrome and go to the page where your app is deployed.
Right click the page and select 'Inspect'
You will see a Console tab and a down arrow (looks like an inverted triangle). - Click the down arrow and select 'userHtmlFrame (...)'
In the terminal (blue arrow pointing to the right), paste 'window.location.hostname' and click enter
A string will be displayed. Copy it and add it to the authorized domains from your Firebase console (Auth > Sign-in Method> OAuth redirect domains).
I got the same problem , it worked fine while debugging in localhost, but when trying to login from "https://www.example.com" the popup disappear imediately, I fixed it by adding "mydomain.com" in firebase console -> Authentication ->SIGN-IN METHOD tab: scroll down to "OAuth redirect domains"
and click "ADD DOMAIN"
Here is the bare minimum I found needed to get client side auth working in Apps Script. I created a new firebase project. I enabled Google sign-in provider. I added the webapp's origin to the OAuth redirect domain list. I get this by launching the webapp and looking in dev tools inspector. Under the elements tab it will be the src of the top level iframe. It will look something like: n-rn4a4ioahvqauYhvzh2nktp3vxnuap6y7htmacq-0lu-script.googleusercontent.com
code.gs
function doGet() {
return HtmlService.createHtmlOutputFromFile('index')
}
index.html
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
</body>
<script src="https://www.gstatic.com/firebasejs/3.2.0/firebase.js"></script>
<script>
// Initialize Firebase
var config = {
apiKey: "AIzaSyADzG0boXmVUJb07K5NbCC0c6SrP8x3Msk",
authDomain: "testclientauth-57c09.firebaseapp.com",
databaseURL: "https://testclientauth-57c09.firebaseio.com",
storageBucket: "testclientauth-57c09.appspot.com",
};
firebase.initializeApp(config);
</script>
<script>
var provider = new firebase.auth.GoogleAuthProvider();
provider.addScope('https://www.googleapis.com/auth/plus.login');
firebase.auth().signInWithPopup(provider).then(function(result) {
var token = result.credential.accessToken;
var user = result.user;
console.log(user)
}).catch(function(error) {
var errorCode = error.code;
var errorMessage = error.message;
var email = error.email;
var credential = error.credential;
});
</script>
</html>
I was just struggling, try to debug around the code and find if there is any wrong in javascript but could find nothing. Then base on answer from Kat, I thought it could not be that complicated, and it might come from some configuration mistakes in firebase website. So go into firebase configuration for your app, in the tab Authentication, there is Sign-in method and there it is, all log-in methods to my app was disabled.
I enabled google authentication and boom, it works as expected. It is also amazed how easy it is for setup authentication system for my app using firebase. Thanks guys from firebase :-)
I am building a web app and just installed ssl.
Everything seems to be fine except for these two errors I'm getting about fonts being loaded over an insecure connection. The console suggests it's something that Modernizr is doing, but I can't figure out where and how to fix it.
Here's the console output:
The page at 'https://myawesomewebsite.com/' was loaded over HTTPS, but ran insecure content from 'http://themes.googleusercontent.com/static/fonts/rosarivo/v1/OGdIq-p0tOtBN2VMVvO9W_esZW2xOQ-xsNqO47m55DA.woff': this content should also be loaded over HTTPS.
modernizr-2.8.0.min.js:4
The page at 'https://myawesomewebsite.com/' was loaded over HTTPS, but ran insecure content from 'http://themes.googleusercontent.com/static/fonts/inconsolata/v5/BjAYBlHtW3CJxDcjzrnZCIbN6UDyHWBl620a-IRfuBk.woff': this content should also be loaded over HTTPS.
modernizr-2.8.0.min.js:4
I am actually using TypeKit for my fonts, so I have no idea what these Google Fonts are doing on the page and why Modernizr would be loading them.
There is a test for #font-face for CCS3 support in the full build of modernizr. I believe this test code loads some font just to see if that is working.
If you don't need that, use the build configurator on the modernizr page to exclude that from your custom built library.
By the way, it seems that the newer version of modernizr loads the fonts over SSL.
Test Code in modernizr 2.8.3
/*>>fontface*/
// #font-face detection routine by Diego Perini
// javascript.nwbox.com/CSSSupport/
// false positives:
// WebOS github.com/Modernizr/Modernizr/issues/342
// WP7 github.com/Modernizr/Modernizr/issues/538
tests['fontface'] = function() {
var bool;
injectElementWithStyles('#font-face {font-family:"font";src:url("https://")}', function( node, rule ) {
var style = document.getElementById('smodernizr'),
sheet = style.sheet || style.styleSheet,
cssText = sheet ? (sheet.cssRules && sheet.cssRules[0] ? sheet.cssRules[0].cssText : sheet.cssText || '') : '';
bool = /src/i.test(cssText) && cssText.indexOf(rule.split(' ')[0]) === 0;
});
return bool;
};
/*>>fontface*/
// CSS generated content detection
tests['generatedcontent'] = function() {
var bool;
injectElementWithStyles(['#',mod,'{font:0/0 a}#',mod,':after{content:"',smile,'";visibility:hidden;font:3px/1 a}'].join(''), function( node ) {
bool = node.offsetHeight >= 3;
});
return bool;
};
I'm sorry, I have searched for a day and a half but I can't find the specific answer I'm looking for.
My Facebook Like button doesn't appear on IE, Chrome or Firefox. I am using Javascript.
I have the required HTML addition.
I need to put in the Meta Tag
meta property="og:tag name" content="tag value"
COULD I GET AN EXAMPLE FOR THE "TAG NAME" AND "TAG VALUE"?
I don't know what to fill in!
I am supposed to have the Javascript SDK right after the body; however, I don't know what to put for an APP_ID as in:
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'YOUR_APP_ID', // App ID
//CAN I GET AN EXAMPLE OF YOUR_APP_ID, please?
channelUrl : '//WWW.YOUR_DOMAIN.COM/channel.html', // Channel File
//is channel.html the page it's on?
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
// Additional initialization code here
};
// Load the SDK Asynchronously
(function(d){
var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
if (d.getElementById(id)) {return;}
js = d.createElement('script'); js.id = id; js.async = true;
js.src = "//connect.facebook.net/en_US/all.js";
ref.parentNode.insertBefore(js, ref);
}(document));
</script>
I am getting so frustrated! Please help me!
The YOUR_APP_ID is the ID of your Facebook Application. If you haven't created a App, you can do so here.
However, you don't need to use an app to use the Like Button plugin. You should be able to use the Plugin just by copy-and-pasting the plugin code from the developer website. If that doesn't work, use the debug tool to see what's going wrong.
Well, I recommend you to read more carefully the documentation of the Facebook's JS SDK, but also the "Getting Started" and the "Core Concepts". There you will find a lot of very useful information.
I'll try to explain what the App_id is. When you want to do some more funcional applications, that interact with user information from facebook, you need to create a Facebook's app. To do that log into your account and go to https://developers.facebook.com/apps. There you need to tell your app's name, URL, and some other things. When you save you'll see an app_id, that is an unique number that identifies your app on Facebook. Is this number that you have to put in your script (surrounded by quotes, don't forget).
The channel file is a single line html file that you have to put in your server, at the same domain of your app. The content of this file is:
<script src="//connect.facebook.net/en_US/all.js"></script>
Replace the "en_US" by your app locale.
You questioned about the meta tags of the OpenGraph. Well, when you click "like" for a URL, the Facebook-bot navigates to your page and reads the meta information. When it finds OpenGraph meta tags, the information posted at the user wall is more personalized. You'll have to spent a little time to understand more what kind of OpenGraph meta tags you will need, once every site has different information to share.
I'm setting up a rails app and trying to implement login via Facebook JS SDK. Missing Omniauth already... :(
Anyway, what happens is that the dialog pops up, the user provides the login info, but then it redirects to https://www.facebook.com/connect/window_comm.php?_id=some-string&_relation=opener&auth_token=some-big-string, a blank screen. The pop-up doesn't close.
If I close it manually, though, and then refresh my page, I can see the login happened.
A curious thing is that on the first login, when permissions are asked for, everything works as expected, with the pop-up closing after permissions are granted or denied.
Tested on Chrome, FF, Safari and Opera. Consistent behaviour.
If I debug the blank redirect page on Chrome, there are two errors:
1) Unsafe JavaScript attempt to access frame with URL http://something from frame with URL https://something. Domains, protocols and ports must match. (note http x https...)
2) window_comm.php:7Uncaught TypeError: Cannot call method '_recv' of undefined
Here's the relevant code:
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'my-app-id',
status : true,
channelURL : 'http://localhost:3000/channel.html',
cookie : true,
oauth : true,
xfbml : true
});
FB.Event.subscribe('auth.login', function(response) {
window.location.reload();
});
};
(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 = "//connect.facebook.net/pt_BR/all.js"
fjs.parentNode.insertBefore(js, fjs);
}
(document, 'script', 'facebook-jssdk'));
</script>
<div class="fb-login-button" data-show-faces="true" data-width="400" data-max-rows="1" perms="offline_access"></div>
Thanks a lot for any light on this... Driving me nuts! =(
Edit: Can it be a bug on Facebook, since it is redirecting from http to https?
This answers Q.1) only. Facebook new requirements:-
switching to Oauth2.0 to fetch token_access
using SSL (ie: https://) to authenticate (hence the cross domain issues)
Also, I'd generally start with the code below to figure out the possible user state during the login process. That means clicking on anything and everything during testing phase.
FB.Event.subscribe('auth.authResponseChange', function(response) {
alert('The status of the session is: ' + response.status);
});