How to Create a Facebook Application for Vanilla Forums Single Sign-On (SSO)

This article will walk you through the process of connecting your Vanilla Community to Facebook, allowing your users to login into your forum using their Facebook accounts. The process involves creating an app using Facebook Developer tools and will require you to have a Facebook account.

The Process

1. Navigate to the following URL. If you are not already signed in, you will need to sign into Facebook here. Once you’re logged in successfully, click the “Create App” button in the top-right corner.
 

1-Create-App

2. You will be prompted to name your app and to provide a contact email (this can be changed later). The app name will be for your reference only, though we suggest naming it something so you know that this app connects Facebook to your community. Please note that Facebook does not allow its name to be used in any app names (which includes the abbreviation: “FB”). Once you’ve plugged in that information, click ‘Create App ID.’

2-Create-New-App-ID

This will take you to your App’s Dashboard.

3-Facebook-Developer-Dashboard

3. Select ‘Facebook Login’ from the product list and hit the ‘Set Up’ button once it appears.

4. In this next screen, we select the platform for our app. For our purposes, you will need to select ‘Web.’

4-Select-Platform

5. The next screen will ask for some information about your website. For our purposes, we only need to put in the site URL. Note that Facebook will only allow this sign-in connection to be made for websites with an SSL certificate (being served over https). If you have questions about that process with your Vanilla community, you can check out the documentation here.

5-Information-About-Your-Website

Once you’ve plugged in your URL, save it and then continue through the different screens. You won’t need to input any other data in this section (No need to worry about the code it provides, that is not necessary for the sign-in process we're developing). After you’ve made it to ‘Next Steps,’ click on ‘Settings’ in the menu on the left hand side, under the heading ‘Facebook Login.’

6-Facebook-Login-Settings

6. In this next screen, you’ll adjust the settings for the login.

For simplicity, you can just copy the settings in the screenshot below, substituting the redirect URI with a direct link to your forum (but still ending it with /entry/connect/facebook).

7-Oauth-Settings

If you have a custom domain you should use "https://community.yoursite.com/entry/connect/facebook"

7. Now navigate to ‘Basic’ under Settings in the left-hand menu.

8-Basic-Settings

8. This is another instance where it may be easiest to just copy the input from the screenshot example below. Obviously, you’ll want to substitute your URL in the App Domains. While it will cut them out, make sure you write in the full URL into the App Domain space. Remember, Facebook requires an SSL cert on any site that wants to use this type of connection, so make sure you have one installed and you’re writing your site in properly (https).

App Domains to add:

  • https://YourUrl.vanillacommunity.com
  • https://vanillacommunity.com

You should note here that Facebook does require a privacy policy before your app is allowed to 'go live.' In the space provided, you should insert the url of your website's privacy policy or have one generated for this purpose.

9-Sign-In-App-Information

This screen has both your App ID and your App Secret, which is important to have ready for this next step. In the bottom right hand corner, hit the ‘Save Changes’ button. After it saves, keep this screen up and open up another tab with your Vanilla Community Dashboard loaded.

Please note, that the App ID and App Secret should be kept as secure as possible. If those numbers fall into the wrong hands, it can present a major security risk to your site. If you’re worried that someone may have gained access and copied either of those codes down, we recommend remaking this App from scratch, so it will be associated with a new App ID and Secret.

9. In the Vanilla Dashboard, navigate to the settings for Facebook Social Connect (dashboard/social/facebook) . You’ll be given this prompt:

10-FB-SignIn-Settings-In-Vanilla-Dashboard

Simply copy and paste the App ID and App Secret from the app we just made into the spaces above. Make sure ‘Enable Social Sign In’ is checked and hit save.

10. Now, back in the Facebook Developer dashboard, you want to navigate to to ‘App Review’ in the left-hand menu.

11-Toggle-App-To-Live

You will want to shift the toggle to make your application public. If your application is not made public here, then it will still work for developers working on it but will not work for other users.

Testing

To test your connection, log out and clear your cache (opening an Incognito Window or your browser equivalent works, as well). On the main page of your community, under the ‘Sign In’ button, you should see a Facebook icon (this may be different if you’re using a custom theme). Simply click there, and it should attempt to log you in through Facebook.

Deleting Your App

If for whatever reason you need to delete your sign-in app on the Facebook Developer site, here are the steps you should follow:

1. If the app is currently Live, switch it back into Development mode.

2. Navigate to ‘Advanced’ under Settings in the left-hand menu.

12-Advanced-Settings

3. Scroll to the bottom of the menu, and hit the delete button at the very bottom.

13-Delete-App

For security reasons, you may be prompted to type in your Facebook password to confirm your decision to delete.

Please note, that once the app is deleted, users will no longer be able to sign-in with Facebook on your forum. You will need to remake the application and apply the new App ID and App Secret in the Vanilla Dashboard to allow that sign-in process again.