nraboy / ng-cordova-facebook-example Goto Github PK

Ionic Framework ngCordova Oauth Example for Facebook

JavaScript 79.95% CSS 19.86% HTML 0.19%

ng-cordova-facebook-example's Introduction

Facebook Oauth Example For Ionic Framework

This example will demonstrate how to use ngCordova to authenticate with Facebook and retrieve an access token for use with the Facebook REST API.

Requirements

Configuration

Download this example project from GitHub and run the following commands:

$ ionic platform add android
$ cordova plugin add org.apache.cordova.inappbrowser
$ cordova plugin add cordova-plugin-whitelist

The above commands will add the Android build platform and install the required Apache InAppBrowser plugin.

This example application requires you to have your own Facebook application registered with Facebook.com. Doing so will give you a unique client id that can be included into your project. When registering your application with Facebook, make sure to set the callback uri to http://localhost/callback, otherwise ngCordova will not function.

With the client id in hand, open www/js/app.js and find the following line:

$cordovaOauth.facebook("CLIENT_ID_HERE", ["email", "read_stream", "user_website", "user_location", "user_relationships"])

You will want to replace CLIENT_ID_HERE with the official key.

Usage

With this example project configured on your computer, run the following from the Terminal or command prompt:

$ ionic build android

Install the application binary to your device or simulator.

The application is currently composed of three parts and makes use of two of the official Facebook RESTful APIs.

Oauth sign in
Basic profile (GET /me)
Basic stream (GET /me/feed)

You will be required to sign into the application using your own Facebook username and password. Once logged in, you can view very basic information found in your profile or navigate to your stream. The stream will show posts with a comment and like count.

Version History

0.0.1

Add: oauth sign in
Add: view profile
Add: view feed of recent entries

Have a question or found a bug (compliments work too)?

Tweet me on Twitter - @nraboy

Resources

Ionic Framework - http://www.ionicframework.com

AngularJS - http://www.angularjs.org

Apache Cordova - http://cordova.apache.org

ngCordova - http://www.ngcordova.com

Nic Raboy's Code Blog - https://blog.nraboy.com

ng-cordova-facebook-example's People

Contributors

Stargazers

Watchers

Forkers

rjramirez rakesh-mohanta tkman59 shaulhadar dblanchard13 jrgcubano geminiyellow carlosrojaso joshbedo miguelramosfdz manujbahl alberto-grande domtkho sushiogoto riahk wnqnguo egacl dalessio tanggruy pawarpawan muhammadarslan egobrightan ramesh-c1 arodriguezsafe tutsblog nishanthkabra viliuskraujutis fenmingyu ahmedjawed01 devarchi33 lernrr777 hwanil sekouzed andrew168 ammarhasan koushiksaha89 nishant8bits davidsoloman agyrafa mariano-aguero liamjones1990 mukeshthawani rohit221045 taliwalt alvarotech shabbarabbas vaishunb vishalaezion kleitz sh-sabbir llg1 linstar4067 cleanique-coders davidgaldon dmente03 biggani tobizion ashish-pansheriya tuyendothanh thaer899 fibbarth gomavz webuti jayc13 nadeemayan4 andruxnet akilakarthick cyobiorah wils0751 vinum meensina johnulist ganesan786 wingzxx neron-x5 andresmrllo jvsouto neotim srikantn

ng-cordova-facebook-example's Issues

Have a problem with the URLS

Facebook response: Given URL is not allowed by the Application configuration: One or more of the given URLs is not allowed by the App's settings. It must match the Website URL or canvas URL, or the domain must be a subdomain of one of the Apps's domains.

Malfunction on new version of ngCordova

When ngCordova are updated to v0.1.27, the example show error on ngCordova injection:

