# Social Login

## Uncommenting the code <a href="#uncommenting-the-code" id="uncommenting-the-code"></a>

* 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**

```bash
//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,
```

{% hint style="info" %}
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
{% endhint %}

* 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

```coffeescript
 /* 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

```markup
 <!--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** <a href="#google-authentication" id="google-authentication"></a>

1. Get your credentials from Google.
2. &#x20;Install the Google native plugin.

**1.** **Get your credentials from Google.**

&#x20;Go to [https://console.firebase.google.com](https://console.firebase.google.com/) and create a project.

![](https://1319283601-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LF-v8mhdlBDzXsLDgdV%2F-LF2IQM7nERAm0-qStVS%2F-LF2KESYIqUgtDsIRj8l%2Fimage.png?alt=media\&token=9ed37984-da69-4c61-957e-6a057ade89b9)

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

**let’s start with the iOS one,**

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

![](https://1319283601-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LF-v8mhdlBDzXsLDgdV%2F-LF2IQM7nERAm0-qStVS%2F-LF2KHfIvtXUFwnhpj0u%2Fimage.png?alt=media\&token=7610459c-3a97-40a4-85dc-5983f8b9da8f)

Click on **ADD APP** and then choose platform

![](https://lh4.googleusercontent.com/7RqtesR4gd_8uN_HRt8j43NkEG92lcmcA7iBtnMrF1xQ_ZNBNGcJ77sK6zpBiftBsY4v-LYLMtp0EUIFt_RL-CnUzmaXM0JIRGtlxUvYN9GGBJ4E_iDA9LVDSwA49cP1wRE4c7Rq)

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.

{% hint style="info" %}
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.
{% endhint %}

​

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

Click **ADD APP** and choose android platform

![](https://lh3.googleusercontent.com/3o7IwVbTobpn3lHmEJwvWK9mECEo-9O3YYLTyG251hkOAsqUaz_OB2b8HAOCNJWqh6SiyxCrIqYLvc3qLUNSoVhP4yIX7D1d5YErxLtMZlqyxuyKXSrf-2x4kDllCMbJWSQXF2fj)

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"](https://1319283601-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LF-v8mhdlBDzXsLDgdV%2F-LF2IQM7nERAm0-qStVS%2F-LF2KXi4f7yoKA91RKIo%2Fimage.png?alt=media\&token=1c8c4050-b62f-482a-bc21-9cb6df65f27a)

​

Add CLIENT\_ID in **src/providers/config.ts** file

```typescript
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** <a href="#facebook-authentication" id="facebook-authentication"></a>

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>

![](https://blobscdn.gitbook.com/v0/b/gitbook-28427.appspot.com/o/assets%2F-L9dfyK8qHyd3G-y0mZm%2F-L9eCzE_nW5Wpt5D2PA1%2F-L9eJUBIGBbMuZcmSXxy%2F1.png?alt=media\&token=f18b1e26-91cd-4ea0-a87d-e3f4ec6032a2)

![](https://1319283601-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LF-v8mhdlBDzXsLDgdV%2F-LF2IQM7nERAm0-qStVS%2F-LF2KiCERAmsgRCSiYRw%2Fimage.png?alt=media\&token=ed65dd0a-2d78-4d58-88c7-888f9337d354)

Retrieve the `App ID` and `App Name`

![](https://blobscdn.gitbook.com/v0/b/gitbook-28427.appspot.com/o/assets%2F-L9dfyK8qHyd3G-y0mZm%2F-L9eCzE_nW5Wpt5D2PA1%2F-L9eJSiStOPgZOS6Xg5X%2F2.png?alt=media\&token=2e9cc279-e7b1-4bdf-be73-ce3eb972f9ab)

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

![](https://1319283601-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LF-v8mhdlBDzXsLDgdV%2F-LF2IQM7nERAm0-qStVS%2F-LF2KpP6IlLdLKzeaV46%2Fimage.png?alt=media\&token=e07a03bf-8c25-49ac-b6f7-5181b6ed9e69)

​

![Choose a platform](https://1319283601-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LF-v8mhdlBDzXsLDgdV%2F-LF2IQM7nERAm0-qStVS%2F-LF2KvJMk1MdxFX1vvl1%2Fimage.png?alt=media\&token=80797819-c3f8-48fc-8253-0029af9f54f8)

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

![](https://1319283601-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LF-v8mhdlBDzXsLDgdV%2F-LF2IQM7nERAm0-qStVS%2F-LF2KzY1VjGXTWLS0di1%2Fimage.png?alt=media\&token=44af90e7-36bb-4d84-a7e4-abe9c861e2d1)

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
```

{% hint style="info" %}
Make sure to add&#x20;

&#x20;`<string name="fb_app_id">`*`yourappid`*`</string>`

&#x20;`<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.
{% endhint %}

```
ionic cordova build android
```

```
ionic cordova build ios
```
