Facebook Account Kit Tutorial - Backend Verification using Node.js

Recently I have been developing secure production app using Facebook account kit for seamless authentication across mobile and web platform. Account kit is widely used in many apps such as Saavn and many other. I found that backend verification in Account kit for every request from mobile/ SPA should be handled manually by developers and no libraries available till date. so, I'm writing this post for Indie Game and mobile developers as a reference guide.

So what's Facebook Account kit all about ? 

It's seamless authentication method via OTP way to verify the user with Mobile Number and login into App without any passwords. Whereas it provides access token to verify the authenticated user in backend server without worrying about the access token generation, revocation logics. It's all about securing the access token and using it over HTTPS connection while connecting between your app and backend.

Facebook Account Kit Tutorial - Backend Verification using Node.js

Prerequisites :

In this tutorial, we'll solely concentrate on Backend verification and authorising the legal request made by the apps.

• Facebook Developer Account 
• Good Knowledge on Node.js routeing
• Rest API client
• Good logical error handling skill

How Does Account Kit works ?

When the user signup using his mobile number, he would receive the OTP via SMS Carrier from facebook server. after authenticating OTP password, the account kit sdk gives you the long live Access token or Client side temporary exchange token(this depends on application).

• With the received access token, securely post it your Mobile backend server (probably HTTPS to avoid man-in-the-middle attack)
• with that access token you can call the Account Kit API end point to check that the access token is valid as well it provides you mobile number or E-mail
• As response contains mobile number, you can identify the user and provide the user with the service appropriately.
• Most important thing is you should pass the access token everytime from the client to the server in order to verify the authenticity of the user.

Getting Started :

You should have good knowledge in routeing technique since we are going to concentrate on Express.js, if you're beginner check out this link to learn more.

Concept :

Since we need to authenticate every request from the app that comes along with access token and others data we could write a middleware to authenticate the every request in the beginning before it executes the API code.

Middleware is nothing but a piece of code which is executed before each and every request entering our express routes. probably we need to write the Account kit verification code here and if it is a success we can make the request to propagate to the corresponding the function else just terminate the live request with authentication errors spitting.

Sample code : 

here is sample code to authenticate your mobile backend API end points. we use request module to send a get request to account kit server by providing the accesstoken in url param while if it responds with 200 status code, we are going to extract the mobile number else we are going to consider the request as failed on and informing to the client as error message. before trying this source code, in Facebook Developer dashboard turn off the App-secret required option and enable client access token flow.

That's it. this is base tutorial on verifying the backend for facebook account kit integrated development.
for any bugs/hugs comment below. For detailed source code and other information just comment below or mail me, chat with me in Google+ or facebook.share is care.

Read More

Facebook API Javascript SDK - A Complete Reference for Websites,Apps

Recently i was spending my time on Quora,Instagram and Good reads,pinterest in my free time, and the Most common feature i was seeing through the three Apps was Facebook Integration deeper and they were utilizing the Facebook API to the core and increasing the Traffic,Socializing their apps in successful manner.I have made the title as Complete reference since,Utilizing proceeding API calls we could successfully socialize and integrate apps efficiently with facebook and drive more social traffic.

Rather than the Company Advertising,When Friend suggest you via App,that will be really true and awesome to check it out and which drives more user Engagements to your app.

Facebook API provides excellent API service to integrate with Their friends and share the apps from likes to custom Stories via your app.So lets come up and use the API effectively and deeply link your service and make the users to socialize and drive social traffic to your web app without much Efforts.

Prerequisites :

You Should have Valid Facebook Developer account to create apps and performing tasks and little javascript knowledge and data sharing knowledge to integrate with your site.

Scope :

After Working out from this Post you can Integrate Facebook API such as Like,Comments,Photo upload,Links Sharing and custom stories from your site and increase your Social traffic and engagement of users.

How Does it work ? 

