Facebook Registration Plugin in Rails

---

Last December Facebook introduced a new and cool plugin for making your registraion process as much as simpler called Facebook Registration Plugin.

It is an excellent alternative to using Facebook Login (formerly Facebook Connect) when:

• you want to provide an option for users without Facebook accounts
• your site needs additional information that Facebook doesn’t provide
• a traditional HTML form suits your site more

Introduction:

The Registration plugin allows users to easily sign up for your website with their Facebook account. The plugin is a simple iframe that you can drop into your page. When logged into Facebook, users see a form that is pre-filled with their Facebook information where appropriate.

Example:

How to do this:

As first step you need to register your application in Facebook Applications page. Go to this page, and enter your application details. After registering your application you will get Application ID, Api Key, APP Secret. You can even refer one of my previous article “Facebook Connect in Rails using Facebooker Gem” for registering your application with Facebook.

Once you are ready with App ID etc, you can start to integrate this registration form in your application. There are two  ways to integrate this plugin.

• Using Iframe
• Using XFBML

Using Iframe:

<iframesrc="http://www.facebook.com/plugins/registration.php?
             client_id=<%=YOUR_APP_ID %>&
             redirect_uri=<%= YOUR_APP_REDIRECT_PATH%>&
             fields=name,birthday,gender,location,email"
        scrolling="auto"
        frameborder="no"
        style="border:none"
        allowTransparency="true"
        width="100%"
        height="330">
</iframe>

Custom Fields:

You may also request data from users that isn’t present on Facebook. To do this, you can use a JSON string in the fields attribute instead of the CSV. For example, favorite movie, best place to live etc:

You need to set those fields like below:

<iframesrc="http://www.facebook.com/plugins/registration.php?
             client_id=<%=YOUR_APP_ID %>&
             redirect_uri=<%= YOUR_APP_REDIRECT_PATH%>&
             fields= [
 {'name':'name'},
 {'name':'email'},
 {'name':'location'},
 {'name':'gender'},
 {'name':'birthday'},
 {'name':'password', 'view':'not_prefilled'},
 {'name':'like', 'description':'Do you like this plugin?', 'type':'checkbox', 'default':'checked'},
 {'name':'phone', 'description':'Phone Number', 'type':'text'},
 {'name':'anniversary','description':'Anniversary', 'type':'date'},
 {'name':'captain', 'description':'Best Captain', 'type':'select', 'options':{'P':'Jean-Luc Picard','K':'James T. Kirk'}},
 {'name':'force', 'description':'Which side?', 'type':'select', 'options':{'jedi':'Jedi','sith':'Sith'}, 'default':'sith'},
 {'name':'live', 'description':'Best Place to Live', 'type':'typeahead', 'categories':['city','country','state_province']},
 {'name':'captcha'}
]
"
        scrolling="auto"
        frameborder="no"
        style="border:none"
        allowTransparency="true"
        width="100%"
        height="330">
</iframe>

Which will return some output like this:

fields is a JSON Array of Objects. Any built in fields only have a name field.

XFBML:

There is also an XFBML tag for use with the Javascript SDK. It will resize the iframe fluidly as its size changes.

<script src="http://connect.facebook.net/en_US/all.js#appId=<%= YOUR_APP_ID %>&xfbml=1"></script>

<divid="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js#appId=<%= YOUR_APP_ID %>&xfbml=1"></script>

<fb:registration
  fields="name,birthday,gender,location,email"
  redirect-uri="<%= YOUR_APP_REDIRECT_PATH%>"
  width="530">
</fb:registration 

Hence you are now ready with the registration form in your site, and let the user fill up the required inputs other than the pre-filled inputs from facebook.

Once the use hit registration button, they will be asked to login or authorize the registration request. After that user will be redirected to our application. And you will get the user entered input and few more other details from facebook. And that request will be redirected to the address which one you specified as redirect-uri in your form specification.

Reading the data:

The data is passed to your application as a signed request. The signed_request parameter is a simple way to make sure that the data you’re receiving is the actual data sent by Facebook. It is signed using your application secret which is only known by you and Facebook. If someone were to make a change to the data, the signature would no longer validate as they wouldn’t know your application secret to also update the signature.

Read more about signed requests on the canvas authentication documentation.

Your signed_request value will be some thing like

