Ionic 3 Creating App Id and App secret for Facebook

Ionic 3 Creating App Id and App secret for Facebook

Steps for Creating APP-ID and APP-SECRET :

    

  1. Go To Facebook Developers Page
    2. 

  2. Login to developers Portal Using Your Facebook Credentials
    3. 

  3. Click On Add a New App Button 
    4. 

  4. Enter Your App Name and click continue
    5. 

  5. You will see facebook developers Dashboard , where you can see APP ID and APP SECRET
    6. 

  6. Click on setting in the side menu , click on Basic and click on the "ADD PLATFORM" button at bottom of page   
    7. 

  7. Now You can see Google Play Package Name Field Where you need to enter your application Package Name sufix with "com."
    8. 

  8. Package name will be "com.io.ionic.starter" (io.ionic.starter can be found in config.xml file)
    9. 

  9. You can also see Class Name Field Where you need to enter your application Package Name sufix with "com." and prefix with "MainActivity"
    10. 

  10. Class name will be "com.io.ionic.starter.MainActivity" (io.ionic.starter can be found in config.xml file)
    11. 

  11. Click On Save Changes
    12. 

  12. Click on settings in side-menu and select Advanced option
    13. 

  13. Now on the Advanced Page you can see a checkbox "Native or Desktop app ? " make it to YES.
    14. 

  14. Click on Save Changes
    15. 

  15. Click on App Review in side-menu
    16. 

  16. On the App Review Page you will find a checkbox "Make APP-NAME public". Mark it YES.
    17. 

  17. Click on Facebook Login in side menu and select Settings option
    18. 

  18. Make the following checkboxes to YES i.e.. "Client OAuth login" , "Web OAuth Login" , "Login From Devices".
    19. 

  19. Need To Enter Valid OAuth Redirect URL.
    20. 

  20. Create OAUTH redirect URL by following the steps mentioned in 
Create OAauth Redirect URL For Facebook 


    21. 

  21. Click on facebook-login tab on side-menu and select settings option.
    22. 

  22. Settings page is opened and the obtained OAuth URL is pasted in 
Valid OAUTH field.
    23. 

  23. Click On Save Changes.
    24. 

  24. Now we need to link our Facebook developers application to Firebase.(if Required. Not used for InAppBrowser facebook login)

    25. 

  25. Follow steps in Link Firebase and facebook Application
    26.

Comments

Post a Comment

Popular posts from this blog

Ionic 3 Launch Navigator

Ionic 3 Launch Navigator Used Plugins ionic cordova plugin add uk.co.workingedge.phonegap.plugin.launchnavigator npm install --save @ionic-native/launch-navigator Create Your Project ionic start projectName blank Change Directory To Your Ionic Project: cd screenshotProject Create a Page  ionic g page locationLauncher Add following lines in app.module.js import { LocationLauncherPage } from '../pages/location-launcher/location-launcher'; declarations:[ ..... LocationLauncherPage ], entryComponents : [ .... LocationLauncherPage ] Add The following to location-launcher.html <ion-header> <ion-navbar color="primary"> <ion-title>Launch Navigator</ion-title> </ion-navbar> </ion-header> <ion-content padding> <ion-list> <ion-item> <ion-label floating>Source</ion-label> <ion-input type="text" [value]="sourcePoint" [(ngModel)]="sour...
Read more

Ionic 3 Share Through Social Media

 Ionic 3 Share Through Social Media Installation: ionic cordova plugin add cordova-plugin-x-socialsharing npm install --save @ionic-native/social-sharing  Create Your Project: ionic start socialSharingApp Change Directory To Your Ionic Project: cd socialSharingApp Add Page To Your Application :  ionic g page socialShare Add the following in app.module.ts  import { SocialSharePage } from '../pages/social-share/social-share'; declarations:[ ..... SocialSharePage ], imports: [ ..... ], entryComponents : [ .... SocialSharePage ] Add the following code in social-share.html <ion-header> <ion-navbar color="primary"> <ion-title>Social Share</ion-title> </ion-navbar> </ion-header> <ion-content padding> <h6 style="text-align:center">Share About this application in social-media</h6> <br /> <button ion-button (click)="shareWhatsapp()" full>...
Read more

Ionic 3 Screenshot using Button and Shake Gesture

Ionic 3 Screenshot using Button and Shake Gesture Used Plugins: Screenshot Plugin: ionic cordova plugin add com.darktalker.cordova.screenshot npm install --save @ionic-native/screenshot Shake Plugin: ionic cordova plugin add cordova-plugin-shake npm install --save @ionic-native/shake Vibration Plugin : ionic cordova plugin add cordova-plugin-vibration npm install --save @ionic-native/vibration Create Your Project: ionic start screenshotProject Change Directory To Your Ionic Project: cd screenshotProject Add Page To Your Application :  ionic g page screenshot Add the following in app,module.ts  import { ScreenshotPage } from '../pages/screenshot/screenshot'; declarations:[ ..... ScreenshotPage ], entryComponents : [ .... ScreenshotPage ] Add the following code in screenshot.html <ion-header> <ion-navbar color="primary"> <ion-title>Screenshot Ionic</ion-title> </ion-navbar> </ion-header> ...
Read more