Why is Facebook connect button on click throwing a JavaScript error? - javascript

We're having a really odd problem. Basically the Facebook Connect button we put up on our local testing site worked fine until yesterday, now whenever we click on it,
it seems to go the xd_receiver.htm page which just shows a blank page rather than the app login and throws an error on this javascript file:
http://static.ak.connect.facebook.com/js/api_lib/v0.4/XdCommReceiver.js
The error is 403 forbidden, is this facebook blocking us? If so why could it be?
This is in our javascript tags:
<script src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php"
type="text/javascript"></script>
function OnRequestPermission() {
var myPermissions = "publish_stream";
FB.Connect.showPermissionDialog(myPermissions, function(perms) {
window.location.reload()
if (!perms) {
// handles if the user rejects the request for permissions.
// This is a good place to log off from Facebook connect
} else {
// finish up here if the user has accepted permission request
};
});
}
FB.init("OUR_ID", "xd_receiver.htm");
This is in our HTML code:
<fb:login-button onlogin="OnRequestPermission();"></fb:login-button>
It all worked fine with the permissions etc. till yesterday and brought up the login page before but now just shows a blank page with 403 on the XdCommReceiver.js file. No changes were made to our app. It's stopping us from progressing with our company's app and any help would be appreciated. Thanks!

The old featureloader.js SDK is deprecated - see https://developers.facebook.com/docs/oauth2-https-migration/ for more information - I'm surprised it was working as recently as last week - it was due to be shut off in October as far as I know

Related

Uncaught TypeError: Cannot read property 'PRM_ServerError' of undefined

I have published my code into QA server for testing. my code working fine on dev server. But on QA server my image button not fires an event. I went an developer console and see what i am getting. So i compare on my local to QA. Please find the images below. Those images from the developer tool-Console.
This is the error I am getting on QA
This is from my local host for the same page(working)
EDIT
If image not shown. This is the error I got.
Uncaught TypeError: Cannot read property 'PRM_ServerError' of undefined
MsAjaxJs?v=c42ygB2U07n37m_Sfa8ZbLGVu4Rr2gsBo7MvUEnJeZ81:1
I know this is kind of vague. But this is the error I got. I have no idea how I can find why my button not fire an event on QA server.
Please Help! Thanks
I have resolved my issue. As my image button was not fired, I have taken out the update panel from that .aspx page and set custom error mode to off on web.config on QA server. Then I could able to see the yellow(error) page.
My error was it was connecting to the wrong login user to database. When I created a entitymodel, I hide the username and password(integrated security=True). It works perfectly at my local machine. after I published it connecting to the different login. So, I gave username and password (persist security info=True) at datasource connection string. Now my image button event fired and worked perfectly.
Finally, I put back my update panel and comment out custom error mode from web.config on published server.
I will be glad if this helps someone!
Also had this problem with my .ascx user control (ASP.NET Web Pages project).
Make sure you do
this
first
In my case, I was missing a PostBackTrigger on my control:
<asp:PostBackTrigger ControlID="yourControl" />
Turned out, in my case, that the session state was being lost on Login. If this issue occurs for any one on the postback of the login credentials I would investigate this avenue.
I switched my site to use SQLServer Session management and all my problems disappeared.
<sessionState mode="SQLServer" sqlConnectionString="ASPState" allowCustomSqlDatabase="true" cookieless="false" cookieSameSite="None" timeout="780"/>

Using branch.io to redirect to app in javascript

