I'm trying to integrate Phonegap 3.1 with phonegap-facebook-plugin, to make my application able to login with facebook:
https://github.com/phonegap/phonegap-facebook-plugin
After various searches I found a way to make it work with last version of phonegap, but I'm having 2 main issues:
1) I really don't understand how to configure the "Native Android App" on facebook developer panel, in particular the "Class Name".
Information I found online are a bit confusing. I tried:
com.facebook.LoginActivity
my.app.main.activity
com.phonegap.plugins.facebookconnect
With both of them I receive this error in the logcat:
Failed to find provider info for com.facebook.katana.AttributionIdProvider
Even if this error is thrown, facebook login works, but:
2) FB.init returns status unknown even if I'm already logged and, when I call FB.login, I receive:
You already authorized appname.
It's a bit frustrating that the app user have to confirm authorization everytime he opens the app...
I'm doing something wrong?
If someone is interested, I finally resolved leaving the facebook connect plugin and using facegap
It's incredibly simple to integrate.
EDIT:
example:
$(document).FaceGap({
app_id : 'xxxxxxxxxxxxxxxx',
scope : 'user_photos',
host : 'https://yourdomain.com', //App Domain ( Facebook Developer ).
onLogin : function (event)
{
if (event.message == "Success")
{
alert("LOGIN WORKED!");
}
},
onLogout : function (event) {
if (event.status === 1)
{
alert("LOGOUT!");
}
}
});
Important: the host parameter must be a valid URL in your app domain (the one you set in the facebook app configuration). It could be also a blank page, it will be never be loaded, but needs to be a working url, in order to make facegap work.
I also created a fork with a bug fix and a new function (feed functionality):
Related
I'm using Google Sign-In JavaScript client for months without problem.
But recently when user tapping on sign in button from webapp that added to homescreen, the signin pop-up just hang without showing any content.
When debugged via remote debugging, an error is displayed in console pane:
Uncaught Failed to get parent origin from URL hash!
originated from 4188232449-v2-idpiframe.js:136 (javascript loaded internally by google library).
I'm sure it's not programming/config error since the same webapp was previously working for months without problem, and I haven't modified any code.
I've tried google search for this particular problem and browse Google documentation for any recent changes in Google Sign-In API without any luck.
Is it bug from Google API Javascript client library, glitch from recent Chrome browser update on Android, or there is some changes in API usage that I doesn't yet aware?
Library used is https://apis.google.com/js/platform.js
This is init param for gapi.auth2.init():
{
client_id: GAPI_CID, // defined as constant
cookiepolicy: 'single_host_origin',
prompt: 'select_account',
ux_mode: 'popup',
fetch_basic_profile: true
}
Any insight will be much appreciated. Thank you.
P.S.: This problem is different with Uncaught Failed to get parent origin from URL hash since on that case the problem is caused by misconfiguration of required credential in Google API console.
If you never had succedded in integrating sign-in flow with your app, perhaps answer from that post can help you.
Otherwise, if you have had successfully integrated sign-in flow for some time but recently problem suddenly/erratically appears with symptom of blank screen on popped-up window, than you have same problem with me.
I can confirm we are experiencing the same problems at my company since recently. It seems a bit erratic, not 100% of the time. But for some users, some time, they are met with an empty sign-in popup with the url pointing to "https://accounts.google.com/o/oauth2/iframe" but nothing happens.
Not a complete answer yet, but this may be a reasonable workaround for some. I updated the ux_mode to use redirect and it is partially working now.
auth2 = gapi.auth2.init({
client_id: '1234.apps.googleusercontent.com',
scope: 'profile email',
ux_mode: 'redirect',
redirect_uri: 'https://blahblah.io/oauth2callback'
})
NOTE: it seems redirect_uri is required, contrary to Google's docs. This isn't a perfect drop-in replacement, but it solves the "URL hash!" error
This blog post and the Git Repo in it could also be helpful for anyone attempting to use redirect
My electron app started to fail today for the same reason. Been debugging quite a lot and I think found the reason, but don't know how to solve it, why it happened, or if it is electron or google's fault.
In my electron app, I have 2 webviews, one for the main content and another one for google popup dialogs.
So when google needs to open the authentication, it generates this IFRAME:
<iframe id="ssIFrame_google"
sandbox="allow-scripts allow-same-origin" aria-hidden="true"
src="https://accounts.google.com/o/oauth2/iframe#origin=https%3A%2F%2Fxxxx.com&rpcToken=dxxd318480305.4777704"
style="... display: none;"></iframe>
Mind that the URL has HASH parameters: your origin and the token.
However, when on the electron side I capture the new-window event in order to open the URL myself in another webview, the event I receive LACKS the hash parameters:
event {
type : "new-window",
url:"https://accounts.google.com/o/oauth2/iframe",
.
.
}
So what google's iframe is complaining about (I debugged it) is exactly that it can't find the origin and rpctoken parameters that should be in the hash parameters.
For a reason I don't understand (I haven't updated electron) the new-window event does not receive the full url anymore.
Using #howMuchCheeseIsTooMuchCheese answer below I have changed the flow to use the redirect callback, then capture that callback myself and restart the application. It is not ideal, but at least I can login into my applications.
I have a Facebook JS SDK login flow here: https://web.triller.co/#/user/login
When the user taps the Facebook button, the following function is executed:
loginFacebook()
{
const fbPromise = new Promise((resolve, reject) => {
FB.login(resp => {
if (resp.authResponse)
{
resolve(resp.authResponse.accessToken);
}
else
{
console.log(resp);
reject(new Error('Facebook login canceled or failed.'));
}
});
});
return fbPromise
.then(accessToken => api.postJson('user/login_facebook', { accessToken }))
.then(this._handleLogin.bind(this));
}
Basically, it calls FB.login(), and expects to receive a valid resp.authResponse. Unfortunately, it doesn't, even after successfully authenticating on the Facebook popup/tab. Instead, we receive { authResponse: undefined, status: undefined } and the following error from the browser:
Unsafe JavaScript attempt to initiate navigation for frame with URL
'https://m.facebook.com/v2.8/dialog/oauth?foo=bar'
from frame with URL 'https://web.triller.co/#/user/login?_k=cmzdb6'.
The frame attempting navigation is neither same-origin with the
target, nor is it the target's parent or opener.
The error occurs immediately after authenticating within the Facebook popup/tab, and it only occurs on Android Chrome. Desktop Chrome (on a Mac) does not show the same error. Safari on iOS does not show the error, either.
Any thoughts on what's going on? Why the difference between Android Chrome and desktop Chrome? Could it have something to do with the hash in the URL?
In desktop this issue can be caused by XFINITY Constant Guard Protection Suite Chrome extension. Disble it and problem will be solved.
In Android, try removing XFINITY or similar security extensions or applications (Norton security antivirus).
https://developer.salesforce.com/forums/?id=906F00000008qKnIAI
I think it fails because of the m.facebook.com/... based on this https://en.wikipedia.org/wiki/Same-origin_policy#Origin_determination_rules (see the case for http://en.example.com/dir/other.html and why it fails). Although it shouldn't based on what I've done with the fb api this is weird, try making a cors request instead as a workaround?
This is a known issue here https://code.google.com/p/android/issues/detail?id=20254.
When the window.open is called without proper arguments, it will not be opened as expected.
It can be overcome by either updating the browser (for client, check the browser version and if old one, force them to update it).
Otherwise (not applicable for you since you can't change the FB function), pass the correct arguments to window.open
Interestingly I only seem to get this when I am using the mobile device simulator in Chrome.
Looking at the source code for the Facebook SDK there is the following line:
url: i.resolve(a.display == "touch" ? "m" : "www") + "/" + d.url,
Now "m" then becomes "m.facebook.com" whereas "www" becomes "www.facebook.com". So it's using a different URL based on whether or not it's touch.
Now they're the same domain anyway, and the connect API is loaded from facebook.net (not .com) so it's not as simple as just being a different domain. However I suspect the issue could be related to this.
In either case when not in mobile device testing mode I don't get the error.
I'm having problems getting Branch.io to work in a Cordova powered Android app. I have a landing page that parses the data from branch.io deep links and forwards the user to the correct page. My javascript for this page contains:
function onDeviceReady() {
console && console.log("Device Ready");
initBranch();
}
function initBranch() {
branch.init(<branchKey>, function(err, data) {
console && console.log("branch init error: " + err);
//then the parsing and forwarding follows - omitted here
}
I then created a Branch.io deep link to this landing page in the web api and tested it in chrome which works.
Then i tried to move to the Cordova app...
I followed this guide to prepare the app for branch.io:
https://dev.branch.io/recipes/quickstart_guide/cordova/ (I installed the plugin and adapted the Manifest file.)
But when i try to open the same link that worked in chrome on my Android device the app opens correctly and the landing page loads, but i'm not forwared. Instead i see the following error in logcat:
I/chromium(19382): [INFO:CONSOLE(22)] "Device Ready"
[...]
I/chromium(19382): [INFO:CONSOLE(29)] "branch init error: Error: API request /v1/open missing parameter device_fingerprint_id"
Can anyone tell me what i'm doing wrong? I'm just getting to know Cordova and Branch.io so it's probably something small i'm overlooking.
Thanks,
Lif
A colleague of mine figured it out:
Branch.io creates an entry branch_session in the local storage of the android device. On my device this session was corrupted somehow and the device_fingerprint_id was empty:
{"session_id":"198413861345316824","identity_id":"198398707320770300","device_fingerprint_id":null,"browser_fingerprint_id":null,"link":"<link>","data":"{\"+is_first_session\":false,\"+clicked_branch_link\":false}"}
After clearing the local storage* the session was freshly created, and now looks like this:
{"session_id":"198413861345316824","identity_id":"198398707320770300","device_fingerprint_id":"118176839880411216","browser_fingerprint_id":null,"link":<link>,"data":"{\"+is_first_session\":false,\"+clicked_branch_link\":false}"}
And now deep linking works.
Kr,
Lif
* To clear the local storage i used chrome://inspect --> inspect webview, go to resources tab, choose "local storage" and the the correct url, then remove all values.
I am using FB.UI api to allow users to post to their wall, here is the code for that:
FB.ui(
{
method: 'feed',
name: name,
link: linkPath,
picture: thumbnailPath,
caption: iconName,
description: 'Come check out my my awesome post'
},
function(response) {
if (response && response.post_id) {
alert('Post was published!');
} else {
alert('Post was not published!');
}
}
);
Normally this works fine and the Facebook dialog pops up showing the picture linked from "thumbnailPath", but when I use a test account that has enabled secure browsing, the thumbnail does not show up and when it is posted to the wall there is no picture. I am running this off of a MAMP Pro server and I created the certificate using MAMP's "Generate self signed certificate" feature, so it is not a valid certificate. I am wondering if this is the reason that my thumbnail won't show up. When I goto the path linked by the variable "thumbnailPath", it shows up just fine. I have tested this in Chrome, Safari and Firefox and I get the same behavior in all browsers.
I am wondering if my invalid certificate is likely to be the cause of this issue, or does that not make sense? I have been unable to find any other links online that describe similar problems so I am unsure if this has anything to do with my certificates.
If you don't have a valid certificate, then FB cannot/won't scrape the object over https including metadata like the image. Get a real cert, then make sure FB can scrape your url using the Debugger.
Also, if this is a brand new object and nothing has been published on the object, then FB doesn't know it exists (and won't have a thumbnail to show). You can initiate a pre-emptive scrape using the Debugger or programmatically with a GET/curl (see "Updating Objects", https://developers.facebook.com/docs/opengraph/objects/ ).
When publishing an app on apps.facebook.com (Canvas), you also need a valid cert for secure browsing.
If you are just testing the app, then you can put your app in Sandbox mode using the App Dashboard, which will let you, admins, testers, and other people you define in the Roles section use the app on Canvas with http (not requiring secure browsing).
I solved the problem by simply making sure to always link the the thumbnail with an http address instead of an https address, one I did this the thumbnail would always show up.
So, I'm using the Facebook JS SDK, and I keep getting 191:
Now, I have checked my settings, and everything seems to be in order. App Domain is set to my base domain (alehunt.com), and "Website with Facebook Login" => "Site URL:" is set to "http://www.alehunt.com". I'm not doing any canvas-related stuff.
When looking at the URL for the login dialog window produced by FB.login I'm quite surprised to see that redirect_uri does not point directly to my app, but instead goes via http://static.ak.fbcdn.net/connect/xd_proxy.php. I'm wondering if this is the reason for the 191 error.
Now, if I change that part of the redirect_uri to be my own everything seems to work just fine. The dialog is presented as it should.
The complete URL is https://www.facebook.com/dialog/oauth?api_key=MYAPPID&app_id=MYAPPID&client_id=MYAPPID&display=popup&domain=www.alehunt.com&origin=1&redirect_uri=http%3A%2F%2Fstatic.ak.fbcdn.net%2Fconnect%2Fxd_proxy.php%23cb%3Df2f3026b8%26origin%3Dhttp%253A%252F%252Fwww.alehunt.com%252Ff298bcee3c%26relation%3Dopener%26transport%3Dpostmessage%26frame%3Df3d63e980c&response_type=token%2Csigned_request&scope=email&sdk=joey
Can anyone shed some light on this? Why is the JS SDK insisting on setting all this in the redirect URI?
The error I'm seeing is:
API Error Code: 191
API Error Description: The specified URL is not owned by the application
Error Message: Invalid redirect_uri: Given URL is not allowed by the Application configuration.
I'm testing in Chrome 21
Turns out this was due to using a Facebook JS client which had been modified by Cordova (PhoneGap). Still not sure exactly what the issue was, but everything worked just fine when I moved over to loading the JS directly from Facebook.