"2PM8e_olALZwKV4AkRCZmO2WAUTvia5bW45t-AygPOk.eyJhbGdvcml0aG0iOiJITUFDLVNIQTI1NiIsImV4cGlyZXMiOjEyOTU5NjQwMDAsImlzc3VlZF9 hdCI6MTI5NTk1Njk2NSwib2F1dGhfdG9rZW4iOiIxMTA4NDE3ODU2NDgzNDR8Mi45dnpqS3NIUGJqT3pfZFN0Z29rUmhnX18uMzYwMC4xMjk1OTY0MDAwLTU 1MDQ1NDc3OXxJWVVFVG9wWEZnNXZFdl9FRWdWSWJoUlllRHciLCJyZWdpc3RyYXRpb24iOnsibmFtZSI6IlZlZXJhIFN1bmRhcmF2ZWwiLCJsb2NhdGlvbiI 6eyJuYW1lIjoiQ2hlbm5haSwgVGFtaWwgTmFkdSIsImlkIjoxMDIxODYxNTk4MjI1ODd9LCJlbWFpbCI6InZlZXJhYTIwMDNcdTAwNDBnbWFpbC5jb20iLCJ 1c2VybmFtZSI6ImFiY2NjYyIsImxpbmtfZmIiOnRydWV9LCJyZWdpc3RyYXRpb25fbWV0YWRhdGEiOnsiZmllbGRzIjoiW3snbmFtZSc6J25hbWUnfSwgeyd uYW1lJzonbG9jYXRpb24nfSwgeyduYW1lJzonZW1haWwnfSwgeyduYW1lJzondXNlcm5hbWUnLCdkZXNjcmlwdGlvbic6JyBUcmFpbG1lbWUgVXNlcm5hbWU nLCd0eXBlJzondGV4dCd9LCB7J25hbWUnOidsaW5rX2ZiJywgJ2Rlc2NyaXB0aW9uJzonTGluayBteSBGYWNlYm9vayBwYWdlIHRvIG15IFRyYWlsbWVtZSB Qcm9maWxlJywgJ3R5cGUnOidjaGVja2JveCcsICdkZWZhdWx0JzonY2hlY2tlZCd9XSJ9LCJ1c2VyIjp7ImxvY2FsZSI6ImVuX1VTIiwiY291bnRyeSI6InV zIn0sInVzZXJfaWQiOiI1NTA0NTQ3NzkifQ"

The result of decoding the above signed_request will be a JSON Object with the following format:

{"expires"=>1294045200,
"registration_metadata"=>{"fields"=>"name,birthday,gender,location,email"},
"algorithm"=>"HMAC-SHA256",
"user_id"=>"111111111",
"oauth_token"=>"110841785648344|dsfas2.QqlY2424QLFbasdfdsbD3PRjDio_qAQg__.3600.120454779|4uvNE0xzOOtePg",
"issued_at"=>1294039238,
"registration"=>{"name"=>"Veera Sundaravel",  "location"=>{"name"=>"Chennai, Tamil Nadu", "id"=>102186159822587},  "gender"=>"male", "birthday"=>"MM/DD/YYYY",
                 "email"=>"veeraa2003@gmail.com" },
"user"=>{"country"=>"us", "locale"=>"en_US"}}

This format is designed to very closely resemble the output of the Graph API. The signed request includes a registration_metadata field. You should verify this field exactly matches the field param you specified in the registration plugin to ensure the data is from your registration form. An example of the importance of checking this field is on the advanced page.

If the user chooses to register without using her Facebook account, the oauth_token, user_id, and expires parameters will not be included in the signed request.

Ruby Example for reading signed_request:

Assume that you have redirected the facebook signup request to one of your controller action. In that action you can access the signed_request values as params[“signed_request”].

And the ruby code below will be more helpful to parse that signed_request into a ruby hash:

require 'rubygems'
require 'openssl'
require 'base64'
require 'yajl'

module FacebookRegistration
  class SignedRequest
    def initialize
    end

  def call(params)
    if params.is_a?(Hash)
      signed_request = params.delete('signed_request')
    else
      signed_request  = params
    end

    unless signed_request
      return Rack::Response.new(["Missing signed_request param"], 400).finish
    end

    signature, signed_params = signed_request.split('.')
    signed_params = Yajl::Parser.new.parse(base64_url_decode(signed_params))

    return signed_params
  end

  private

    def signed_request_is_valid?(secret, signature, params)
      signature = base64_url_decode(signature)
      expected_signature = OpenSSL::HMAC.digest('SHA256', secret, params.tr("-_", "+/"))
      return signature == expected_signature
    end

    def base64_url_decode(str)
      str = str + "=" * (6 - str.size % 6) unless str.size % 6 == 0
      return Base64.decode64(str.tr("-_", "+/"))
    end
  end
end

facebook = FacebookRegistration::SignedRequest.new
parsed_params = facebook.call(params["signed_request"])
puts parsed_params.inspect

RubyGem:

Recently I created a RubyGem for making this process easier. You can check the gem and documentation for this FB registration process using the following URLS:

https://rubygems.org/gems/facebook_registration

http://rubydoc.info/gems/facebook_registration/1.0.4/frames

Related Articles

• Facebook Connect in Rails using Facebooker Gem (veerasundaravel.wordpress.com)
• Facebook Registration Plugin (developers.facebook.com)
• Ruby Gem for Facebook Registration (rubygems.org)

Advertisements