Social Login

By default Social Login is disabled as some find it difficult to integrate. To add social login you have to install native plugins and uncomment the code.

Uncommenting the code

• Uncomment Facebook and GooglePlus import in src/app/app.module.ts ,src/pages/account/my-account/my-account.ts , src/pages/checkout/billing-address-form/billing-address-form.ts

//import { Facebook } from '@ionic-native/facebook';
//import { GooglePlus } from '@ionic-native/google-plus';

• Uncomment Facebook and GooglePlus in provides section of src/app/app.module.ts

// Facebook,
// GooglePlus,

Social login is used in three pages

1. src/pages/account/my-account

2. src/pages/account/register

3. src/pages/checkout/billing-address-form

I am telling the steps to enable social login on of the pages. Follow the same for other pages

• Uncomment GooglePlus, Facebook constructor src/pages/account/my-account/my-account.ts file

private googlePlus: GooglePlus, private fb: Facebook

• Uncomment Social login in src/pages/account/my-account/my-account.ts file

 /* facebookLogin() {
         this.facebookSpinner = true;       
         this.fb.login(['public_profile', 'user_friends', 'email']).then((response) => {            
         this.service.sendToken(response.authResponse.accessToken).then((results) => {                
         this.facebookSpinner = false;                
         this.nav.setRoot(TabsPage);                                
         this.functions.showAlert('success', 'Logged in successfully');            
         });        
         }).catch((error) => {            
         console.log(error)            
         this.facebookSpinner = false;            
         this.functions.showAlert('Error', error);        
         });    
         }    
  gmailLogin() {        
         this.googleSpinner = true;        
         this.googlePlus.login({            
         'scopes': '',            
         'webClientId': this.config.webClientId,            
         'offline': true        
         }).then((res) => {             
         this.gres = res;             
         console.log(this.gres);            
         this.googleSpinner = false;            
         this.values.avatar = res.imageUrl;                        
         this.service.googleLogin(res).then((results) => {                
         this.functions.showAlert('success', 'Logged in successfully');               
         this.nav.setRoot(TabsPage);            
          });        
          }).catch((err) => {           
          this.googleSpinner = false;            
          this.error = err;            
          this.functions.showAlert('Error', err);           
          console.error(err);        
            });    } */

• Uncomment Social login buttons in src/pages/account/my-account/my-account.html file

 <!--div class="login-div" > 
 <ion-col class="col1"> 
 <img src="assets/image/facebooklogin.png" style="width : 80% ; height : 80%" (click)="facebookLogin()"> 
 </ion-col> 
 <ion-col class="col2"> <img src="assets/image/googlelogin.png" style="width : 81% ; height : 80%" (click)="gmailLogin()"> 
 </ion-col> </div-->

Google Authentication

1. Get your credentials from Google.

2. Install the Google native plugin.

1. Get your credentials from Google.

Go to https://console.firebase.google.com and create a project.

Once project is added we need to create both ios and android app in firebase console https://console.firebase.google.com.

let’s start with the iOS one,

Choose your project. Click settings icon and then select project settings

Click on ADD APP and then choose platform

It will ask you an iOS Bundle ID, to get it, go into your app’s config.xml file and copy the package id you’re using, it’s the one that looks like (id=”com.ionicframework.something”) from your config.xml file.

Click REGISTER APP. It will generate GoogleService-Info.plist file.

Click on Download GoogleService-Info.plist file, which is a config file for iOS.

After downloading GoogleService-Info.plist file click on Continue > Continue > FINISH.

Copy GoogleService-Info.plist file to your project root directory.

You will get REVERSED_CLIENT_ID from the downloaded GoogleService-Info.plist file. REVERSED_CLIENT_ID is required while installing Google native plugin at the later stage.

​

Once we add iOS app, we need to add Android app.

Click ADD APP and choose android platform

It will ask you an Android Bundle ID, to get it, go into your app’s config.xml file and copy the package id you’re using, it’s the one that looks like (id=”com.ionicframework.something”) from your config.xml file.

Click REGISTER APP. It will generate google-services.json file

Click on Download google-services .json file, which is a config file for Android.

After downloading google-services.json file click on Continue > FINISH

Copy google-services.json file to your project root directory

You will get CLIENT_ID from the downloaded google-services.json file.

Important Note: Choose "client_id" that is present inside "oath_client"

​

Add CLIENT_ID in src/providers/config.ts file

webClientId: any = '456352511209-fbam1kgj6354543fgfdfdstvfidbs1.apps.googleusercontent.com';

2. Install the GooglePlus Cordova Plugin.

We will get REVERSED_CLIENT_ID in GoogleService-Info.plist file

Run following command to install GooglePlus Cordova plugin

 ionic cordova plugin add cordova-plugin-googleplus --variable REVERSED_CLIENT_ID=CLIENT_ID

 npm install --save @ionic-native/google-plus

Facebook Authentication

Make sure you've registered your Facebook app with Facebook and have an APP_ID

1.First have to create a new Facebook App inside of the Facebook developer portal at https://developers.facebook.com/apps

Retrieve the App ID and App Name

2.Add android and ios platform. Go to settings>basics as shown below and click Add Platform.

​

Choose a platform

3.Fill required fields while adding android and ios platforms and save changes.

4.Final step, Change status of the app from development mode to Live .

Install the Cordova and Ionic Native plugins. where App ID and App Name are the values from the Facebook Developer portal.

ionic cordova plugin add cordova-plugin-facebook4 --variable APP_ID="123456789" --variable APP_NAME="myApplication"

npm install --save @ionic-native/facebook

Make sure to add

<string name="fb_app_id">yourappid</string>

<string name="fb_app_name">yourappname</string>

in platforms/android/app/src/main/res/values/strings.xml

Now you are ready to build your app.

ionic cordova build android

ionic cordova build ios