Generally Facebook API is normal Web service (RESTful) where resource are accessed via URLs.Each method/functions has separate url to access with Access tokens with privacy/permissions from users and Oauth Authentications.

Procedure :

1. Create App in facebook with corresponding Name.
2. Fill out all the forms corresponding for web pages(since web app)
3. Get your APP_ID and Secret KEY for the APP.
4. Add your contact email address and App namespace and Domain of the APP.

Initialize Your APP with Facebook JS SDK : 

Facebook provides Javascript library so that you can perform the API calls with authentication and check the status of Facebook login/logout and even more Event Listeners for task to be performed after liking/Commenting/sharing.

  <script>
      window.fbAsyncInit = function() {
        FB.init({
          appId      : 'YOUR APP ID HERE',
          xfbml      : true,
          version    : 'v2.3'
        });
      };

      (function(d, s, id){
         var js, fjs = d.getElementsByTagName(s)[0];
         if (d.getElementById(id)) {return;}
         js = d.createElement(s); js.id = id;
         js.src = "//connect.facebook.net/en_US/sdk.js";
         fjs.parentNode.insertBefore(js, fjs);
       }(document, 'script', 'facebook-jssdk'));
    </script>

Determine the User Logged in/out :

Invoking this Javascript piece of code will determine that whether the user is loggined or not and with the help of Javascript Callbacks we could determine the next action to be performed.on invoking this function you just get response object as json,so that you can know the current status of the person.

FB.getLoginStatus(function(response) {
  if (response.status === 'connected') {
    var uid = response.authResponse.userID;
    var accessToken = response.authResponse.accessToken;
  } else if (response.status === 'not_authorized') {
    FB.login();
  } else {
    FB.login();
  }
 });

so,With the help of above function we could authenticate the valid user to the app.

Login using FB with permissions :

So,Invoke Login when user hits a button or Facebook too gave inbuild html tag for login Button.So just pass the permissions as parameters.

FB.login(function(response) {
  if (response.status === 'connected') {
    console.log("Thanks for login and you can perform");
     testAPI();
  } else if (response.status === 'not_authorized') {
      console.log("you can't use our app unless you just login");
  } else {
  }
});

Getting User Public Profile Data :

inorder to get user info and save it in our Database just invoke FB.api method and response would be as JSON object as well in callback you can do server side calls with javascript.

FB.api('/me', function(response) {
    console.log(JSON.stringify(response));
   transferToMyServercall(response);
});

Facebook Share Dialogs and Callback Events :

I love the most in javascript is Callbacks,and when the user likes or comments or share something via facebook we could detect the valid clicks and use it in marketing and promotions in our site.

FB.ui({
  method: 'share',
  href: 'https://developers.facebook.com/docs/',
}, function(response){
  console.log("THANKS FOR SHARING! 90 CREDITS ADDED TO YOUR ACCOUNT");
});

Facebook Send Button :

Sending app invites,sharing links directly via app to fb as personalized messages to your friends.

FB.ui({
  method: 'send',
  link: 'http://www.nytimes.com/interactive/2015/04/15/travel/europe-favorite-streets.html',
});

However this makes more interesting, This is same as Pinterest to invite other users to join with you on pinterest,with personalized message to your friends as well as group message.

Note : unfortunately We dont have response object since it may be privacy part of user to share personalized message,However i dont know the actual reason behind it.(if so comment below)

Facebook Feed Sharing Dialog :

FB.ui({
  method: 'feed',
  link: 'http://www.i-visionblog.com',
  caption: 'An example caption',
}, function(response){});

This kind of share dialog box can be used in both ways,

• Sharing the info in your wall - via app.
• Sharing to friends timeline directly by passing the options as from,to,picture,caption etc.have a look at complete option list here.

The response would be post id after sharing in wall or feed successfully.

Note : Once again if your friend chooses privacy as only she/he could post on his/her timeline,then there would be an Exception and be ready to handle.

Add Friend dialog - Friend Request :

Bad!luck, this is completely removed above API 2.0 version.

