Social Login

I have commented social login code because some people find it difficult to integrate. To add social login you have to install native plugins and uncomment the code
  1. Uncomment Facebook and GooglePlus import in src/app/app.module.ts and src/pages/login.ts

     //import { Facebook } from '@ionic-native/facebook';
     //import { GooglePlus } from '@ionic-native/google-plus';
    
  2. Uncomment Facebook and GooglePlus in provides section of src/app/app.module.ts

     // Facebook,
     // GooglePlus,
    
  3. Uncomment GooglePlus, Facebook constructor src/pages//login/login.ts file

     /*, private fb: Facebook, private googlePlus: GooglePlus*/
    
  4. Uncomment Social login functions in src/pages/login/login.ts file

     /*facebookLogin() {
         this.facebookSpinner = true;
         this.fb.login(['public_profile', 'user_friends', 'email']).then((res: FacebookLoginResponse) => {
             this.userData.login(this.login.username);
             this.service.loggedInn = true;
             this.facebookSpinner = false;
             this.nav.setRoot(TabsPage);
             this.functions.showAlert('success', "Successfully Logged In");
             this.service.faceBookLogin(res.authResponse.accessToken).then((results) => {
                 this.nav.pop();
             });
         }).catch(e => {
             this.functions.showAlert('Error', e);
             this.facebookSpinner = false;
         });
     }
     gmailLogin() {
         this.googleSpinner = true;
         this.googlePlus.login({
             'scopes': '',
             'webClientId': this.service.settings.google_web_client_id,
             'offline': true
             }).then(res => {
             this.userData.login(this.login.username);
             this.service.loggedInn = true;
             this.googleSpinner = false;
             this.nav.setRoot(TabsPage);
             this.userData.setUsername(res.displayName);
             this.userData.setImage(res.imageUrl);
             this.service.googleLogin(res.userId, res.email, res.displayName, res.displayName).then((results) => {
                 this.nav.pop();
             });
         }).catch(err => {
             this.functions.showAlert('Error logging into Google', err);
             this.googleSpinner = false;
         });
     }*/
    
  5. Uncomment Social login buttons in src/pages/login/login.html file

     <!--ion-row responsive-sm class="social-login">>
       <ion-col>
               <button ion-button block type="submit" class="button button-block button-default" [disabled]="disableSubmit" (click)="facebookLogin(loginData)">
               <ion-icon item-left ios="logo-facebook" md="logo-facebook"></ion-icon>
                FACEBOOK
                <ion-spinner *ngIf="facebookSpinner" name="crescent"></ion-spinner>
           </button>
       </ion-col>
       <ion-col>
               <button ion-button block type="submit" class="button button-block button-default" [disabled]="disableSubmit" (click)="gmailLogin(loginData)">
               <ion-icon ios="logo-google" md="logo-google"></ion-icon>
                GOOGLE
                <ion-spinner *ngIf="googleSpinner" name="crescent"></ion-spinner>
           </button>
       </ion-col>
     </ion-row-->
    

Google Authentication

Get your credentials from Google.

Get your credentials from Google.
  1. Go to https://console.firebase.google.com and create a project.

    Local Image

     Once project is added we need to create both ios and android app
     in firebase console https://console.firebase.google.com.
    
  2. Choose your project. Click settings icon and then select project settings

    Local Image

  3. Click on ADD APP and then choose platform

    Local Image

  4. 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.

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

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

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

  8. 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.
    
  9. Click ADD APP and choose android platform

    Local Image

  10. 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.

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

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

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

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

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

    Local Image

    Important Note: Choose "client_id" that is present inside "oath_client"
    
  16. Add CLIENT_ID in WordPress Menu -> Mobile Options -> Settings -> Settings

Install the GooglePlus Cordova Plugin.

  1. Get REVERSED_CLIENT_ID from GoogleService-Info.plist file

  2. Run following command to install GooglePlus Cordova plugin. Replace myreversedclientid with one you got from prevoius step

     $ ionic cordova plugin add cordova-plugin-googleplus --variable REVERSED_CLIENT_ID=myreversedclientid
     $ npm install --save @ionic-native/google-plus
    

Facebook Authentication

  1. Create a new Facebook App inside of the Facebook developer portal at https://developers.facebook.com/apps.

    Local Image

    Local Image

  2. Retrieve the App ID and App Name

    Local Image

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

    Local Image

    Local Image

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

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

    Local Image

  3. 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
    

results matching ""

    No results matching ""