So i´m having a situation that someone might be able to help.
Im creating a Mobile APP using PhoneGap Build. I´m trying to use this http://coenraets.org/blog/2014/04/facebook-phonegap-cordova-without-plugin/
Right know if I open the app inBrowser it will work. Ask's for permissions etc and fetch the user data correctly. Of course I defined a Valid oAuth: localhost/...html.
So it works for browser but doesnt work for mobile. Wich should be, if so, the valid url for the mobile? Cause since it's an APP iºm confused. I dont think it's necessary show code but if so just ask me.
Thanks ;)
You can still use openFB and it will work. you don't even need to change anything in the openfb.js file. all you have to do is manipulate the call method from the page where you want to call the facebook login window.
say for example you have the facebook call method in index.html
then add this script to that index.html page where the function "facebooklogin()" is called
<script>
openFB.init({ appId: 'your-app-id' });
function facebooklogin() {
openFB.login(function (response) {
if (response.status === 'connected') {
if (response.authResponse) {
var accessToken = response.authResponse.accessToken;
openFB.api({
path: "/{your app version in facebook developer envi.}/me?",
params: { "access_token": accessToken, "?fields":"name,email,gender,user_birthday,locale,bio&access_token='"+accessToken+"'" },
success: function (response) {
var data = JSON.stringify(response);
// do whatever you want with the data for example
$(".data_div").html(data);
$(".data_email").html(data.email);
},
error: function(err){
alert(err);
}
});
}
else {
alert(“empty response returned”);
}
}
else {
alert(“not connected”);
}
},
{
scope: "public_profile,email,user_birthday"
});
}
</script>
very important! Please replace {your app version in facebook developer envi.} with your app version like v2.0 or v2.5
also don't forget to change 'your app id' to you facebook app id example 432046826485152
with openfb you don't need to crack your head over learning hoe to configure facebook login in other platforms. this will serve all platforms
I've got it working on the phone.
The weird thing is that a real URL is not necessary, just a semantic valid one. I've added a Facebook Canvas platform, on the facebook app page, and filled the platform form:
URL = http://localhost/www/
Secure Canvas URL = https://localhost/www/
Both of above domains doesn't exists. I haven't filled the "Valid OAuth redirect URIs" field in the advanced tab.
After that, I've written the following code in my app:
openFB.init("xyz!##123456789"
, "http://localhost/www/oauthcallback.html");
It seems that what matters is that Facebook Canvas's domains or sub domains matches the one on the openFB.init redirectURL param...
I'm using openFB version 0.1. I'm gonna test the earlier versions.
UPDATE
It just have worked because I was using phonegap serve and it makes openFB understand that my app is a website, because phonegap developer app is a browser wrapper, not a app wrapper. If I try to run it in a compiled app (phonegap local build), my code doesn't work. I think I'll have to use facebook-connect earlier than I thought...
Related
I am trying to integrate reCaptcha with my Ionic Android/IOS app. The reason for this is that it calls the same API as the public Web app API.
I have tried creating a web key but due to the fact that the app is served from file:// it doesn't have a domain and as such i cant white list it.
I also tried to create a Android key and white list the App's package name but in both cases, i get the same error:
"error for site owner invalid domain for site key"
I tried using these recaptcha angular wrappers: ng-recaptcha and angular2-recaptcha, but obviously they fail as is a domain issue.
Is there any way to go around this?
So, after long searches and reading everything i found on the subject, i managed to find a workaround.
Instead of trying to load the captcha in my Ionic app, i am using the in-app-browser to open a page on our web version of the app that has the captcha. When the captcha is checked, it saves the code in the localStorage of the in-app-browser.
When the browser is initially opened i start running a script on the browser that checks its storage for the captchaCode.
Code example:
captchaCheck($event){
const browser = this.iab.create(YOUR_CAPTCHA_PAGE_URL_HERE,'_blank', 'location=no'); //AppSettings.CAPTCHA_URL
let loginCtx = this;
browser.on( "loadstop").subscribe(function() {
browser.executeScript({ code: "localStorage.setItem( 'captchaCode', '' );" });
var loop = setInterval(function() {
browser.executeScript({code: "localStorage.getItem( 'captchaCode' )"}).then((values)=>{
var captchaCode = values[0];
if (captchaCode) {
loginCtx.signinForm.get('captchaCode').setValue(captchaCode);
clearInterval( loop );
browser.close();
}
});
});
});
}
}
I'm building an android app with Ionic and cordova.
I have one wordpress website - where is oauth2 plugin installed with some access functions. I want first to get code and later send post to retrieve the token. I tested it in web-browser and it works well:
location.replace('https://xxx/oauth/authorize?response_type=code&client_id=xxx&redirect_uri=http://192.168.0.129:8100/');
Im getting code after client login to my website and its redirecting to my app which is standing on ip 192.168.0.129:8100 with code in url - it wo. But in the android Im usining:
var options = {
clearcache: 'yes',
toolbar: 'no'
};
$cordovaInAppBrowser.open('https://xxx/oauth/authorize?response_type=code&client_id=xxx&redirect_uri=http://192.168.0.129:8100/', '_blank' , options)
.then(function(event) {
}).then(function(){
});
Everything works but not redirection - it cant load my app again. I made some research and mostly people place http://localhost/ or http://localhost/callback to go back to android app but it also doesnt work for me. What is the redirect URL than?? How to get back to the app?
of course 'xxx' are just for example;)
After you have opened the url in the in app browser with $cordovaInAppBrowser , you need to listen to an event, $cordovaInAppBrowser:loadstart as described here, http://ngcordova.com/docs/plugins/inAppBrowser/.
So you can do it in the following way,
$cordovaInAppBrowser.open('https://xxx/oauth/authorize?response_type=code&client_id=xxx&redirect_uri=http://192.168.0.129:8100/', '_blank' , options);
$rootScope.$on('$cordovaInAppBrowser:loadstop', function(e, event) {
// check event for which url loaded. if it loaded the http://192.168.0.129:8100/ with the access token, then handle it there and close the in app browser with, $cordovaInAppBrowser.close();
})
I am building an Android App, using Phonegap. I have included oauth.io and have configured twitter / google+ and facebook logins.
I have included : OAuth.initialize('ACTUAL PUBLIC KEY'); in the device ready event.
I have written the same function, as per sample :
function login(provider, callback) {
OAuth.popup(provider)
.done(function(result) {
callback(null, result);
})
.fail(function(error) {
console.log(error);
callback(error);
});
}
When I call this function, InApp browser is opened and credentials are coming up, for each provider respectively. When the user logs in successfully, it goes to
http://localhost/#oauthio=%7B%22status%22success%22%2C%22data%22%3A%7B%22oaculDQAHRHACioXNL2BHMoFMHXQzKWZZn%22%2c
It does not come back to the Android App.
The InApp browser also does not close automatically.
As per manual, it should call back the function. Instead it is redirecting to a web page, which does not exist in Phonegap App.
Please guide.
Removed and added the plugin. It worked. Thanks.
I am developing a ionic mobile app in which i want to redirect to a thirdparty webflow which requests users' consent and redirects to the callback url which i should specific for me to grab the token as permission token to make further API calls. Since ionic itself is a html5 mobile app, what do i specify for the redirect url so the control comes back to my mobile app?
abstract:
This isn't exactly what you are asking for, but it works pretty well.
The Idea is that you use $cordovaInAppBrowser to open a webview and listen for events, namely
$cordovaInAppBrowser:loadstart
and
$cordovaInAppBrowser:loaderror
you can then look at the error and event arguments that are passed and use those to determine if you want to call
$cordovaInAppBrowser.close();
which will return you to your ionic app
code:
angular.module('myApp', ['ionic', 'ngCordova']).controller('AppCtrl', function($rootScope, $ionicPlatform, $cordovaInAppBrowser) {
$scope.openThirdPartyWhatever = function() {
$ionicPlatform.ready(function() {
var options = {
location: 'yes',
clearcache: 'no',
toolbar: 'yes'
};
$cordovaInAppBrowser.open('http://www.myAwesomeSite.com', '_blank', options)
});
};
//at some point your app tries to load 'http://localhost:8100/send-me-back-to-app'
$rootScope.$on('$cordovaInAppBrowser:loadstart', function(e, event) {
//and this function is called, so you do something like
if(event.url === 'http://localhost:8100/send-me-back-to-app'){
$cordovaInAppBrowser.close();
}
});
$rootScope.$on('$cordovaInAppBrowser:loaderror', function(e, event) {
$cordovaInAppBrowser.close();
alert('sorry, something went wrong');
});
});
helpful links:
https://www.genuitec.com/products/gapdebug/
http://ngcordova.com/docs/plugins/inAppBrowser/
It sounds that you will need to handle popup and redirects, you will need to install the cordova "inappbrowser" plugin in order to be able to open the thrid party webflow inside the app browser and then go back to normal.
Please take a look at this article in where they are explaining how to deal with facebook authentification using the firebase login methods with Ionic and cordova. It describes very similar steps that you will need to tackle your problem.
Firebase simple login with Ionic and Cordova
If you are in a rush start from "Getting It Working in the Emulator" but I recommend reading all the article quickly.
I am not sure which kind of third party webflow are you using, but maybe this could help you:
Zapier
I was looking for the same thing and found this plugin:
https://github.com/EddyVerbruggen/Custom-URL-scheme/blob/d1432ecfff63678a3155804839dda21607706e72/README.md
So I have been trying to run the Facebook Connect example for PhoneGap / Android with no luck.
https://github.com/davejohnson/phonegap-plugin-facebook-connect *
There are some similar threads with the same problem.. conclusion is that "Facebook SDK is a moving point"
I have succesfully compiled previously apps using phoneGap & Eclipse.
Now following the example* for Android. If I do exactly what they suggest. App shows the buttons but nothing happens when I click on them.
After analyzing the code I have noticed that
function initFB(){
try {
FB.init({ appId: "45253452345234523", nativeInterface: PG.FB });
document.getElementById('data').innerHTML = "";
} catch (e) {
alert(e);
}
}
there is a parameter nativeInterface : PG.FB which is nowhere described within Facebook API for this call..
http://developers.facebook.com/docs/reference/javascript/FB.init/
what is more interesting is that when i remove this parameter.. suddenly Login button goes to Facebook page with Error Code API 191.
So my question is what this parameter is supposed to do? and why it is not in Facebook API?
I have found no info about this parameter in internet. I guess if it would be a case of an out-dated FB API there would be some info available.
Any ideas?
Thanks,
Marcin
The "nativeInterface: PG.FB" option is to tell PhoneGap to use the native authentication interface instead of the mobile web interface. If you don't add in the "PG.FB" option, you'll get redirected to Facebook's mobile authentication instead. It took me a while to figure this out too, and it's not well documented, but that's what is going on.
Two other things about the PhoneGap Facebook Plugin that are not up to date with the latest Facebook JavaScript SDK:
When using FB.login() you should be using the "scope" parameter, but PhoneGap expects the deprecated "perms" parameter.
When the authentication response from FB.login() you should be getting "response.authResponse", but instead "response.session" is what is given back. This means you'll have to pull out the OAuth Access token with "response.session.auth_token" instead of "response.authResponse.accessToken".
Hopefully they'll get to updating the PhoneGap Facebook Plugin, but for now I use if/else statements to detect if PhoneGap is there. You can check if PhoneGap is initialized by using:
if(window.PhoneGap) {
//PhoneGap Library is Loaded
}