This documentation page was recently featured on the Commerce Kickstart Tip series. To see the blog post that featured this process, click here.

Overview of Setup

The setup is pretty simple. We are taking the OAuth Connector module, a few pre-defined services for Twitter, Facebook, or Google, and connecting them to a simple and free OAuth API. Most of these API services require that you register an "App" to gain access to the API. This is how they can limit your API calls and help you keep track of traffic being generated using these services. The process is very similar to setting up a Google Maps API call.

Setting up OAuth Connector

Step 1: Go to admin/structure/oauthconnector/list and create a new provider by using one of the presets the list, or by creating your own. You will need an App Key, a secret key, and a callback URL for each provider (see list below).

URLs to apply for App Keys (as of Mar. 2012):

• Facebook: https://graph.facebook.com/
• Twitter: https://api.twitter.com/
• Google: https://code.google.com/apis/console
• LinkedIn: https://www.linkedin.com/secure/developer
• Flickr: http://www.flickr.com/services

Signing up for App Keys is a very different process for each service. The trick usually is that you have to declare that you want to create an "app" or a service or something that needs an API access.

Step 2: Make sure you provide the correct "Callback URL"

The other trick is to make sure that you are using the right callback URL. To get the right callback URL, I'd recommend you go ahead and fill out the "App Secret" and "App ID" with a bogus number. The page on admin/structure/oauthconnector/list will then give you the callback URL that you can use to give to the service to get the API credentials.

Step 3: Make sure permissions are setup correctly.

To allow anonymous users the ability to login using a facebook account, you must give anonymous users the permission to "Connect with [Provider]." So, for example, the permission that you'll want to change for Facebook is "Connect with Facebook."

Facebook Graph API

In order to access Facebook's Graph API for access to the OAuth Consumer Key and OAuth Consumer Secret we will go to the following URL:

Step 1: https://developers.facebook.com/apps

Here, you should register and create an app that represents your website. For local sites, "localhost" worked for the App Domain, for me.

Step 2: Select "Website with Facebook Login" and provide your website's URL, plus "/oauth/authorized2/1" (see the step #2 above)

Step 3: Grab the App ID/API Key

Step 4: Grab the App Secret