Event Subscription :

One of the most likable feature is event subscription,which will make our app to respond to likes,comments,share as callbacks.this would be better for writing general application logics.

For example: 

When a User at Quora shares answer via Social Network the answer writer receives Points based on sharing,So here

onsharing event occured and as callback the answer writer gets point updated in Database.(However that's just example)

<div 
  class="fb-send" 
  data-href="http://url.to.your.page/page.html"
  data-colorscheme="dark">
</div>

// In your onload method
FB.Event.subscribe('message.send', message_send_callback);

// In your JavaScript
var message_send_callback = function(url) {
  console.log("hey You get more points,thanks for sharing");
  console.log(url);
}

The same way once after subscribed,we could also unsubscribe the events that occurs.

So,with these components and API,we could develop and promote our Data driven Web applications/games and bring back more traffic to our site/App.

For hugs/bugs/suggestions/help/projects,just drop me a mail to s.shivasurya@gmail.com or chat with me in Facebook/G+ chat.follow me in twitter,linkedin for updates.Share is care.Do comments.

Read More

App Invites For Android & iOS Apps - Facebook Friends To Mobile App

Recently I got a Notification from my Close friend in Facebook suggesting me to try a Android App.I too Eagerly clicked over that and installed from Google Play.

And the next day i was asking her how did you invite me via Facebook ? or just spammy Notification just like another Candy Crush Saga :D.Then she shown this page to me App-invites - Facebook Developers page.I was Wondering how could i invite From My App(Android) and checked out the Documentation  About the App invites and it was Quite confusing first,however after lot of Searching over Stackoverflow,reading the Documentation thrice i could build a Simple Invite System from My Android App to Invite and Suggest the App in Facebook to Engage to Download or to open the app.

Refernce : Download Code from GitHub 

A Drift from Web App to Mobile App : 

Once Upon a time i could remember working with implementing the invite system with Javascript with Facebook,and Now i consider this is as a Major Drift Change from web app to Mobile apps replacing it.This invite system can increase the User engagement to the user at higher levels,since you're personally inviting your friend,sweetheart :D to try those Apps.

Prerequisites : 

Here we're developing a Simple Android App that has invite button and directs to invite popup and invite our friends in facebook.

• Android Studio With Recent SDK installed (Preferable for Dependency Adding).
• Facebook Developer Account.
• Register A Facebook App with Key Hash and Package Name.
• Android Phone with facebook App Logined
• Little patience to Debug the App via logcat.
• A little Knowledge About Developing Android Apps and Java.

Before Writing this post,I have created a small App which made me many troubles such as App crashing,Low speed internet Connectivity(My Fate :D ) and Some Exceptions.here i will completely write my experience and exception and how i handled them.If anything apart from this let's discuss in Comments or over Email.

Creating Facebook Application - Developer console :

here we can discuss about creating Facebook App and obtaining APP ID and Secret keys for our app,and providing platform as Android,Adding key hash and package name.

• visit here and Create new App - Link - Facebook Developers Console.
• select the Platform As Android > and provide a Name for Your app corresponding to your android app.
• Choose a Best category that fits your App(Most recommended by facebook to Rank your app).
• Provide the package name to facebook and Launcher Activity too as java package name.(be cautious about package name or else it wont works :D)
• Provide your necessary app info and move on to key hashes(will see it later how to add it)
• At the top right of the Page click skip the Quick start and you will be redirected to App dashboard which you have created.
• go to app > settings > provide a namespace for your app(mandatory)
• Add contact email also and save it.
• Now,at below add platform > select Web app and give your website address(if it available)
• if you have website and added the platform then,Add your domain in Domain Field and Save the info.(Don't worry if you don't have any websites just skip to next step)
• Get your APP ID and make your App live for production in status & review > toggle the button to enter in to Production mode.
• And finally We need to Add Key hashes to our Facebook App console.(see below)

How to Generate Key Hash and Add to Developer Console :

just with your onCreate method add this code and replace with your package name correctly and run your app in Debug method(by Default it would be) and check your Logcat for the keyHash : XXXXXXXXXXXXX. Just copy it and visit your app in facebook Developer Account > Settings > in the Android Section (Which you have already created with package name) in the key Hash Field add it over and enable single-signon(may be useful for apps with login) and save the app settings.

Note : this is preferable method which i have created the key added to my Account.

@Override
public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);

    // Add code to print out the key hash
    try {
        PackageInfo info = getPackageManager().getPackageInfo(
                "REPLACE WITH YOUR PACKAGE NAME HERE", 
                PackageManager.GET_SIGNATURES);
        for (Signature signature : info.signatures) {
            MessageDigest md = MessageDigest.getInstance("SHA");
            md.update(signature.toByteArray());
            Log.d("KeyHash:", Base64.encodeToString(md.digest(), Base64.DEFAULT));
            }
    } catch (NameNotFoundException e) {

    } catch (NoSuchAlgorithmException e) {

    }