So, we have a mobile download site that we want to bypass if the user already has our app installed, and open our app. We are using the branch javascript code to try to accomplish this task. We have our branch key where I have 'my_branch_key', and we copied the rest of the code below directly out of the branch instructions. And, of course, it is failing to redirect our mobile users. I imagine the problem is the lack of some sort of app identifier in the code, but we could not find any instructions on where to add that. Anyone know what we're missing and where we need to add it. Any advice would be greatly appreciated.
// load the Branch SDK file
(function(b,r,a,n,c,h,_,s,d,k){if(!b[n]||!b[n]._q){for(;s<_.length;)c(h,_[s++]);d=r.createElement(a);d.async=1;d.src="https://cdn.branch.io/branch-latest.min.js";k=r.getElementsByTagName(a)[0];k.parentNode.insertBefore(d,k);b[n]=h}})(window,document,"script","branch",function(b,r){b[r]=function(){b._q.push([r,arguments])}},{_q:[],_v:1},"addListener applyCode banner closeBanner creditHistory credits data deepview deepviewCta first getCode init link logout redeem referrals removeListener sendSMS setIdentity track validateCode".split(" "), 0);
branch.init('my_branch_key');
// define the deepview structure
branch.deepview(
{
'channel': 'mobile_web',
'feature': 'deepview',
data : {
'source': 'website'
}
},
{
'open_app': true
}
);
Additional info: We noticed an oddity when trying to test this, for a couple of our iPhone users, it seems to work perfectly, but for the rest of the iPhone users and all the android users it still fails to redirect.
Alex with Branch.io here: the automatic open_app: true setting actually doesn't work in iOS 9 with Safari, due to some changes Apple made to Universal Links in iOS 9.3. This is a fairly recent change, so our docs haven't been updated quite yet. It's annoying, I agree...
The best workaround is to put a button on the page with deepviewCta(). Visitors will have to click it to open the app. We realise this is not ideal, but it's the best option for Apple's current system.
The other option you can try is enabling your own domain for Universal Link. That way whenever a URL at your domain is clicked, your app will launch immediately and the site will never even be loaded.

Facebook Openfb cordova

Really struggling with facebook at the moment
I am trying to auth a user using openfb and facebook on an ios app being built with cordova (ionic). I have tried all the solutions I could find online.
My configuration is standard, and an almost copy and past of the openfb example. Without a callback url and with the following callback urls () I am getting the image you see on this facebook Security Warning while user has enabled secure login - iPhone
When I specify the callback url of http://localhost/oauthcallback.html. I get a Facebook mobile looking page with title, Error and message "Given URL is not permitted by the application configuration.: One of more of the given URLs is not allowed by the App's settings. It must watch the Website URL or canvas URL, or the domain must be a subdomain of one of the App's domains.
Note: works perfectly on web!
Can someone eplse point me in the direction to set this up once and for all on both Facebook and in openfb?
Please help!!!! :)
user1132726,
I struggled with that for days as well, looked over lots of forums, tried everything. Then I turned away to Javascript only.
We must have the right Javascript libraries in the right order. Some you can download, some you won't find easily.
<script src="js/jquery.mobile-1.4.5.min.js"></script>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="https://connect.facebook.net/en_US/all.js"></script>
<script type="text/javascript" src="js/cdv-plugin-fb-connect.js"></script>
<script src="js/openfb.js"></script>
Then you use regular Javascript logic to select your elements and use openfb API like:
openFB.login(
function(response) {
if (response.status === 'connected') {
alert('Facebook login succeeded, got access token: ' + response.authResponse.token);
// DO YOUR LOGIC HERE, I use perception: $.FacebookPerception.submit(response.authResponse.token);
} else {
alert('Facebook login failed: ' + response.error);
}
}, { scope:'email,public_profile,user_likes,user_friends'});
You must as well register your application at Facebook using Developers Console: http://developers.facebook.com . I used the website configuration with my main url: http://www.texugo.com.br/
I don't think you need other configurations. I tested only on Android. I don't know if you need to configure your App for Android at Facebook Console. I think it is not really used but haven't tested yet.
IMPORTANT: you need version 0.4 for openfb.js
Then you run Apache Cordova and deploy it to your mobile.
Further steps:
When you call Facebook it opens on a popop that Cordova applies
InAppBrowser, but I want to hide that ugly header that looks weird.
Integrate with Google+, LinkedIn and Twitter
Create OpenSocialAuth plugin
OBSERVATION: this is only working with Android, it does not work in web browsers. Gotta check it as well.
Hope it helps. Anything question me. I'm pretty sure I missed something.
See you.

Google Drive API, can't open standard sharing dialog via JS (x-frame-options error)

