Facebook Integration

Schedule a call

Schedule a call

Facebook Integration with OctopusPro

By integrating Facebook with OctopusPro, you can allow customers to sign up for or log into your customer portal using their existing Facebook accounts. This provides a seamless user experience, reduces registration friction, and leverages Facebook’s secure authentication. Additionally, if your app is also integrated with Firebase, you can further automate authentication processes and manage user data with greater flexibility. Follow the steps below to set up your Facebook Developer App, link it to Firebase, and then connect Firebase to your OctopusPro account.

Why Integrate Facebook?

  1. Streamlined User Experience: Customers can log in with a single click, avoiding lengthy registration forms and manual account confirmations.

  2. Improved Security: Facebook handles the core authentication, meaning passwords and sensitive login details remain encrypted and managed by a platform that customers already trust.

  3. Fewer Support Requests: Users who log in via Facebook may forget fewer passwords and require less account-assistance.

  4. Social Proof & Branding: Encouraging users to link their Facebook profiles can enhance your social reach and engagement.

Prerequisites

  • OctopusPro Admin Access: You must be logged in as an admin user in OctopusPro to configure the integration.

  • Firebase Account: Required to bridge Facebook’s authentication with OctopusPro.

  • Facebook Developer Account: Needed to create a Facebook Developer App that securely provides login credentials (App ID, App Secret).

Step 1: Set Up a Firebase Account

  1. Go to Firebase (https://firebase.google.com/) and select Get Started.

  2. Create a New Project: Provide a project name and disable Google Analytics if you prefer, then click Create project.

  3. Register a Web App: Click the Web App icon to register your app. Enter an app name and click Register app.

  4. Copy Firebase Settings: After registering, Firebase displays your configuration keys. Save these keys safely; you’ll need them in later steps.

  5. Create a Realtime Database (if you need it for advanced functionalities). Under Build > Realtime Database, click Create Database, choose a location, and enable it in Locked Mode for security.




  6. Add Authorized Domains: Under Authentication, scroll to Authorized domains and add booking.octopuspro.com (or your relevant domain).

If you already have a Firebase account, you may retrieve your existing configuration by clicking the gear icon, Project Settings, then scrolling to the bottom of the page.

Step 2: Enable Facebook Authentication in Firebase

  1. In your Firebase console, select Build > Authentication > Get Started.

  2. Enable Facebook as a sign-in method.

  3. When prompted, you’ll need to supply your Facebook App ID and App Secret, which you’ll obtain by creating a Facebook Developer App (explained below).

Step 3: Create a Facebook Developer App

  1. Sign up or log in to your Facebook Developer Account.

  2. In the My Apps section, click Create App.

  3. Choose an App Type (e.g., “Consumer” or “Business”) that best fits your use case and click Next.

  4. Enter your App Details (like App Name, Contact Email), then click Create App.

  5. Once your app is created, select Facebook Login and click Set Up.

  6. Web is often chosen as the platform. Enter your site URL, then click Save and proceed through the setup prompts.

  7. Under Settings > Basic, copy the App ID and App Secret. You’ll add these to Firebase to link your Facebook Developer App with your Firebase project.

Step 4: Link the Facebook Developer App with Firebase

  1. Return to Firebase > Authentication > Sign-in Method > Facebook.

  2. Enter the App ID and App Secret you copied from the Facebook Developer App.

  3. Copy the OAuth Redirect URI generated by Firebase.

  4. Go back to your Facebook Developer account and paste that URI into Valid OAuth Redirect URIs. Also add booking.octopuspro.com (or your relevant domain) in the Allowed Domains or Settings.

  5. Save the changes. If configured properly, Firebase shows that Facebook is now enabled under Authentication.

Step 5: Connect OctopusPro with Firebase

  1. Log in to your OctopusPro Admin account.

  2. Navigate to Settings > Company Settings > Third-Party API Integrations.

  3. Provide the Firebase configuration details (keys and URLs) you copied earlier when creating the Firebase project.

  4. Click Save to confirm.

  5. Once saved, your OctopusPro account is connected with Firebase, which in turn is linked to your Facebook Developer App.

Verifying the Integration

  • Test a Customer Login: Visit your Customer Portal and ensure the “Login with Facebook” option is available. A user can log in using their Facebook credentials and, if successful, is automatically authenticated through Firebase.

  • Check the Firebase Auth Console: In your Firebase project, go to Authentication and look for the newly authenticated user record.

  • Review Facebook Analytics: In Facebook for Developers > Analytics, verify user login events, if applicable.

Best Practices & Troubleshooting

  • Manage Credentials Securely: Always store your App ID, App Secret, and Firebase keys in a safe place.

  • Stay Current on Policy Changes: Facebook might update privacy or permission policies that require you to adjust your app settings.

  • Confirm Domain Settings: If login fails, re-check that your Authorized Domains match exactly in both Firebase and Facebook Developer console.

  • Contact Support: Should you encounter persistent issues linking or verifying your integration, reach out to OctopusPro Support.

Summary

By integrating Facebook with OctopusPro (via Firebase), you offer customers a convenient, secure single-sign-on experience. This streamlines user registration, ensures consistent account management, and allows your platform to leverage Facebook’s robust authentication. When properly configured, customers can simply click “Log in with Facebook,” authenticate, and immediately access your customer portal—reducing friction and enhancing overall satisfaction.

To stay updated, please subscribe to our YouTube channel.

Scroll to top