Preparing your social login

Last Updated On October 09, 2020
You are here:

Actually, Custom Listing App integrates two social logins: Google and Facebook.


Google social login:

iOS:
As the first step, you’ll need to create an account into this site:

https://console.developers.google.com/apis/credentials
As you’ve created your account, you’ll need to create your project.
Once this is done, you’ll need to select your project just created, you should now see a new page.
On the left side, you should now notice a voice called: Credentials.
Select that voice and press on “Create a new Credential” on the top, select ID client OAuth, select iOS and fill out everything.

Once you’ve done this:
cordova plugin add cordova-plugin-googleplus --save --variable REVERSED_CLIENT_ID=myreversedclientid

Where the REVERSED_CLIENT_ID is the value just created.

Android:
Register into this site:

https://console.firebase.google.com
Create a new project with the name of your app.
Add Android inside of your new project and fill the required fields (Name of your app, identifier of your app in play store and the SHA key, you can obtain that key using this inside the main directory of your project:
keytool -exportcert -keystore <path-to-debug-or-production-keystore> -list -v -alias <alias-name>).
Google console should manage everything by himself, if that is not happening, log inside you google console (https://console.developers.google.com/apis/credentials) and create a new key OAuth2 using the SHA key just used.

Facebook Social Login

iOS:
Create an account inside Facebook Developer: https://developers.facebook.com/apps/
Create a new app and then get inside “settings” on the left menù.
Get at the bottom of the page a select “add platform” and select iOS, fill now every field.

Remove node_modules, plugins, package-lock.json.

Write this in your terminal with the information that you can retrieve from the platform just added on Facebook developer:
ionic cordova plugin add cordova-plugin-facebook4 --variable APP_ID="123456789" --variable APP_NAME="myApplication"

Run this in terminal:

npm install --save @ionic-native/facebook
npm install
ionic cordova platform add ios@latest

Once everything is done, navigate inside those folders by terminal:
cd platforms –> cd ios
Open “Podfile” and modify it by writing:

platform :ios, ‘11.0’
use_frameworks!
target ‘Custom Listing App’ do
pod ‘OneSignal’
pod ‘FBSDKCoreKit’
pod ‘FBSDKLoginKit’
pod ‘FBSDKShareKit’
end

Write “pod install” into your terminal

After that, modify again the Podfile by writing:

platform :ios, ‘11.0’
target ‘Custom Listing App’ do
pod ‘OneSignal’,
pod ‘FacebookCore’
pod ‘FacebookLogin’
pod ‘FacebookShare’

end

Again, you will need to to write “pod install” into your terminal.
Now, you’ll have to modifiy the podfile by writing:

platform :ios, ‘11.0’
use_frameworks!
target ‘Custom Listing App’ do
pod ‘OneSignal’
    pod ‘FBSDKCoreKit’
    pod ‘FBSDKLoginKit’
    pod ‘FBSDKShareKit’
    pod ‘GoogleSignIn’
end

Go for ‘pod install’ one last time.
Now you can proceed by building your app.

Android:
Create an account inside Facebook Developer: https://developers.facebook.com/apps/
Create a new app and then get inside “settings” on the left menù.
Get at the bottom of the page a select “add platform” and select Android, fill now every field.

keytool -exportcert -alias <your_app_key> -keystore <keystore_file> | openssl sha1 -binary | openssl base64

This is the command line to get the Hash key

Remove node_modules, plugins, package-lock.json.

Write this in your terminal with the information that you can retrieve from the platform just added on Facebook developer:
ionic cordova plugin add cordova-plugin-facebook4 --variable APP_ID="123456789" --variable APP_NAME="myApplication"Run this in terminal:
npm install –save @ionic-native/facebook
npm install
ionic cordova platform add android@9.0.0

IMPORTANT bug well known:

If you’re experiencing an error report on iOS regarding an undefined identifier from Facebook, proceed by doing this:

Proceed by removing your platform, then write this into your terminal:

ionic cordova plugin remove cordova-plugin-facebook4
npm uninstall @ionic-native/facebook
npm install @ionic-native/facebook
ionic cordova plugin add cordova-plugin-facebook4 --variable APP_ID="123456789" --variable APP_NAME="myApplication"



If you’re experiencing an error report on iOS regarding an undefined identifier from Google, proceed by doing this:

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

Once you’ve done those passages, remove: plugins directory, node_modules and package-lock.json.

Now you can add back your platform (this will create a new fresh plugins directory, run npm install and do the podfile passage reported above.

Leave a Reply

Your email address will not be published. Required fields are marked *