Connected accounts

The ability for visitors to log in and register via various connected account providers benefits site owners due to the ease at which new accounts can be created. This can help reduce the friction of creating an account or remembering login details, leading to increased engagement.

In order to make use of this functionality, it is required to register and fill in some basic developer details to register your application. This provides the necessary integration between the forum software and the connected account provider.

Facebook

Creating a Facebook application

Before you configure your XenForo installation, follow the steps below to create a custom application for your site. A Facebook account is required to create an application.

  1. Browse to https://developers.facebook.com/ and be sure that you're logged into your Facebook account. Note that you must be logged in as a person, not a page.
  2. Click the My Apps button at the top and then click on the Add a New App link.
  3. Provide a name and email and then click Create App ID.
  4. Next you should see a page called Add Product; if you do not, click the Plus Icon on the left next to the Products Heading. Under Facebook Login, click Setup.
  5. You will then need to choose the platform. Click Web and enter the URL to your site. Click *Next through all of the steps.
  6. In the sidebar on the left, click Settings under Facebook Login.
  7. In Valid OAuth redirect URIs, enter <XF board URL>/connected_account.php. For example, https://xenforo.com/community/connected_account.php. The beginning of this URL must match your Board URL setting in XenForo exactly. The Board URL Requires HTTPS. Once entered, click Save Changes at the bottom.
  8. In the sidebar on the left, click Settings followed by Basic. For the Privacy Policy URL and the Terms of Service URL enter the links to those pages on your site.
  9. In the sidebar on the left, click App Review. If the app is listed as in development, click the toggle next to it to make it live/public.
  10. Go back to the sidebar on the left and click Settings followed by Basic near the top. Make a note of the App ID and App Secret. These values will need to be entered into the XenForo control panel.

Configuring Facebook connected account

To finalize the Facebook connected account, you must enter the data obtained above into the relevant section of the XenForo control panel.

  1. Log in to the Admin Control Panel.
  2. Go to Setup > Connected accounts.
  3. Click on Facebook in the list. Enter the App ID and App secret obtained earlier into the respective fields and save.
  4. Test the connected account

Google

Creating the Google Project

  1. Browse to https://cloud.google.com/console/project and log in with your Google account. Note that the email address associated with this account may be displayed when users register using their Google account.
  2. Click the Create Project button and enter a name and ID. These will only be used internally.
  3. Once the project is created, click the hamburger menu icon located at the top left, then select APIs & Services, then Credentials in the sidebar, and finally OAuth Consent Screen and complete the details as necessary and save the settings.
  4. Click CREATE CREDENTIALS, select OAuth Client ID, then WEB APPLICATION and complete the details as follows:
    1. In the AUTHORIZED JAVASCRIPT ORIGINS fields, enter your domain URL without the trailing slash For example, https://xenforo.com. Note that if users access your site both with and without the "www" (http://www.xenforo.com and http://xenforo.com), you should enter both URLs. Similarly, if users can access your site both with and without HTTPS, you should enter a value with http and https. Each URL should be placed on its own line. Ensure all variations of the URL used to access your site are entered.
    2. In the AUTHORIZED REDIRECT URIS enter <XF board URL>/connected_account.php. For example, https://xenforo.com/community/connected_account.php. The beginning of this URL must match your Board URL setting in XenForo exactly.
    3. Double check all of the URLs are correct and then click the Create Client ID button. The Create Client ID overlay will be displayed so just click the Cancel button.
  5. On the Credentials page, make a note of the CLIENT ID and CLIENT SECRET.

To change the values displayed when a user attempts to register via Google, you can customize this in your Google project via APIs & auth > Consent screen.

Configuring Google connected account

To finalize the Google connected account, you must enter the data obtained above into the relevant section of the XenForo control panel.

  1. Log in to the Admin Control Panel.
  2. Go to Setup > Connected accounts.
  3. Click on Google in the list. Enter the Client ID and Client secret obtained earlier into the respective fields and save.
  4. Test the connected account

Twitter

Creating the Twitter Application

  1. Browse to https://developer.twitter.com/ and log in with your Twitter account.
  2. After logging in, hover over your username in the top right corner and from the menu select Apps.
  3. Click Create an app.
  4. Fill out the form as necessary:
    1. The name and description will be displayed to users when they attempt to register via Twitter.
    2. The website URL should be set to the Board URL value set in XenForo. It's very important that the correct domain is entered here. Registration will only work if the request comes from the domain entered here.
    3. Click Enable Sign in with Twitter
    4. The callback URL should be set to <XF board URL>/connected_account.php. For example, https://xenforo.com/community/connected_account.php. The beginning of this URL must match your Board URL setting in XenForo exactly.
    5. You need to explain how the app will be used. Words to the effect of "This app will be used to provide log in/sign up with Twitter functionality so that users can log in and register to the forum with their Twitter accounts."
  5. After creating the application, you will be redirected to a page displaying information about the application. Click the Keys and tokens tab.
  6. On the same page, make a note of your API key and API secret key below the Consumer API keys heading.

Configuring Twitter connected account

To finalize the Twitter connected account, you must enter the data obtained above into the relevant section of the XenForo control panel.

  1. Log in to the Admin Control Panel.
  2. Go to Setup > Connected accounts.
  3. Click on Twitter in the list. Enter the Consumer key and Consumer Secret obtained earlier into the respective fields and save.
  4. Test the connected account

