Allow Facebook Registration
Registering using Facebook is one of the hottest trends in web apps today. This article shows how to create Caspio app registration and sign in using existing Facebook accounts. Now users won’t be required to remember another username and password, and they gain access directly to the secure areas of your app.
Initial Setup:
1. Create your Caspio app
Before adding Facebook registration, create a password protected application using Caspio’s Web User Authentication. You should have:
- A public registration form
- A password protected folder containing one or more DataPages
Deploy your application to your web server as normal.
2. Add Facebook fields to your Authentication Table
Open your Authentication Table in Design view.
Facebook allows you to collect and save several pieces of data from the user’s Facebook profile to be used for authentication in the future.
Add a Text(255) field for:
- Facebook_ID
Set the Facebook ID to unique.
Other data that you can easily pull from the user’s profile includes:
- First name
- Last name
- Full name
- Birthday
- Gender
- Location
- Time zone
Add any of these as additional fields to your user table.
It is also a good idea to add a checkbox for “Registered_with_Facebook” this checkbox can be automatically stamped so you can keep track of these users.
3. Add two empty HTML pages to your site
Facebook registration is going to require two additional webpages. These pages are used to register new users and redirect registered users to your members area. This pages can be completely empty or include only the basic structural HTML and body tags.
- fbregister.html
- fbredirect.html
Register your app with Facebook
After you have created your Caspio app you will need to register its location with Facebook.
Follow the instructions here to register your main site URL to get a Facebook App ID.
Record your Facebook App ID because it will be needed later.
Create an Authenticated Facebook Folder
Create a folder in Caspio Bridge called Facebook Sign In.
Inside this folder create an HTML page DataPage.
In the HTML panel of this DataPage paste the following:
window.location="URL";
</script >
Replace “URL” with the URL of your apps primary membership area page or members’ portal.
Deploy this HTML page onto a blank webpage (fbredirect.html) on your server.
Password protect the Facebook Sign In folder
Click on the Authentication button.
Select your Authentication table (or View). Select Custom Authentication. Enable Advanced Options and Click Next.
Use the Facebook ID to identify returning Facebook users.
Click Next.
You should now be on the Configure Fields screen. Using the Insert button at the lower right-hand corner of the DataPage Elements panel add header and footer sections.
In the Authentication Header add the following:
In the Authentication Footer add the following:
</div>
<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script>
function readCookie(name) {
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for(var i=0;i < ca.length;i++) {
var c = ca[i];
while (c.charAt(0)==' ') c = c.substring(1,c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
}
return null;
}
var cookarray = new Array();
var cookie = readCookie("fbs_Your Facebook App ID");
if(cookie)
{
cookarray = cookie.split("&");
cookarray[0] = cookarray[0].replace(/['"]/g,");
}
function LoadData(){
FB.api('/me',function(response){
if(typeof response.name == 'undefined')
{
return;
}
try{
document.getElementById('xip_Facebook_ID ').value = response.id;
}catch(e){};
document.getElementById('caspioform').submit();
});
ready = 1;
}
FB.init({appId: 'Your Facebook App ID', status: true, cookie: true, xfbml: true});
FB.Event.subscribe('auth.sessionChange', function(response) {
if (response.session) {
location.reload(true);
} else {
ready = 0;
}
});
LoadData();
</script>
Replace "Your Facebook App ID" where indicated. Also replace "Facebook_ID" with the field name of your Facebook ID field. Be sure that the name matches exactly to the field name listed in the DataPage elements panel.
Change the failure message to an automatic redirect
On the Failure Message screen it is a good idea to automatically direct failed signs to your default registration page or a support contact page. Failed sign in indicates either that the user has not registered, or that their Facebook information has changed.
Replace the message with the following:
window.location="URL";
</script >
Replace URL with the URL of your registration page or directly with the URL of the registration link you will create later.
Click Next.
On the final screen click the Enable auto-login across apps checkbox. Be sure this checkbox is also checked for the other authenticated folders in your app.
Create a Facebook Sign in link.
The sign in link is for users who have already registered for your app using Facebook. It is good to include this link both on your homepage, and in the footer of non-Facebook login pages.
Replace the indicated fields with your Facebook App ID and the URL of your Authenticated HTML page. Copy the finished URL in the href attribute for later use.
Create a special Facebook Registration DataPage
Create a folder in Caspio Bridge called Facebook Registration.
Inside this folder create a new Submission Form. Click Next.
Select your Authentication Table as the data source and enable Advanced Options and Parameters. Click Next.
Select the fields you would like to collect from the users Facebook Profile. You will also need to include any unique fields and the Registered with Facebook field if you have created one. Click Next.
You should now be on the Configure Fields screen. Use the Insert button at the lower right hand corner of the DataPage Elements panel to add header and footer sections.
In the header of this DataPage insert the following:
In the footer of this DataPage insert the following:
</div>
<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script>
function readCookie(name) {
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for(var i=0;i < ca.length;i++) {
var c = ca[i];
while (c.charAt(0)==' ') c = c.substring(1,c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
}
return null;
}
var cookarray = new Array();
var cookie = readCookie("fbs_Your Facebook App ID");
if(cookie)
{
cookarray = cookie.split("&");
cookarray[0] = cookarray[0].replace(/['"]/g,");
}
function LoadData(){
FB.api('/me',function(response){
if(typeof response.name == 'undefined')
{
return;
}
try{
document.getElementById('InsertRecordFacebook_ID').value = response.id;
document.getElementById('InsertRecordFull_Name').value = response.name;
document.getElementById('InsertRecordEmail').value = response.id;
/*
document.getElementById('InsertRecordBirthday').value = response.birthday;
document.getElementById('InsertRecordFirst_Name').value = response.first_name;
document.getElementById('InsertRecordLast_Name').value = response.last_name;
document.getElementById('InsertRecordGender').value = response.gender;
document.getElementById('InsertRecordLocation').value = response.location.name;
document.getElementById('InsertRecordTimeZone').value = response.timezone;
*/
}catch(e){};
document.getElementById('caspioform').submit();
});
ready = 1;
}
FB.init({appId: 'Your Facebook App ID', status: true, cookie: true, xfbml: true});
FB.Event.subscribe('auth.sessionChange', function(response) {
if (response.session) {
location.reload(true);
} else {
ready = 0;
}
});
LoadData();
</script>
If you have other unique fields (like email in this example) you will need to copy the Facebook ID into each of them. This data can be changed later by the user in an Update Single Record DataPage.
At this point you can also add the "Registered With Facebook" yes no field. Set that field to hidden and checked by default. Now, new users who register using Facebook will be easily identifiable.
Click Next.
On the final page of the registration direct the users to the URL that is located in the href attribute of your sign in link.
Now when a user registers they will immediately be signed on and directed to your membership area.
Deploy this Facebook registration form to a blank webpage (fbregister.html) on your site. Save the URL for use later.
Create a Facebook registration link
Create a link to allow users to register using Facebook. This link can be placed in an HTML block directly on your standard Caspio registration form.
Testing and other considerations
You can test this system by registering yourself using your Facebook account.
You can test the system multiple times by deleting the record inside your Authentication table and registering again.
You’ll notice that if you attempt to register twice the DataPage will give you a repeated error. If you would like to redirect the user instead you can create a special Facebook localization.
Facebook Localization
Make a copy of your default localization and change the name to Facebook.
Click the edit button.
On the Apply Localization to DataPages screen select your registration form.
Click Next.
Under Forms/Details Pages select messages. Change message # 350 – “You did not enter valid information in one or more of the fields.” To the following:
<script>
window.location="URL";
</script >
Replace URL with a redirect to an appropriate page explaining how to get more assistance.
Additional Security Concerns
For additional security, the authentication of your non-Facebook app folders can be based on a filtered View excluding the users who registered with Facebook. As long as the Auto-Login across apps checkbox is checked, both groups will have access, but Facebook users will not be able to log in directly using the Caspio authentication boxes (they must click the sign in with Facebook links).
Please note: This article uses external HTML, JavaScript, or third-party solutions to add functionality outside of Caspio Bridge's standard feature set. These solutions are provided "as is" without warranty, support or guarantee. The code within this article is provided as a sample to assist you in the customization of your web applications. You may need a basic understanding of HTML and JavaScript to implement successfully.
