Social Login (for ionic 3 app)
Read this document to avoid any mistake or conflict - https://github.com/EddyVerbruggen/cordova-plugin-googleplus
Uncommenting the code
Uncomment Facebook and GooglePlus import in src/app/app.module.ts and src/pages/account/login/login.ts
//import { Facebook } from '@ionic-native/facebook';
//import { GooglePlus } from '@ionic-native/google-plus';Uncomment Facebook and GooglePlus in the providers section of src/app/app.module.ts
// Facebook,
// GooglePlus,Add GooglePlus, Facebook constructor src/pages/account/login/login.ts file
private googlePlus: GooglePlus, private fb: FacebookUncomment Social login in src/pages/account/login/login.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/login/login.html file
<!--div>
<ion-row class="login-div">
<ion-col class="col1"> <button ion-button outline full type="submit" text-uppercase [disabled]="disableSubmit" (click)="facebookLogin()">{{"Facebook" | translate}}</button> </ion-col>
<ion-col class="col2"> <button ion-button outline full type="submit" text-uppercase [disabled]="disableSubmit" (click)="gmailLogin()">{{"Google" | translate}}</button> </ion-col>
</ion-row>
</div-->Google Authentication
Get your credentials from Google.
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 a 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.
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
Add CLIENT_ID in src/providers/config.ts file
webClientId: any = '456352511209-fbam1kgj6354543fgfdfdstvfidbs1.apps.googleusercontent.com';2. Install the GooglePlus Cordova Plugin.
Run the 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@4Facebook Authentication
More detail - https://ionicframework.com/docs/native/facebook https://github.com/jeduan/cordova-plugin-facebook4
Make sure you've registered your Facebook app with Facebook and have an APP_ID
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 platforms. Go to settings>basics as shown below and click +Add Platform.
3. Fill the required fields while adding android and ios platforms and save changes.
4. In the final step, Change the 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 of 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@4You are done. Build Your App
$ ionic build android$ ionic build iosLast updated