GitHub

Creating the GitHub Application

  1. Browse to https://github.com/settings/developers/ and log in with your GitHub account.
  2. Under OAuth Apps click Register a new application
  3. Fill out the form as necessary:
    1. The Application Name will be displayed to users when they attempt to register via GitHub.
    2. The Homepage URL should be set to the Board URL value set in XenForo.
    3. The Description is optional.
    4. The Authorization callback URL should be set to <XF board URL>/connected_account.php. For example, https://xenforo.com/community/connected_account.php. The beginning of this URL must match your Board URL setting in XenForo exactly.
    5. Once you click Register Application note down the Client ID and Client Secret.

Configuring GitHub connected account

  1. Log in to the Admin Control Panel.
  2. Go to Setup > Connected accounts.
  3. Click on GitHub in the list. Enter the Client ID and Client Secret obtained earlier into the respective fields and save.
  4. Test the connected account

Yahoo

Creating the Yahoo Application

  1. Browse to https://developer.yahoo.com/apps/ and log in with your Yahoo Account.
  2. Click the Create an App Button
  3. Fill out the form as necessary:
    1. The Application Name will be displayed to users when they attempt to register via Yahoo.
    2. The Application Type is a Web Application
    3. The Description is optional.
    4. The Homepage URL should be set to the Board URL value set in XenForo.
    5. The Callback Domain should be set to http://yourdomain.com. For example, https://xenforo.com. The beginning of this URL must match your Board URL setting in XenForo exactly.
    6. In API permissions tick Contacts and Read Public
    7. Once you click Create App note down the Client ID and Client Secret.

Configuring Yahoo connected account

  1. Log in to the Admin Control Panel.
  2. Go to Setup > Connected accounts.
  3. Click on Yahoo in the list. Enter the Client ID and Client Secret obtained earlier into the respective fields and save.
  4. Test the connected account

Microsoft

Creating the Microsoft Application

  1. Browse to https://apps.dev.microsoft.com/ and log in with your Microsoft Account.
  2. Click the Add an App Button
  3. Fill out the form as necessary:
    1. The Application Name will be displayed to users when they attempt to register via Microsoft.
    2. Note down the Application ID.
    3. Click Generate New Password and note down the password it provides.
    4. Click Add Platform then Web.
    5. The Redirect URLs should be set to <XF board URL>/connected_account.php. For example, https://xenforo.com/community/connected_account.php. The beginning of this URL must match your Board URL setting in XenForo exactly. If you are able to access your site from both www. or a non-www. domain name, you will need to both these as possible Redirect URLs. HTTPS is required.
    6. Under Advanced Options tick Live SDK Support.
    7. Click Save

Configuring Microsoft connected account

  1. Log in to the Admin Control Panel.
  2. Go to Setup > Connected accounts.
  3. Click on Microsoft in the list. Enter the Application ID and Password obtained earlier into the respective fields and save.
  4. Test the connected account

LinkedIn

Creating the LinkedIn Application

  1. Browse to https://www.linkedin.com/secure/developer?newapp= and log in with your LinkedIn account.
  2. Click Create application
  3. Fill out the form as necessary:
    1. The Company Name will be displayed to users when they attempt to register via LinkedIn.
    2. The Application Name will be displayed to users when they attempt to register via LinkedIn.
    3. The Description will be displayed to users when they attempt to register via LinkedIn.
    4. The Application Use will be Social Aggregation.
    5. The Website URL should be set to the Board URL value set in XenForo.
    6. Fill in your Email and Telephone Number as required.
    7. Click Submit.
    8. Note down the Client ID and Client Secret.
    9. Under Default Permissions click r_basicprofile and r_emailaddress.
    10. Under OAuth2 Authorized Redirect URLs this should be set to <XF board URL>/connected_account.php. For example, https://xenforo.com/community/connected_account.php. The beginning of this URL must match your Board URL setting in XenForo exactly.
    11. Click Update.

Configuring LinkedIn connected account

  1. Log in to the Admin Control Panel.
  2. Go to Setup > Connected accounts.
  3. Click on LinkedIn in the list. Enter the Client ID and Client Secret obtained earlier into the respective fields and save.
  4. Test the connected account

Testing connected accounts

To confirm everything is configured and working correctly, you can run the test tool.

  1. Select Setup from the navigation panel, and click on Connected accounts.
  2. Click on Test provider next to the entry you'd like to test in the list of providers.
  3. Click on the Test button.

If the test is successful, the resulting screen will show the name, email address and profile picture (where applicable) of the account which is associated with the connected account provider.

If the test is unsuccessful, confirm that your Board URL is correct and that the correct details have been entered for the key and secret.

After a successful test, visitors will be able to log in and register using their respective accounts. The first time they attempt to do so, they will be required to allow the application access to their account.

When a user shares a page to various other sites, they will either display a nominated image or attempt to pick an image from the page. To nominate an image for all pages, you may define a Metadata logo URL in style properties.

To set this, in the control panel, go to Appearance > Style properties > Basic options and change the Metadata logo URL to point to a logo you've uploaded. This should generally be a square image and as large as possible.

Note

Due to caching, it can take several weeks for the image to update on the service provider's servers.