facebookExample.controller("LoginController", function($scope, $cordovaOauth, $localStorage, $location) //<-- show "Error: [$injector:unpr] Unknown provider: $cordovaOauthProvider <- $cordovaOauth <-"

Keyboard is not defined. other ionic not same

Can i integrate easily the full process facebook login with simple ionic sidemenu starter ?
(i test it and it is not work easy at moment for me.. facebook connect is sensible)

Very thank to you.. (i'm on a two full Professional version with ionic : first is social and hard, second is simple: connect and reportings.)

other probleme is the standard keyboard not recognised for some angular functionnality
(npm update, node, npm -g (all) )
here my logs..

very thank.. if the app can be integrate in ionic standard project.. is very helpfull.. i can share with you some tricks ;-)..

thx.

"Something went wrong" error after fb login

Hello!

I followed instruction and created .apk. Installed and app runs well. Then I click Oauth Sign In - it goes to fb login page. After I enter email/pass it says "Something went wrong" with link "Back to home". When I click that link I am redirected to my FB profile feed so login was successfull. And if go back to app screen and try to click Profile of Feed - alert appears saying that I'm not logged in.

What could be the cause of this?

ERR_NAME_NOT_RESOLVED

I have this issue. How can fix this problem

And how can logout?

Error in Success callbackId: InAppBrowser ... : TypeError: Cannot read property 'split' of undefined

I'm getting the error in the title and I'm pretty sure it has something to do with the callback uri.
I've set the linkedin callback uri as instructed.

But the error persists no matter what I do. (like creating an actual file named callback in my ionic www folder) .
Is it something I'm missing?

Working in Emulator but not in device

I have forked it at https://github.com/AshishVishwakarma/ng-cordova-facebook-example
and created apk here https://build.phonegap.com/apps/1600329/builds , while running in emulator it is working fine but in device it is not getting clicked even it is not showing any error.

Please help me out.

An uncaught exception occurred and has been reported to Ionic

Hmm..

When i do ionic serve.

It wont serve

ionic $ An uncaught exception occurred and has been reported to Ionic

listen EADDRINUSE 127.0.0.1:8100 (CLI v1.6.5)

Your system information:

Cordova CLI: 5.3.3
Gulp version: CLI version 3.9.0
Gulp local:
Ionic Version: 1.0.0-beta.13
Ionic CLI Version: 1.6.5
Ionic App Lib Version: 0.3.9
ios-deploy version: Not installed
ios-sim version: 5.0.1
OS: Mac OS X Yosemite (i'm on Captain not Yosemite)
Node Version: v4.1.1
Xcode version: Xcode 7.0.1 Build version 7A1001

remove deprecated permission

You should remove (or replace) "read_stream" deprecated permission.

Now my app.js Line 44 looks like:

$cordovaOauth.facebook("769890273139866", ["email", "public_profile", "user_website", "user_location", "user_relationships"]).then(function(result) {

resource:
https://developers.facebook.com/docs/facebook-login/permissions

Best regards.

Login does not work as facebook allows HTTPS only

With a recent change for facebook apis,
Ref : https://developers.facebook.com/docs/facebook-login/security#https
Enforce HTTPS. This setting requires HTTPS for OAuth Redirects and pages getting access tokens with the JavaScript SDK. All new apps created as of March 2018 have this setting on by default and you should plan to migrate any existing apps to use only HTTPS URLs by March 2019.

I am trying to use this plugin in ionic cordova app, have setup app ids on facebook dashboard but the callback url now only takes HTTPS urls. Hence "http://localhost/callback" is not accepted.

The app, when I run on android device, shows "You are not logged in.." message.
Can anyone help?

Unable to fetch profile after login

I have plugin installed and login seems to be working. I get access_token, but graph API call fails with error {"data":{"error":{"message":"Invalid OAuth access token.","type":"OAuthException","code":190}},"status":400,"config":{"method":"GET","transformRequest":[null],"transformResponse":[null],"params":{"access_token":{"access_token":"C....3"},"fields":"id,name,first_name,last_name,email,gender,location,age_range,user_birthday","format":"json"},"url":"https://graph.facebook.com/v2.2/me","headers":{"Accept":"application/json, text/plain, /"}},"statusText":"BadRequest"}

Any idea on this one?

[Update] Access Token is valid, as I could search profile using Facebook Graph Explorer and Access Token returned, but graph API call fails:
$http.get("https://graph.facebook.com/v2.2/me", {
params: {
access_token: res.rows.item(0),
fields: "id,name,first_name,last_name,email,gender,location,age_range",
format: "json"
}
}).then(function (result) {
$scope.profileData = result.data;
}, function (error) {
alert("There was a problem getting your profile. Check the logs for details.");
console.log(JSON.stringify(error));
});

res.rows.item(0) is the access_token (prints correctly in console.log)

Regarding phonegap & angularjs implementation

Does this plugin work with angular js and phone gap implementation?

Token Refresh

Hi Guys,

How would i go about refreshing the token with ng-cordova? this is so the user doesn't have to re-login each time token times out.

Cheers in advance.

App says the url is not correct

Hi Nick! great job with this cool project.
I tried using it and did everything, but when trying to login the app, it says that the url is not correct..

I changed the uri to: http://localhost/callback
but i am not sure i did it right... does the reference for " callback" means i need to put something else in the end there? or is it copy paste and without editing? because that's what i did and it didn't work for some reason... perhaps there are any additional step that need to be done?

Thanks for your time,
Shaul.

No login memory?

I really like this implementation of the FB login but I have to re-enter my login credentials every time I run the app.

Is it normal?

App Not Setup: The developers of this app have not set up this app properly for Facebook Login.

Hi Nra, I was able to get the google oauth working! \o/

When I try logging in with facebook, the error I get with this app is

App Not Setup: The developers of this app have not set up this app properly for Facebook Login.

At https://developers.facebook.com/apps/:APP_ID/settings/basic/ I have the app domains set to localhost, I don't have anything in the "Namespace" field. The Site URL is http://localhost/, the Mobiel Site URL is http://localhost/

In https://developers.facebook.com/apps/:APP_ID/settings/advanced/ I have Valid OAuth redirect URIs set to http://localhost/callback

I'm not sure what else to do, if you have time, this would be a huge help. First time I've ever tried using oauth with Google or Facebook

Error in login permissions

I followed all the steps in the description and I have this error, could somebody help me

How to post / share a link

oauth is working perfectly. I want to share a custom link or post on feed. how to achieve this by using your code ?

could you please tell me the right settings of the app on developers.facebook.com/ ?

Given URL is not allowed by the Application

I followed the setup instructions but when i run the app on emulator i get ..

Given URL is not allowed by the Application configuration.: One or more of the given URLs is not allowed by the App’s settings. It must match the Website URL or Canvas URL, or the domain must be a subdomain of one of the App’s domains.

Any idea what this means and how to get around that issue ?

Facebook Login window not closing after login

Facebook Login window not closing after login.. Not Redirecting
This was occurred when using ionic latest

IOS webView:didFailLoadWithError - -1004: Could not connect to the server.

How do I surpass this screen please

Picture size

Is there any way to get another profile picture size? It seems to only come in 50x50p.
In the non-plugin version of the API, it looks like you set the picture with type=normal.
Is that possible here?

Thanks in advance.

Auto Reload with ionic not working.

The app is the same as others.. for me the live reload not working..

I want to use this github for have a new clean based app with very simple facebook login working with android.. thank for this.

why reload not work ? (ionic run android -c-l -s)

Receiving a 404 after logging in but i can access the url in the browser

So i came across this tonight, the authentication was successful and i start to go to the ProfileCtrl but then an alert displays saying There was a problem getting your profile. Check the logs for details. so i then use chrome://inspect to check the console of the application and see the image below. It shows the request was sent and returned a 404 but if i copy the link and open it in a tab i see all of the associated profile information 💀

Could not find inAppBrowser plugin

HI Nic,

I have building another app using cordovaOauth and i was getting the error Could not find inAppBrowser plugin for facebook authentication. I tried this sample app it also gives me the same error. Could you please advise what am i missing.

Thanks,
Arvind

How to show loading spinner ?

i found this very helpful. And my question is that ,can we show loading spinner before opening the facebook login page.

White Blank Screen & Login Question

Hi,

I'm getting a White screen after clicking on the sign in button, IOS.

Question , if my app has got Facebook logged in , will it still direct me to the browser to login?

Application Error: ERR_CONNECTION_REFUSED

Hey there!

First of all, thanks for the wonderful example, I have tried implementing it to my Ionic Project.

The Facebook login popup works just fine and I can login, however, I received a error popup saying "Application Error: ERR_CONNECTION_REFUSED" with my access_token and all that in an android emulator and the application just crashed. I put it on to my android phone and received the same error

Have you encountered such error?

Getting E-Mail Address

Is there anyway to modify this to add the e-mail address? I tried adding in ,email to the permissions in a GET and have been unable to get the e-mail address.