A few days ago I blogged about using the Ionic Auth service with the latest version of Ionic 2 ("An example of the Ionic Auth service with Ionic 2". One of my readers asked if I could update the example to make use of social login. I worked on that yesterday and have an updated example to share. Please be sure to read that previous post first so you have a bit of context on what we're building!
As I said, for this iteration of the demo, I'm going to use social login. While one app could support both social and "regular" login/registration, I thought it would make more sense to only support one or the other. So this version of the app completely removes the registration feature and just supports logging on with Facebook or Twitter. And I chose those two rather arbitrarily. The full list of supported social logins supported by Ionic also include Google, Instagram, LinkedIn, and GitHub.
For Facebook, I began by following the directions under "Native Login". The docs are a bit confusing at times because they no longer match (precisely) the 'flow' you get at Facebook when adding an application. I was able to work around it, but just remember that you're going to have to click around a bit differently than what the Ionic docs suggest. (I filed a bug report for this, but at the end of the day, external sites like this will change from time to time and I'd expect Ionic's docs to sometimes be a bit behind.) There is one major issue with this page though that I'll bring up in a moment.
Once you've followed these directions and installed the appropriate plugins, you can then start writing your code. I began by modifying the login page. I got rid of the accordion and just added two buttons:
<!--
Generated template for the Login page.
See http://ionicframework.com/docs/v2/components/#navigation for more info on
Ionic pages and navigation.
-->
<ion-header>
<ion-navbar>
<ion-title>Login/Register</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<button ion-button color="primary" full (click)="doFacebook()">
<ion-icon name="logo-facebook"></ion-icon>
Login with Facebook
</button>
<button ion-button color="primary" full (click)="doTwitter()">
<ion-icon name="logo-twitter"></ion-icon>
Login with Twitter
</button>
</ion-content>
Note the use of icons in the buttons to make them fancy. Here's the updated UI:
Each button is tied to a method to handle it's particular login. For the most part, this is rather simple. For example, here is the Facebook code:
doFacebook() {
console.log('do FB');
this.facebookAuth.login().then(() => {
this.navCtrl.setRoot(HomePage);
});
}
At that point the native code takes over. I'm using Genymotion on my laptop to test Android, and I'm not terribly happy with how this looks, but here it is in action.
As I said, I don't think this is the best screen shot, but it does work well. I was able to login and then I was considered logged in by the Auth system. Here is where I ran into a serious doc issue. Once logged in, the app likes to greet you by name. In my previous version, when you registered I asked you for a name. Facebook certainly knows your name, but how do you get it? Turns out the other doc for Facebook login (http://docs.ionic.io/services/auth/facebook-auth.html), the one covering InAppBrowser, has a section on this, Social Data.
Basically you will find the data returned from Facebook under the user object in a social.facebook block.
constructor(public navCtrl: NavController, public user:User, public facebookAuth:FacebookAuth, public auth:Auth) {
console.log(user);
/*
find the name based on how they logged in
*/
if(user.social && user.social.facebook) {
this.name = user.social.facebook.data.full_name;
} else if(user.social && user.social.twitter) {
this.name = user.social.twitter.data.full_name;
} else {
this.name = "Friend";
}
}
And here it is - correctly recognizing my name:
The last part to this was handling logout. Facebook requires slightly different code, so I've got a bit of logic to handle this. Notice that I could probably handle the "how did you login part" a bit nicer.
logout() {
//switch based on social login, could be better
if(this.user.social && this.user.social.facebook) {
this.facebookAuth.logout();
} else {
this.auth.logout();
}
this.navCtrl.setRoot(LoginPage);
}
So Twitter wasn't much more work. The login routine is simple:
doTwitter() {
console.log('do Twitter');
this.auth.login('twitter').then(() => {
this.navCtrl.setRoot(HomePage);
});
}
And here is how it rendered the UI:
And that's basically it. You saw above how I handled getting the name as well as how I handle logout. Frankly the most difficult part was the stuff outside of my Ionic code. In general, it feels like a simpler, easier solution than requiring a unique registration. You can find the complete source code for this version here:
https://github.com/cfjedimaster/Cordova-Examples/tree/master/ionicAuth2Social
Archived Comments
oh man, I struggled with this for 5 days, and gave up now you have it working =) can you just download or clone your brain and let me have a copy?.... three times this year I've found myself on you site as I'd hit a brick wall. This is me trying to say thanks :)
You are most welcome - glad this was helpful!
Hello again Mr Camden, I seek your wisdom - I'm sure I'm missing something obvious but how/where would you store extra/meta-data and link it to the user? For example, you want to store data such as "Date, Time and Distance" - how would you personally store it? I see that Facebook returns 'uid' so we could use that to post data but where could we store the data (online, not local) - if we used Firebase why use the Ionic social Auth at all. Just after your opinion on the matter if you have the time - Thanks! =)
You can store any custom data you want - on the Ionic side. See the docs here: http://docs.ionic.io/servic...
As for your Firebase question, I don't have an answer. I don't use Firebase yet. I've been hoping to play with it sometime soon. In general, as an Ionic person, I can see giving preferneces to Ionic's services too.
How can we integrate this with firebase?
I haven't used Firebase yet so I can't comment.
Thanks great tutorial. How can i access your sample code.
The very last line of the article is the GitHib repo. :)
Hi Sir,
I seem to be doing something silly for the facebook integration, I followed the instructions but when I upload it and try to test it using ionic view the button is dead (doesn't load up anything) except for the console.log('do FB');
I am trying it with an android phone I even created the hash key
In the docs, they explain you have to add a plugin. Ionic View only supports a subset of plugins, and that one may not be supported. Check the Ionic View docs.
Thanks for that Ray, I have been hacking away with it last night and I am trying to now use the InAppBrowser example but for both twitter and facebook getting the "inappbrowser missing plugin". I have tried Ionic View, downloading and installing the ionic debug apk and even using plugins like Ripple.
I have limited time to work on this but will retry to get it working tonight :)
Dumb question - but did you install the plugin?
Yep I had. I have managed to resolve my silly problem which was adding this line again cordova plugin add cordova-plugin-facebook4 --save --variable APP_ID="" --variable APP_NAME="" ... Originally When I set this up I accidentally deleted my app via ionic view and when I recreated it I forgot this step!
Cool - glad you got it!
Hi Ray,
After I do logout(), my data seems to be caching and if I attempt to login as a different user/account I am still greeted as previously. On Ionic View I have to manually refresh the page and then it displays correct name. I have tried different options and according to some blogs - this.nav.setroot() should've worked but it hasn't. I also tried localStorage.clear(). Is there anything like $ionicHistory.clearHistory()
$ionicHistory.clearCache() for ionic2?
Looking into this now. Unfortunately the app is being cranky under Ionic2 (it was built with an earlier version).
Oh wait - Ionic View? Yeah, you can't use that for this demo. It made use of the native plugin for Facebook login. That's not supported by Ionic View.
As just an FYI, testing w/ Twitter, I logged in as two people, and it did not cache my name.
Hi Ray, My issue was related to how my app was setup (different pages to social and custom login) also the page that was displaying the name of the logged in user was the app.html. After spending a little time going through ionic docs I found what I needed was to setup Ionic2 events which works perfectly. http://ionicframework.com/d...
I'm glad you figured it out.
Hi,
Is it possible to get consumer key and token_secret while logging in through twitter ?
I filed a bug for this ages ago - is it not done yet?
Unfortunately, I can't seem to find my bug. I know I (or someone else) reported the issue.
So this is the issue:
https://github.com/driftyco...
I honestly don't remember if the Social object has the info.
when i am using this i am facing issue ionic Cannot find module "ionic-native" when i use (public auth: Auth, public user: User) in constructor . have asked question on stack https://stackoverflow.com/q... .. please give me some solution
this is my updated question https://stackoverflow.com/q...