How to Configure Login with Facebook

Introduction

Offering Facebook Login to your users provides a significant advantage by simplifying the registration and login processes. In today's fast-paced digital environment, users appreciate the convenience of accessing websites and applications with their existing Facebook credentials.

This feature minimizes the friction associated with creating new accounts and memorizing numerous passwords, leading to an improved user experience. Furthermore, integrating Facebook Login can increase user engagement and foster trust, as users are authenticating through a familiar and reliable platform.

Note: This procedure may change at any time without prior notice from Facebook. If you notice that this article is outdated, please email us at support@edirectory.com and we can update it.

Part 1: Setting Up the Facebook App

  1. Access Facebook Developers:

  1. Navigate to My Apps:
    • Once logged in, click on "My Apps" in the top right corner.

  1. Create a New App:
    • Click the "Create App" button.
    • On the "Create an App" page:
      • Select "Consumer" as the app type.
      • Enter an "App Name" (e.g., your website's name).
      • The "App contact email" should auto-fill; you can change it if needed.
    • Click "Create App."

  1. Access App Settings:
    • You'll be directed to your App Dashboard.
    • In the left-hand menu, go to "Settings" > "Basic."

  1. Record App Credentials:
    • Note down the "App ID" and "App Secret." You'll need these later. Keep your App Secret confidential.

  1. Configure Basic App Information:
    • Complete the following fields in the "Basic Settings":
      • Namespace: (Optional)
      • App Domains: Enter your website's domain (e.g., yourdomain.com ).
      • Privacy Policy URL: Provide a link to your website's privacy policy page.
      • Terms of Service URL: Provide a link to your website's terms of service page.
      • User Data Deletion: Provide a link to your contact us page.
      • App Icon: (Optional) You can upload an icon for your app later.
    • Do not save yet.

  1. Add the Website Platform:
    • Click "Add Platform."
    • Select "Website."
    • Enter your website's URL in the "Site URL" field, including the protocol (https://). This URL must match the domain you entered in step 6.
    • Click "Save Changes."

  1. Add the Facebook Login Product:
    • In the left-hand menu, click "Products" and then "Add Product."
    • Find "Facebook Login" and click "Set Up."
    • Select "Web" as the platform.
    • Confirm your site URL and click "Save" and then "Continue."
    • Click on "Settings".

  1. Configure Valid OAuth Redirect URIs:
    • In the "Valid OAuth Redirect URIs" field, enter the URLs where Facebook should redirect users after successful login. Use HTTPS:
      • https://www.yourdomain.com/sponsors/facebookauth.php
      • https://yourdomain.com/sponsors/facebookauth.php
      • Important: Replace "yourdomain.com" with your actual domain and ensure the path /sponsors/facebookauth.php is correct for your setup.
    • In the "Allowed Domains for the JavaScript SDK" field, enter your website's homepage URL (e.g., https://www.yourdomain.com ).
    • Enable the "Login with the JavaScript SDK" option.
    • Click "Save Changes."

  1. Request Advanced Access:
    • If there's a warning message at the top of the page, click "Get Advanced Access."
    • You'll need to request advanced access for the "public_profile" and "email" permissions.
      • You might be prompted to enter your Facebook password to confirm your identity.
      • Important: Facebook might require business verification at this stage. This process can take time (up to 14 days) and may involve providing business documentation. Follow Facebook's instructions carefully. Refer to Facebook's documentation on "Verify your business in Business settings" for details.

  1. Set App Mode to Live:
    • Once you've completed the necessary configurations and business verification (if required), switch the "App Mode" toggle to "Live."

Part 2: Integrating Facebook Login with Your Website

  1. Configure Your Website's Settings:
    • In your eDirectory's administration panel, go to the "Settings" or "Sign-in Options" section.
    • Enter the "App ID" and "App Secret" that you recorded in step 5.
    • Click "Save Changes."

  1. Test the Integration:
    • Your website interface may provide a link to test the Facebook login. Click it.
    • You should be redirected to Facebook to authorize the app. Log in to Facebook if necessary and click "Continue as..."
    • After authorization, you'll be redirected back to your website. You might need to confirm your Facebook User ID. Save the changes.

Part 3: Configuring Facebook Login for Your Android App (If Applicable)

  1. Access the App Builder:
    • In your website's admin area, navigate to the "Mobile App" or "App Builder" section.

  1. Proceed to Build Settings:
    • Follow the steps to configure your app until you reach the "Build" options.

  1. Initiate App Build:
    • Click "Build & Submit."
    • Ensure your application name and icon are set.

  1. Access Android Build Settings:
    • You'll be redirected to the app builder website. Select the "Android" option.

  1. Retrieve Android App Details:
    • Scroll down to the "Facebook Login configuration" section.
    • Copy the values of "Google Play Package Name" and "Key Hashes."

  1. Configure Facebook App for Android:
    • Go back to your Facebook Developers Dashboard.
    • Navigate to "Settings" > "Basic."
    • Click "Add Platform" and select "Android."

  1. Enter Android App Information:
    • Select "Google Play."
    • Paste the "Google Play Package Name" into the "Package Names" and "Class Name" fields.
    • Paste the "Key Hashes" into the "Key Hashes" field.
    • Click "Save Changes."

  1. Rebuild and Resubmit Your App:
    • After configuring Facebook Login for your Android app, you must rebuild your app and resubmit it to the Google Play Store for the changes to take effect.

Important Reminders:

  • Facebook Data Check-Up: Facebook requires periodic data check-ups for your Facebook Login app (typically annually). You'll receive a notification in your Facebook Developer account. Complete this check-up to prevent your app from being disabled.

We recommend to always check your Facebook developers account for alerts that Facebook may send, so you can keep your account up-to-date, and also keep your Facebook login configuration functioning correctly.

Conclusion

By following the steps outlined in this guide, you've successfully configured Facebook Login for your website and/or Android application. This integration provides a more user-friendly login experience, potentially increasing user engagement. Remember to maintain your Facebook Developer account, addressing any alerts or required data check-ups, to ensure the continued functionality of your Facebook Login integration. Providing a simple and secure login experience will enhance the overall user experience on your platforms.

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.