IonicSquare – Configurations

App Configurations

app/config.ts – All the base configurations (e.g Firebase, Facebook, Google, Twitter) for the app needs to be updated in this file.

Firebase

Create App on Firebase Console 

• Grab the URL (e.g https://ionicsquare.firebaseio.com) and update the firebase configuration in app/config.ts

 

Update Authorized Domains

Enable Email & Password Authentication

• Enable Email and Password Authentication

 

Enable Facebook Authentication 

• Enable Facebook Authentication
• Add Facebook App  Id and App Secret

 

 

Enable Twitter Authentication 

• Enable Twitter Authentication
• Add Twitter API Key and API Secret

 

Enable Google Authentication 

• Update Whitelist Client Ids for Android and IOS Platforms
• Update
• Enable Google Authentication
• Add Google Client Id and Client Secret

 

 

Facebook

Create an App On Facebook

Add Platform on Facebook

• Add Site URL
  • Update as http://localhost:9000/
• Add Platform
  • Create IOS and Android platforms
• IOS Platform
  • Update Bundle Id with APP Name (e.g com.ionictest.app)
  • Enable Single Sign On
• Android Platform
  • Update Google Play Package Name (e.g com.ionictest.app)
  • Update Class Name (e.g com.ionictest.app.MainActivity)
  • Update Key HashesTo generate key hash, execute the following in your development environment
  • keytool -genkey -v -keystore ionictest-debug.keystore -alias ionictest-debug -keyalg RSA -keysize 2048 -validity 10000keytool -exportcert -alias ionictest-debug -keystore ionictest-debug.keystore | openssl sha1 -binary | openssl base64
  • Enable Single Sign On and Deep Linking

Update Facebook Settings

• Go to Facebook Login
• Enable Oauth Login
• Update Valid OAuth redirect URIs
  • For Firebase Auth, add https://ionicsquare.firebaseapp.com/_/auth/handler and http://localhost/callback
  • For Localhost Auth, add http://localhost:9000/

 

Update Facebook Status and Review

• Go to Status & Review
• Make sure default login permissions (email, public_profile, user_friends) are selected
• Start a Submission

Twitter

Create App on Twitter

• Update App Name and Description
• Update Website URL (e.g http://www.example.com)
• Update Callback URL
  • For Firebase Auth, add https://ionicsquare.firebaseapp.com/__/auth/handler and http://localhost/callback

Google

Create App on Google

• Go to Credentials -> Add to Credentials -> Oauth 2.0 client ID.
• Select Web Application
  • Update Name
  • Authorized JavaScript origins
    • For Firebase Auth, add http://ionicsquare.firebaseapp.com
    • For Localhost Auth, add http://localhost:9000
  • Authorized redirect URIs
    • For Firebase Auth, add  https://ionicsquare.firebaseapp.com/__/auth/handler and http://localhost/callback
      • https://ionicsquare.firebaseapp.com/__/auth/handler
        • https://ionicsquare.firebaseapp.com/__/auth/handler

 

Google Plus Native Login

Install the cordova plugin for google plus from https://github.com/EddyVerbruggen/cordova-plugin-googleplus
ionic plugin add cordova-plugin-googleplus --save --variable REVERSED_CLIENT_ID=myreversedclientid

Follow the configuration instructions in the plugin documentation for IOS And Android to generate the ClientIDs and the SHA1 fingerprint

Grab the clientIds for Web, Android and IOS and update SocialConfig->google in app/config.ts

Facebook Native Login

Install the cordova plugin for facebook from https://github.com/jeduan/cordova-plugin-facebook4

ionic plugin add cordova-plugin-facebook4 --save --variable APP_ID="<app_id>" --variable APP_NAME="<app-name>"

OneSignal

Create App on OneSignal

• Go to App Settings -> Keys & IDs. Grab OneSignal App ID and update OneSignal Config in app/config.ts
• For Android Push Notifications, follow the details mentioned here . Grab the Sender Id/Project Number and update OneSignal FCMConfig in app/config.ts
• For IOS Push Notifications, follow the details mentioned here
• Install cordova plugin for OneSignal by executing the command  ionic plugin add onesignal-cordova-plugin