I have a JavaScript app which uses the Google Drive API. I read how to open a standard sharing dialog here: https://developers.google.com/drive/web/manage-sharing
<head>
...
<script type="text/javascript" src="https://apis.google.com/js/api.js"></script>
<script type="text/javascript">
init = function() {
s = new gapi.drive.share.ShareClient('<MY_APP_ID>');
s.setItemIds(["<MY_FILE_ID>"]);
}
window.onload = function() {
gapi.load('drive-share', init);
}
</script>
</head>
<body>
<button onclick="s.showSettingsDialog()">Share</button>
</body>
Seems like I do everything right, when I click my share button, the dialog starts loading but it can't be loaded.
In the console I see:
Refused to display 'https://drive.google.com/share?...' in a frame
because it set 'X-Frame-Options' to 'SAMEORIGIN'.
I've googled this error and I've seen that there are some similar questions in SO and other sites, but they don't help. I guess Google doesn't allow itself to be in a frame in a not-google-site (cause of "SAMEORIGIN").
What can I do to open sharing dialog in my app?
The "Launching the Google Drive sharing dialog in your app" page here states:
The URL of the page that launches the dialog must have the same origin
as the Open URL registered for the app.
If you then look at the instructions to "Configure the Drive SDK" here, you can see that the "Open URL" section reads:
There are two important things to keep in mind for the Open URL:
Make sure you give a fully qualified domain name for Open URL -- localhost won't work.
The URL must belong to you. After the app registration is complete, you'll need to verify your ownership of this URL in order to create a
Chrome Web Store listing. For more information, see Site Verification.
Hence your page which is launching the dialog does not have the same origin as the Open URL registered for the app in you Google Drive SDK settings. So to fix your problem correct the Open URL so that it has the correct URL i.e. a URL with the same origin as the Open URL. Note that you can change the Google Drive SDK settings via https://console.developers.google.com/project.
As well as making sure the Open URL is set correctly. You'll also need to substitute your Drive SDK app ID for 'MY_APP_ID'. You can find the App ID by following these instructions:
Goto https://console.developers.google.com
Click your project
Click "APIs and auth" on the left
Click the "Drive SDK" settings cog icon
The "App ID" can then be found under the "Google Drive SDK" title e.g. App ID: 47XXXXXXXX3
The problem was solved thanks to this answer https://stackoverflow.com/a/20742994/1185123
dan-man says in his answer:
Client ID You can find this in the Google Cloud Console - see above.
Mine is a 12 digit number, so yours will probably be too.
Mine client id looks like
175564412906-ui22fsaghkvkkj09j2bprku55m8k3d0d.apps.googleusercontent.com
I've used this id in
s = new gapi.drive.share.ShareClient('<MY_APP_ID>');
After reading the answer, I tried to use only first 12 digits of my client id. I didn't expect it to work, I was just desperate. But the strange thing, it works perfectly!
If somebody can explain why it works and why nothing about this is said in the documentation — you are welcome to answer!

Mobile safari - suppress Unsupported Protocol alert

I'm creating a website for iPhone and i use the native app (cliqcliq Quickpick) to upload photos. I use the script like the following to check if the application is installed. The basic idea is to send user to a custom url, if application is there it is launched, if it is not there the url should be ignored and user is taken to App Store. Below is the script:
window.launchQuickpic = function() {
var start = new Date();
setTimeout(function() {
if (new Date() - start > 2000) {
return;
}
window.location = 'http://www.cliqcliq.com/quickpic/install/';
}, 1000);
var getParams = [...];
window.location = 'vquickpic://?' + getParams.join('&');
};
If the native app is not installed I'm getting the alert box saying that Safari does not recognize the custom url. After user clicks "ok" it works as it is supposed to. But the alert is reeealy annoying.
I've tried to surround the window.location= code with try/catch. Didn't help.
If I understand correctly, you're seeing the expected behavior.
If the app isn't installed then the system has no knowledge of what it is supposed to do with a URL that starts with 'vquickpic://'. That is why you get the error message.
I presume that what you are seeing is that you first set the window.location to 'http://www.cliqcliq.com/quickpic/install/' but before that finishes loading you try to switch to window.location to 'vquickpic://'. That generates an error and the webview keeps loading the first URL when you dismiss the alert.
The main problem here is that the error is coming from the iPhone OS itself which isn't accessible from the javascript inside a webpage. A webpage can't ask the iPhone if it has a particular app installed or can carry out a particular operation.
I think the best you can do is tell the user that clicking the link will attempt to launch the native app if it is installed but if they get an error they need to dismiss it and hit another link on the page to install the app.
I have not got this to work yet but I think this is something you should investigate. It is my believe this will suppress the message .
window.onerror = function(msg, url, linenumber) { return true; }
I have also read somewhere that a user had success doing something similar to above but instead of returning true they would switch the window.location back to a valid location such as 'about:blank'. They where using a iframe in that implementation though.
OR maybe you could try Opera Mini for that matter

Categories