Android Studio Project and Facebook SDK Setup :

I just love Android Studio mainly because it automatically adds the dependency with one line in app gradle.However i'm not expert in Working of Gradle system! however i know how to use it projects to add dependency without any pain unlike Eclipse you have to Add it and point the locations and export while you're building it finally.

• Open You Android Studio(i hope you have installed latest SDK and tools installed).
• create new project with a Empty Blank Activity.

Now just open your app gradle file and add the entries to resolve the dependencies via maven repository.

dependencies {
    compile fileTree(dir: 'libs', include: ['*.jar'])
    compile 'com.facebook.android:facebook-android-sdk:4.0.0'
}

 and just sync your gradle or rebuild your project.

Note : Mainly this Dependency support from API 9 and above.just change minSDK as 9 and higher till Android API 22 or L (your choice).

Adding the Code : 

lets just first see about setting permissions and adding entries in Manifest file regarding Facebook SDK setup.

• I have added a default activity to be launched and shown in launcher.
• then added facebook activity (may be useful for apps used for login/share with facebook)
• added meta-data content containing facebook app id as string from xml file.
  don't just hardcode your APP ID, it may create exceptions,it is recommended by facebook to use as String from xml string.
• Finally add Permission for internet appropriately since we are doing network based operation in our app and facebook needs it. 

        

    <uses-permission android:name="android.permission.INTERNET" />
<application ...>
<activity
            android:name=".facebook"
            android:icon="@mipmap/ic_launcher"
            android:label="@string/title_activity_facebook" >

            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
                <action android:name="android.intent.action.VIEW" />
                <category android:name="android.intent.category.DEFAULT" />
                <category android:name="android.intent.category.BROWSABLE" />
               
            </intent-filter>


        </activity>
        <activity android:name="com.facebook.FacebookActivity"
            android:configChanges=
                "keyboard|keyboardHidden|screenLayout|screenSize|orientation"
            android:theme="@android:style/Theme.Translucent.NoTitleBar"
            android:label="@string/app_name" />

        <meta-data android:name="com.facebook.sdk.ApplicationId" 
  android:value="@string/facebook_app_id"/>
    </application>

So just use this example to add your manifest file,and check that you have added facebook activity in your manifest file too.

MainActivity - Activity to initiate App invites :

Here we are initializing the App with facebook library and set the view as XML layout and then simply add a link and preview image preferably a large image is recommended.

get your App links from facebook to launch the activity from facebook or web or some other apps.learn more about app links here in my previous article.

create App link from here. 

• select the created facebook app for android
• Select android platform and scroll down
• in the Android section , Add your package name for launching the app if it is present in the particular device or else just as fallback it may be moving into playstore.
• Enter your playstore package name(must be equivalent to your android app project package name)
• If you have website just add it,check that you have app links in the head section of the website and the domain should be already added in the App> settings > domain(when web platform is enabled )
• Create a new Applink and just copy it.

