User Tools

Site Tools


recipe:collect-user-data-with-facebook

Collect subscriber-data with Facebook OAuth logins

Using HSMX built-in registration forms it's easy to collect subscriber data from Facebook. To achieve this setup you need to sign up as Facebook Developer. Once signed up you will be able to retrieve your App ID and App Secret. We proceed by creating a registration form and end by setting up a custom portal.

Sign up with Facebook

Head to Facebook Developer and sign up. Once registered you'll be able to access your App ID and App Secret.

Set the App Domain to your Login domain; to retrieve your current Login Domain; browse to Network → DNSDNS entries. Add a Site URL to your App set with the callback URL. Unless you intend to program your own, use the default provided with HSMX (https://<login-domain>/oauth/callback.php).

 To discover your Login Domain; browse to Network -> DNS -> DNS entries

Configure a registration form

Free-access billing plan

First we need to make sure there's a billing plan of type Free access to use, head to Billing → Billing Plan to make sure there is one, otherwise create one. In our example we only configured bandwidth limits, set the expiration time-out to four hours and unlimited recurrence.

Create the registration form

Create a new registration form by browsing to Layout → Registration forms (use the +-icon in the sub-menu). Set the Billing Plan to your Free-access billing plan (if you only have one, it's selected by default) and pick No username in the Username & password creation / Authentication block. Now comes the most difficult part: enable use oauth to complete registration and use the drop-down in the right corner to select the Facebook preset. You need to add the client id (App ID on the Facebook website) and Client secret (equals App Secret).

By default unauthenticated subscribers cannot access the internet, to allow these users to browse to Facebook, sign-in and authenticate we have to add an exception. The OAuth block has a second tab called Walled Garden; here you can whitelist domains, IP addresses, ports and protocols for a specific amount of specific amount of time. Facebook uses many DNS domains to perform authentication thus in our experience we found it to work best when you allow all HTTPs traffic, add 0.0.0.0/0:443 and set Time to 180 seconds.

The third OAuth tab can be used to retrieve data from the Facebook user profile to import into HSMX. In this example we'll retrieve the Facebook user' e-mail address. Enter email as Return Variable and Select E-mail using the drop-down as Database column.

Enable Autologin in the On success and give the Guest form a name. Don't forget to tick Visible for portal use and Visible for admin interface and hit Save.

Setup the captive portal

It's possible to use the built-in HSMX portal and customize it with the Portal Editor (in short:add content, existing content, registration form), however for this guide we'll use a custom portal. grab the FB custom portal and browse to Layout → Portal Page. Add a new portal; give it a name and select Custom Portal as type and submit. Now we upload the captive portal to the HSMX in the Upload custom portal page-block. You can deactivate any selected option and make sure to enable your guest form.

We end this tutorial by configuring the portal rule, this will decide who and from where will be redirected to our Facebook custom portal. Edit the default rule and select your newly added portal under Select a portal page, you can leave all other options unchecked.

Testing

When a unauthenticated subscriber tries to get online, he'll face our custom portal first. After he clicks login he has three minutes to authenticate himself with Facebook. Facebook will forward the user to the callback URL to let HSMX know whether the subscriber successfully signed in and optionally register a bit of personal data.

Now when you browse to Subscribers → Overview you can select a subscriber to view more details by clicking the info-symbol, click on Next two times (top right corner) to view his personal details. The captured data from Facebook should be displayed.

See also:

recipe/collect-user-data-with-facebook.txt · Last modified: 2015/05/26 07:13 by ewald