Facebook and Google OAuth with IONIC and AngularJS - TechieDreams
- Ionic framework » Ionic Examples »
- Facebook and Google OAuth with IONIC and AngularJS
Facebook and Google OAuth with IONIC and AngularJS
OAUTH gives a flexibility to choose the some of the Largest Data providers Example: Facebook and Google to Authenticate our Application user on our behalf. Other cool things are not just Authentication we can also request for user Profile details, friends etc.
Most of the times for an user registration we might just need Profile information like: name, email, profile pic, gender etc.. So as you can see by now we can SKIP the large forms for registration and login and JUST with a button click it takes you directly to the content no hassle.
So how to make this happen? Simple register your App with the Providers, basically they ask you to create an App on their developer sites. Once created an App you will have access to some tokens and keys which further can be used in the client Apps for Authentication and fetching other informations.
Here are the labels in this Tutorial to follow along:
- What’s the out come of this tutorial?
- Create an App on Facebook and Google and get the Keys for OAuth
- Creating a Basic App layout using IONIC
- Adding functionality with AngularJS
- User session using $cookieStore
- Wrapping up
1. What’s the out come of this tutorial?
We are going to create a simple Application with two screens,
- Welcome/Login screen: Displaying the App logo and social login buttons
- Dashboard/Profile: Displaying the logged in user details.
Here is the Demo URL check out: http://techiedreams.com/demos/oauth-ionic-angular/
Download the Sources from GitHub: https://github.com/chanusukarno/Angular-Ionic-OAuth
Other tips also covered with the Sample App:
- Client session maintenance using Cookies
- Profile cover design with Blurred-Glassy-Scaled effect
Prerequisites: Please check out some of the basic tutorials on Ionic and AngularJS, before jumping further in to this tutorial:
AngularJS: http://techiedreams.com/category/angularjs/
Ionic Framework: http://techiedreams.com/category/ionic-framework/
2. Create an App on Facebook and Google and get the Keys for OAuth
Facebook:
Video:
Step 1: Goto https://developers.facebook.com/ and login
Step 2: From the Left menu select Manage Apps under Developer
Step 3: User My Apps select Add a New App
Step 4: From the popup select Website
Step 5: Type in a name for the App and click Create New Facebook App ID
Step 6: Choose category form the Popup and Click Create App ID
Step 7: Enter the Captcha and click Submit
Now we are done with App creation. Go and setup other features.
Step 8: Under Tell us about your website Enter your website URL:
While testing under development you can use the local URL itself ex:
Later when published we need to change update this URL to the server address. And click Next.
Now copy the App ID and replace it in the index.html and Test the App .
Not done yet! Now the can only be tested by you, follow along to make it available for general public:
Step 9: Go to home page https://developers.facebook.com/ refresh now under My Apps we see our new App, select it.
Step 10: Under the Left Menu Select Status & Review
Step 11: When you try to switch that button it will ask you setup a valid email. Goto Settings and set a valid email then return to Status & Review and Switch the button.
Additionally Goto App Details and setup a logo for your App and other information.
Google+:
Video:
Step 1: Goto https://console.developers.google.com/project
Step 2: Login to with gmail account and Click Create Project
Step 3: Enter project name in the Popup and click create
Step 4: In the left Menu under API’s and auth select APIs
Step 5: Under Browse APIs Search for Google+ and turn it on
Step 6: In the left Menu under API’s and auth select Credentials
Step 7: It will ask you to first setup consent screen[Screen to setup about your App], click Configure consent screen
Step 8: Select email address, Give a name to Product, Optionally you can set a home page url and a URL to your App logo and Save
Step 9: Now give your App url under Create Client id and Click Create client ID
Step 10: Under public API access in the same screen click Create new Key
Step 11: Select Browser key from popup and enter your URL Ex: [* indicates any subfolder] and click Create new Key
Note: For development you can enter local address and while in Production update this urls to the servers
Copy the API KEY and replace it in Index.html Then again copy the CLIENT ID and in your controller replace the existing and Test the App
3. Creating a Basic App layout using IONIC
Firstly setup a new ionic project, follow this tutorial for instructions: http://techiedreams.com/getting-started-with-ionic-framework/
Then will design our welcome page, where will have a background image and app logo and login options at the center:
welcome.html
For this layout we don’t need a header so we can set on <ion-view>.
Then we add an ul to hold our social login buttons.
Then below the social buttons we add two buttons for email login and registration.
dashboard.html
Our dashboard in this example its rather a Profile where it holds user info like:
- Display Name
- Country
- Phone
- DOB
- Gender
Ionic has default styles available for all the components but for positioning on desired locations we need to write our own CSS.
Here is out final styles.css
Cool we now have our UI setup. Lets add the functionality to it now.
4. Adding functionality with AngularJS
Facebook or Google allows you to load the oauth js library dynamically, In the sense the initial loading time of your application doesn’t depend on the oauth libraries.
Also we need to initialize oauth with the keys we stored in the first step.
In the index.html we added this script to initialize and load the SDK dynamically:
And in our controller we add this script to query the Facebook and Google to get user details. Code is commented where necessary.
5. User Session using $cookieStore:
We use $cookieStore from angular-cookies.js, to setup user session when he logs in. On every route change will look if user is authenticated or not. Here is simple script for maintaining session with $cookieStore:
Note: ngCookies module should be added as a dependency before using $cookieStore.
Once user logs out we can remove the user data from the cookies, so our dashboardCtrl will be as follows:
6. Wrapping up
We now have Facebook and Google+ login system integrated in our Application. Its quite simple to include other OAuth systems also, a similar procedure try it out. Any quires post in the comments.
Note: By default when you click on oauth login buttons it opens the default browser on your Mobile. To make your app to handle the browser calls add ‘inappbrowser‘ cordova plugin:
From terminal in the Project directory Run:
Subscribe & Share Thanks!
This entry was posted in Ionic Examples
31 Responses
-
h, thanks for the tutorial , it works perfectly fine, but when i use this method in a cellphone android, doesnt work, what can i do? thanks
-
It should work on mobile as well but to open the oauth login popup with in the App add in app browser plugin:
From terminal in the app directory Run:
cordova plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-inappbrowser.git
-
-
hello, pls, I add the plugin and it works perfectly fine on the browser. But when I run in a cellphone show me a google message (ERROR: invalid_reques – invalid parameter value for origin: Missing authority: file://. ).
Tks.!
-
alsuelo March 10, 2015 at 11:47 pm
Hi !!! Any idea why when you test in a device the facebook button doesnt work ??
-
Hi Alsuelo, did you have any resolution for this?
-
-
Giuliano March 12, 2015 at 8:04 pm
Thank’s for the tutorial! It’s work in browser but when i try run in android show this message “invalid_request invalid parameter value for origin: Missing authority: file://”
-
Hi, i am having same problem as alsuelo, the facebook button is not working.. any clue?
-
Hi, this is not working for me. could you please provide some assistance. I have followed every step of yours but it is not working on my device, works fine with ionic serve.
-
Ramprakash April 6, 2015 at 12:12 pm
Is there any way to use Facebook app and google account to log into my app?
-
you can with ionic..
-
-
This is great. Thanks.
-
“It should work on mobile as well but to open the oauth login popup with in the App add in app browser plugin: From terminal in the app directory Run: cordova plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-inappbrowser.git – See more at: http://techiedreams.com/facebook-and-google-oauth-with-ionic-and-angularjs/#sthash.XWkKdqfU.dpuf ” Not working on Mobile app.
-
Sending to PhoneGap build, the button does not perform any function, you could tell that the installation of any extra plugin is required?
-
Hi there, does the login information store anywhere?
-
Hi i already install inappbrowser but it return to me Error: invalid_request invalid parameter value for origin:Missing Authority:file://
it working fine at ionic serve but when i try login at my mobile it return me this error what did i do wrong?
-
I mean in Google+ login but facebook working fine
-
I got the same Google+ problem (Ionic+Android platform with inappbrowser), and refer from https://developers.google.com/api-client-library/javascript/help/faq, it not support “file:// protocol”. Anyways this is great work, thanks.
-
-
No you are correct am also getting the same error
-
-
1689RR June 5, 2015 at 6:24 pm
Really good tutorial
-
Rohit Deshmukh June 17, 2015 at 4:27 pm
sir i try this application i works well but it can’t fetch mobile number and birth-date form the users account and for my application mobile number is necessary can you please help me to solve this problem??
-
Rohit Deshmukh June 17, 2015 at 4:30 pm
*i mean application works fine but it can not fetch mobile number from users account
-
Chris June 26, 2015 at 3:34 pm
Can you please look into the issue ” Error: invalid_request invalid parameter value for origin:Missing Authority:file://”. Inappbrowser plugin is installed. Everything works flawlessly in a desktop browser. However using Ionic View on a mobile device (iOS or Android) I get above error code. Thanks for the great tutorial.
-
Teja Sasank June 28, 2015 at 1:51 pm
Any one who solved the issues with facebook login button ?
-
prasad July 6, 2015 at 8:59 am
how to add ngcordova oauth plugin ,so that it can work on both mobile as well as web.?please give us answer …plzzzzzzzzzzzzzz
-
In mobile i m getting FB and GAPI not defined on clicking on respected buttons
-
08-03 01:44:53.675 26897-26897/com.ionicframework.angularoauth825929 E/Web Console? ReferenceError: gapi is not defined
at k.gplusLogin (file:///android_asset/www/js/controllers/controllers.js:57:9)
at file:///android_asset/www/lib/ionic/js/ionic.bundle.min.js:228:502
at file:///android_asset/www/lib/ionic/js/ionic.bundle.min.js:385:21137
at k.$eval (file:///android_asset/www/lib/ionic/js/ionic.bundle.min.js:156:305)
at k.$apply (file:///android_asset/www/lib/ionic/js/ionic.bundle.min.js:157:6)
at HTMLLIElement. (file:///android_asset/www/lib/ionic/js/ionic.bundle.min.js:385:21119)
at HTMLLIElement. (file:///android_asset/www/lib/ionic/js/ionic.bundle.min.js:63:285)
at n (file:///android_asset/www/lib/ionic/js/ionic.bundle.min.js:22:384)
at t (file:///android_asset/www/lib/ionic/js/ionic.bundle.min.js:22:216)
at HTMLDocument.l (file:///android_asset/www/lib/ionic/js/ionic.bundle.min.js:22:1447) at file:///android_asset/www/lib/ionic/js/ionic.bundle.min.js:133 -
08-03 01:46:00.890 26897-26897/com.ionicframework.angularoauth825929 E/Web Console? ReferenceError: FB is not defined
at k.fbLogin (file:///android_asset/www/js/controllers/controllers.js:10:9)
at file:///android_asset/www/lib/ionic/js/ionic.bundle.min.js:228:502
at file:///android_asset/www/lib/ionic/js/ionic.bundle.min.js:385:21137
at k.$eval (file:///android_asset/www/lib/ionic/js/ionic.bundle.min.js:156:305)
at k.$apply (file:///android_asset/www/lib/ionic/js/ionic.bundle.min.js:157:6)
at HTMLLIElement. (file:///android_asset/www/lib/ionic/js/ionic.bundle.min.js:385:21119)
at HTMLLIElement. (file:///android_asset/www/lib/ionic/js/ionic.bundle.min.js:63:285)
at n (file:///android_asset/www/lib/ionic/js/ionic.bundle.min.js:22:384)
at t (file:///android_asset/www/lib/ionic/js/ionic.bundle.min.js:22:216)
at HTMLDocument.l (file:///android_asset/www/lib/ionic/js/ionic.bundle.min.js:22:1447) at file:///android_asset/www/lib/ionic/js/ionic.bundle.min.js:133 -
sheikmasthan August 7, 2015 at 9:59 am
Hi it is not working in mobile app. Can you explain, How to write code for working in mobile application.
-
Hi.. Thanks for this tutorial man… helped me a lot !!! any idea on how to get facebook and google friends / contact list ?
-
gomathy August 18, 2015 at 7:25 am
I download the zip file and extracted. then i tried to import the proj. But i can’t able to import this proj in my eclipse(juno). help me.. Reply as soon as possible. Thanks in advance!
error when i tried to import this proj
1.import->android->Existing android code into workspace
” Select a directory to search for existing Android projects” error2.import->General->Existing projects into workspace
” No projects are found to import” error -
not able to get email from facebook..only name and profile pic i am getting
-
-
Recent Posts
Popular Posts
- Android zxing Barcode scanner integration
- Android Simple RSS Reader with Splash Screen and Custom List…
- Android custom GridView scalable (auto adjusting col width).
- Android Styling ActionBar Sliding Menu
- Android custom Grid View with zoom-in animation effect.
- Facebook and Google OAuth with IONIC and AngularJS
- Ionic Custom and Dynamic Theming
- Gmail like – Flip animated Multi selection list view…
Tags
ActionBar Animaton Activity Andorid contacts picker Android Android gridview angular-gulp-bower yeoman generator AngularJS angularjs factories angularjs services angularjs Todo App angular yeoman generator Animation Barcode scanner bower package manager Controllers createa yeoman generator data binding Drawing arrows Grid View grunt.js gulp.js gulp vs grunt illustrator introduction introduction to gulp.js ionic framework Ionic Themes Layouts Listview List View Mobile package manger Photoshop polymer polymer-todo publish yeoman generator Qr code rounded bitmap routing RSS Reader sliding menu Text effects Todo App Two way binding what is gulp.js-