Just replace with your app link in the code given below,and chenge your imageurl too(must be high resolution image).

 
@Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

            FacebookSdk.sdkInitialize(getApplicationContext());

            setContentView(R.layout.activity_facebook);
            
String appLinkUrl, previewImageUrl;

            appLinkUrl = "https://fb.me/493857950766025";
            previewImageUrl = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFlJx_QbYwpbLkqo-tZkSl4waIjKo5IUbe0eM32WgGCX-poInzLWegKE9-0mGdUi5faoK3NCt4rjGYzZu4LObVeCOJZubSnRem1FdxqAKHwGWuDAqmb2Kglv9i3vzi_Pfx7csGgCnOvBlr/s1600/appscripts.png";

                AppInviteContent content = new AppInviteContent.Builder()
                        .setApplinkUrl(appLinkUrl)
                        .setPreviewImageUrl(previewImageUrl)
                        .build();
                AppInviteDialog.show(this, content);

        }

Thus while Opening your app this will default invoke to app invite activity of facebook.

Here facebook verifies the user has installed however latest facebook app in device or else as fallback it opens as webview facebook.You must be logined in the facebook Native app or Webview already will be fine for testing.

Main Note:

This Invite Feature doesnt need any Login With Facebook Feature,This just Simply enables you to invite your friends when you're logined with facebook app.

Errors which i came across:

• null pointer Exception for not Adding Facebook App ID in manifest file.
• null pointer Exception for Hardcoding the APP ID in manifest File.
• Facebook App canvas Error for not adding key hash mismatch.
• Facebook App canvas Error for App in development mode(switch to Production mode)
• Null pointer Exception for not initializing Facebook SDK before setcontentView method.

However if you didnt find any error if you come across,comment below lets discuss it and resolve and make this post more usable.

My Screenshot : 

For hugs/bugs/errors/help/suggestions just comment below or mail me to s.shivasurya@gmail.com or chat with me in Facebook/G+ or tweet me in twitter.Share is care.

Read More

Working With Parse.com For Mobile Application Data Storage - Javascript API Connecting NoSql Datastore

Nowadays we are always tempt to use mobile applications on Android/iOS/ BBos and Windows 8 and etc...where these apps have to store the data for future reference.Particularly concentrating HTML5 apps powered by javascripts are more powerful and easy to build across different platforms.The User data is better to store in cloud and could be searched with the help of API provided.although Parse stands Easy for me for saving data,Where Bluemix Also supports that ,I have tried Parse since it gives Class-Object approach to save data with few lines of Javascript code.And Application can be easily scalable and Searched efficiently.Not Only mobile applications,Apps that is data-driven can also use this feature for easy storage and tension free and forget about Database design,Support and code for connecting database.Where parse provides simply efficient datastore with Access Tokens and Application ID and save your data.And it is also part of Facebook :)

parse.com - i-visionblog - Mobile apps Storage

Scope:

This Post can Give you a Experience to store data as Objects via Class using Javascript API provided by Parse.com.Not only Data, You could upload files and others too save in the Datastore,with few lines of Javascript Code and Application ID and Secret Code.

Installation :

As Like Normal Javascript include it in normal part and You can Download from Official Parse Site.click to Download

                  <script src="./parse-1.2.18.js"></script>

Understanding the Concept Of Saving Data : 

Storing data on Parse is built around Parse.Object. Each Parse.Object contains key-value pairs of JSON-compatible data. This data is schemaless, which means that you don't need to specify ahead of time what keys exist on each Parse.Object. You simply set whatever key-value pairs you want, and our backend will store it.

Create a Object by extending the Parse.Object.extend and this could create new class and then we could save as Keys must be alphanumeric strings. Values can be strings, numbers, booleans, or even arrays.

example for raw data :

                    email: "s.shivasurya@gmail.com", phone: 9788012345

JavaScript API to Handle Data :

I have Chosen JQuery to Handle my data and operation to perform with Parse javascript functions with callbacks,since it is basically network operation.

1) Create Application in Parse.com  and You may receive Application ID and Secret Keys for various platforms for your application.

Initialize Your Application to Connect Parse :
First Initiative step is to save the Data as objects with particular class in Parse.com.So,Create a Class in parse dashboard.

2) just use Parse.initialize method to configure your application and get connected to the Parse Datastore.

Parse.initialize("Your App ID", "Your Javascript Key");

CRUD functionality:

3) First let us see how to create a Row(Record) with unique object ID that contains User Data, and by default it has Created Time ,Updated Time with ACL(Access Control List).

To Create a record just extend the parse object with suitable created class and create object with that and invoke the function save to save our data in Datastore.Well see the example below.

   var createobject = Parse.Object.extend("users");

   var objectwithdata = new createobject();

   objectwithdata.save({email: email,phone: phonenumber},{
         success: function(object) {

         console.log("success");

         $("#load").hide();

         },

        error: function(model, error) {

         console.log("error");

           }

    });

In above code we have just extended to class user and created object of User class.and we have added few data by invoking a function save() with a callback function with success and Error handlers.since it is time consuming operation to save data in parse.so whenever the return is success a row is added automatically with Object ID ,it is better to retrieve and keep it in HTML5 storage for later queries and other operations.

Retrieve Data : 

   var retreiveobject = Parse.Object.extend("users");

   var retrievedata = new retreiveobject();

   retrievedata.get("Your Object ID for Particular Client",{
         success: function(object) {

         console.log("success");

         console.log(object);

         },

        error: function(model, error) {

         console.log("error");

           }

    });

In above code we have just extended to class user and created object of User class.and we have read few data by invoking a function get() with a callback function with success and Error handlers.

Update Data :

   var retreiveobject = Parse.Object.extend("users");

   var retrievedata = new retreiveobject();

   retrievedata.get("Your Object ID for Particular Client",{
         success: function(object) {

         console.log("success");

         console.log(object);

         retrievedata.set("email","suriya1180@gmail.com");

         retrievedata.set("phonenumber",9876543210);

         retrievedata.save();

         },

        error: function(model, error) {

         console.log("error");

           }

    });

In the above method we had retrieved the data and we just used set() function to update values and finally call save() function to update the data in database.

Delete Object :

   var destroyclass = Parse.Object.extend("users");

   var destroyobject = new destroyclass();

   destroyobject.destroy("Your Object ID for Particular Client",{
         success: function(object) {

         console.log("successfully deleted");

         },

        error: function(model,error) {

         console.log("error");

           }

    });

In the above method we have just called the destroy() function to destroy the row of particular Object ID from Datastore.
There are still Lot arrays,Datatypes,queries,compound query,relating data and so on.visit here to Learn more

My sample :

I have created a class named users with phone numbers and email storing data in parse and when success function runs it is redirected to List.html file in my mobile application.

       //consider jquery.js included
     <script src="js/parse-1.2.18.js"></script>
     <script>
   
        $(document).ready(function(){
   
        $("#login").click(function()
            {
                var email=$("#email").val();
                var phonenumber=$("#phonenumber").val();
                console.log(email);
                console.log(phonenumber);
                $("#search").hide();
                $("#load").show();
                Parse.initialize("My APP ID", "My javascript Secret Key");
                var TestObject = Parse.Object.extend("users");
                var testObject = new TestObject();
                testObject.save({email: email,phone:phonenumber},{
                  success: function(object) {
                   console.log("success");
                  $("#load").hide();
                   window.location="./list.html";
                },
                error: function(model, error) {
                console.log("error");
      }
});        
 }
        );
            });
    </script>

My simulated application results:

I had made a simple form to trigger with sign up button and call parse.save function to save data in Datastore.

Cautions:

1)Always concentrate Errors on Console Log of chrome to minimize the Errors

2)However it is javascript client code it is showing both keys public manner.so just use ACL and permissions,Sessions to prevent Illegal data transactions in Parse Dashboard.

3)Handle the Errors and print the errors to guide the project to success.




My result:

my Class with Data populated on Parse.

Beware of Securing the Data.Just Try out Parse for Mobile apps and make use of Cloud code for efficient scaling.For further doubts/Bugs/reports Mail me s.shivasurya@gmail.com or let us disqus as comment below.Share is care

Read More

Login system v1.0 - i-visionblog

you have been using Google,Facebook Twitter with login system with recaptcha and recover system to maintain and enable privacy for users.Recaptcha enables the user to slow down the too many login attempts on a login page.I have enables access tokens to handle only genuine request from the genuine forms from PHP.since i got too many response on my last post Simple login system and OOPS approach i had made this in github for everyone to notify errors and optimize the script.

login system v1.0 i-visionblog.com

   

 App structure:

  |
  |-------- css
  |               |------- bootstrap.min.css
  |               |------- bootstrap.css
  |               |------- validator
  |                              |---css
  |                              |       | --- bootstrapvalidator.css
  |                              |       | --- bootstrapvalidator.min.css
  |                              |----js
  |                                      | --- bootstrapValidator.js
  |                                      | --- bootstrapValidator.min.js
  |
  |--------- js
  |               | --- bootstrap.js
  |               | --- bootstrap.min.js
  |               | --- jquery.js
  |               | --- jquery.min.js
  |
  |--------- fonts
  |                | - normal font files from bootstrap
  |
  |--------- index.php //checks for session and create forms accordingly
  |
  |--------- home.php //checks for session and shows the data of login user
  |
  |--------- login.php //to check db,session,login access token,attempts,recaptcha
  |
  |--------- logout.php //check for session and access key for session destroy
  |
  |--------- recaptchalib.php //script from google to show recaptcha form and verfiy
  |
  |--------- user.sql //populate your database with this file using import

features:

1)bootstrap validation with framework

2)complete login/logout with fixed sessions

3)pdo queries from db (to avoid sql injection/hacks  )

4)functions to check sessions

5)hope this will work like facebook logout enabled with session and access tokens

6)recaptcha from google to prevent more than 4 login attempts

7)no cross site post attempts(hope :p )

p.s report for bugs!! or open issues on github repo
i will be giving constant updates & social media syncing with access tokens settings for sharing,commenting and other stories on facebook,twitter.share is care

Read More

Mobile Detect in PHP and categorize different OS and Devices

According to +Mashable,Most of the Users nowadays use mobile phones,gadgets etc to access internet,apps and other services from them.so,it becomes handy for users and inorder to bring websites,standalone web application running in web browsers can be designed for the gadgets size and respective width and display the content appropriately for Easy access and better usage.You would have seen many site such as Google,Facebook release apps to load data for small gadgets efficiently instead of huge website with plugins.I would discuss about building apps from basic in future.in php we could detect the browser from headers and respond them accordingly!

php Mobile detection

Download the Above Mobile_detect.php and just call it by require or include function.

Installation:

<?php
include("Mobile_detect.php");
$found= new Mobile_detect;
?>

Sample code:

this code is just for sample there are lot of phones,OS,Browsers defined in Mobile_Detect.php just go through the class and call from creating object outside with appropriate spellings.

Screenshot from I-OS:

1)i have personally tested on Android,I-OS,Nokia ASHA and other web browsers.

2)generally this tutorials is very easy and there are lot of classes to check the mobile detection.

3)As far this class detect with the help of headers which carry browser information and OS.The authors of this class has took effort in finding Model Number|OS|Browser|Nature of Request and other parameters and made a simple class file for php.

As developer you must be known Browser header carry info about OS,Browser info and other variables within them to serve pages from web server.

a small snap of Request Headers.

report for doubts and bugs in comments.share is care.and you must not ask if user hide ip address and Browser information to me :p

Read More