How to Implement File Download in JAVA

The files that appear on your web-app are part of the JSP and HTML pages. If you want to download them, you need to make a request to the servlet. The servlet reads the bytes of the files from an input stream, and writes them to the output stream. The output stream is nothing but a ServletOutputStream suitable for writing binary data in the response.

Check out the following code snippet:


BufferedOutputStream out =  new BufferedOutputStream(response.getOutputStream());

File f = new File("Path of the file on the server");
InputStream is = new FileInputStream(f);
BufferedInputStream in = new BufferedInputStream(is);
response.setHeader( "Content-Disposition", "attachment; filename=somefile.txt");
byte [] buffer = new byte[1024];
int bytesRead = 0;
while ((bytesRead = in.read(buffer))>0){
    out.write(buffer, 0, bytesRead);
}

is.close();
in.close();
out.close();


Since you need the response as an attachment to the browser, you need to set the response header accordingly as follows:

response.setHeader("Content-Disposition", "attachment; filename=somefile.txt"; 

How to use Google Login for your App

You need to register your app on Google first to get identified by it.
Register here !

Steps to Register Your App.

1. Click on "Create Project"
2. It takes you to the Services Tab. Skip that step ans instead select the "API Access" Tab.
3. Click on "Create an OAuth 2.0 client ID"
4. Fill in the pop-up form with the info associated with your app, like your App name (Product Name), email id to which you want to associate this app, and the app logo url. Click Next.
5. Select the App type, give your site url. For development phase, you are allowed to give the site url as http://localhost:8080/ (or any other relevant port) as well.
6. If you click on more options link, you can enter the redirect url also for your app. The JavaScript origin becomes your site url.
7. Click on "Create Client ID"

Your App is registered now!

Google generates an App ID, or the Client ID for your app. It also generates a App Secret which should not be disclosed and an email address for the app.

In the log-in page of your application, open the following request url (either by button-click, href, ajax, get request, or window.open)

"https://accounts.google.com/o/oauth2/auth?scope=https%3A%2F%2Fwww.googleapis.com%2Fauth%2Fuserinfo.email+https%3A%2F%2Fwww.googleapis.com%2Fauth%2Fuserinfo.profile&redirect_uri=http%3A%2F%2Fwww%2Eyourappdomain%2Ecom%2F&response_type=token&client_id=YOUR_APP_ID"
                               
You will be prompted by Google to permit the app to access your Google account. If you reject, Google will send you an error, else it will send you an access token along with the return url separated by a #. Since your scope was "email" in the above request url, you will get to know user's basic account details, like his username, email, first name, last name.

You must provide a redirect url for a file where you want to start a proper user session (as when the user is logged in). There you should check whether Google has provided you an access code or not in the return url.

Once you have received an access code it means you have permitted the app to use your Google account to access your basic details. Write the following code in your return url file.

Because the access token comes along with a # separator you need to extract it for the next request. Check the sample code below:

var params = {}, queryString = location.hash.substring(1),
    regex = /([^&=]+)=([^&]*)/g, m;
    while (m = regex.exec(queryString)) {
      params[decodeURIComponent(m[1])] = decodeURIComponent(m[2]);
    }
    var queryStringArray = queryString.split("&");
    if(queryStringArray[0].split("=")[0] == "access_token"){
    // make a Get request to 'https://www.googleapis.com/oauth2/v1/userinfo?' + queryStringArray[0]
    // i used an ajax call to open the url from the servlet as follows:

    $.ajax({
                    type : 'GET',
                    url : '/servlet',
                    contentType: "text/xml; charset=utf-8",
                    dataType : 'xml',
                    data: {
                        action : 'googleLogin',
                        apiURL : 'https://www.googleapis.com/oauth2/v1/userinfo?' + queryStringArray[0]

                    },
                    success : function(xmlData){
                           
                    }
        });
    }else if(queryStringArray[0].split("=")[0] == "error"){
        alert("You haven't approve the app to access your account info");
        location = "your_login_page";
    }

    In your Servlet, handle the ajax action in a method as follows:

    public void getUserData() {

    URL url = new URL(request.getParameter("apiURL"));
    URLConnection conn = url.openConnection ();
    BufferedReader rd = new BufferedReader(new InputStreamReader(conn.getInputStream()));
    StringBuffer sb = new StringBuffer();
    String line;
    while ((line = rd.readLine()) != null)
    {
        sb.append(line);
    }
    rd.close();
    String result = sb.toString();
    String userData = parseUserInfoOAuthResponse(result);
}

The "result" string will contain all the user profile information, like his first name , last name, email. You need to parse this data from the string.

It is obvious that Google will never allow you to access user's password, hence you will have to create a random password for the user account, which he can change anytime later.

How to use FaceBook Login for your App

You need to register your app on FaceBook first to get identified by FaceBook.
Register here !

(App Registration procedure is discussed in http://bashwithflash.blogspot.in/2012/05/photo-sharing-on-facebook-using-graph.html)

In the login page of your application, open the following request url (either by button-click, href, ajax, get request, or window.open)

"https://www.facebook.com/dialog/oauth/authorize?client_id=YOUR_APP_ID&redirect_uri=http%3A%2F%2Fwww%2Eappdomain%2Ecom%2F&scope=email,read_stream"

You will be prompted by Facebook to permit the app to access your FB account. If you reject, FB will send you an error, else it will send you an access code along with the return url. Since your scope was "email" in the above request url, you will get to know user's basic account details, like his username, email, first name, last name.

You must provide a redirect url for a file where you want to start a proper user session (as when the user is logged in). There you should check whether FB has provided you an access code or not in the return url.

Once you have received an access code it means you have permitted the app to use your Facebook account to access your basic details. Write the following code in your return url file.


<div id="fb-root"></div>
<script src="https://connect.facebook.net/en_US/all.js" type="text/javascript"></script>

<script>
    $(document).ready(function () {
        FB.init({
          appId      : 'YOUR_APP_ID', // App ID
          channelURL : 'URL_TO_CHANNEL_FILE', //must be in your domain
          status     : true, // check login status
          cookie     : true, // enable cookies to allow the server to access the session
          oauth      : true, // enable OAuth 2.0
          xfbml      : true  // parse XFBML
        });

        FB.getLoginStatus(function (response) {
            if(response.status == "unknown")
            {
                //user is not logged in to FaceBook
            }
            else if (response.status == "not_authorized")
            {
                //user has not authorized the app to access his account
            }
            else if (response.status == "connected")
            {
                if (response.authResponse) {
                    FB.api('/me', function(response) {
                        //user first name = response.first_name
                        //user last name = response.last_name
                        //user email = response.email
                        alert("Welcome " + response.first_name + " " + response.last_name);
                    });
                } else {
                    // can show a login prompt
                }
            }
        });
   });
</script>


If FB returns the login status as connected, you can retrieve the user details as response.first_name, response.last_name, response.email, which you can use to create the user's account on your app.

It is obvious that FB will never allow you to access user's password, hence you will have to create a random password for the user account, which he can change anytime later.

Album Sharing on Facebook using Graph API - Javascript Implementation

Single photo sharing was discussed in the previous post where the photos were posted to the default "Your_registered_app_name Photos" album.

There may be a case, when your app has multiple photo albums and the user wants to retain the album structure while sharing them. This is achieved by first creating an album, and then posting photos to it.

The API calls remain almost the same here except for creation of albums, retrieving their id's and posting photos to those ids.

Step 1: Create an Album

To post the photos into an album, you first need to have an album created on Facebook.

Add an OnClick event to the album you want to post to your Facebook account. Write the following code in the function where you are handling the OnClick event.

FB.api('/me/albums', 'post',
{
    name: 'Your_Album_Name'
}, function(response) {
    if (!response || response.error) {
        alert('Error! Please Try Again');
    } else {
        alert("Album Id ::" + response.id);
    }
    }
);

'response.id' returns you the ID of the Album created. If you check it over Facebook account, you will find an empty album 'Your_Album_Name'.

Step 2: Posting Photos To The Album

var imgURL = "YOUR_IMAGE_URL";
FB.api('/' + ALBUM_ID +'/photos', 'post', {
    message: 'photo_description',
    access_token: accessToken,
    url: imgURL
}, function (response) {
    if (!response || response.error) {
        alert('Error! Please Try Again');
    } else {
        alert('Photo Posted');
    }
    }
);

The photo is posted to the album created in your Facebook account.

Photo Sharing on Facebook using Graph API - Javascript Implementation

For quite some time I have been working on the Graph APIs by Facebook, and have so far successfully conquered to integrate them to an app I am working on.

An initial quick read is must whoever wants to use the Graph APIs. Understanding the APIs is important before you start making use of them for your applications.

How to implement Facebook Photo Sharing using Graph API in Javascript?

I am discussing sharing of photos alone in this post. Sharing of photos along with the album will be posted soon.

Register your app on Facebook and get your app credentials.

Step 1: Register your app on Facebook here.
Step 2: When you provide an app name, an App ID and App Secret Key is generated for your app. You are not suppose to disclose your app key and app secret key with any one.
Step 3: You are now required to provide your site domain. For Facebook to act as an OpenID url for your app users, you have to provide you site url as well. For testing/development phase you can provide your app domain as localhost and your site url as http://localhost:80 (or the appropriate server port).

*Even a small discrepancy in the site domain/url will not give proper results on using the Graph APIs. Hence you have to be very careful when providing the app details.

Seek user's permission to authorize the app for sharing your photos on Facebook.

Step 1: In your JSP file, add the following code:

<div id="fb-root"></div>
<script src="https://connect.facebook.net/en_US/all.js" type="text/javascript"></script>
<script>
  $(document).ready(function () {
      FB.init({
      appId      : 'YOUR_APP_ID', // App ID
      channelURL : 'URL_TO_CHANNEL_FILE', //must be in your domain
      status     : true, // check login status
      cookie     : true, // enable cookies to allow the server to access the session
      oauth      : true, // enable OAuth 2.0
      xfbml      : true  // parse XFBML
    });
 });
</script>

Note: The channelURL points to a file that you add to your local directory which helps improve communication speed in some older browsers. Without the channelURL , we are forced to use workarounds such as loading a second copy of the webpage in a hidden iframe to properly load social plugins. The workarounds increase load times and inflate referral traffic from Facebook.

Once you have initialized your Facebook APIs, it is time for the user to know that he can share his photos on Facebook if he permits your app to do so.

Step 2: Write the following Javascript code to know that user->app->facebook authorization status.

FB.getLoginStatus(function (response) {
       
        if(response.status == "unknown")
        {
            //user is not logged into facebook
         }
        else if (response.status == "not_authorized")
        {
            //user has not authorized the app to access his account
        }
        else if (response.status == "connected")
        {
            if (response.authResponse) {
                alert(response.authResponse.accessToken);
                setAccessToken(response.authResponse.accessToken);
            }
        }
    });


If you get the login status as "unknown", it means that no user is logged-in to Facebook on the current browser. So, the user is suppose to log-in.

If you get the login status as "not_authorized", it means that a user is logged in to Facebook on the same browser, but has not authorized the app to share photos. Hence you should prompt the user to a url which will allow your app to share the photos. The url looks like:

https://www.facebook.com/dialog/oauth/authorize?client_id=YOUR_APP_ID&redirect_uri=http%3A%2F%2Fwww%2Esomedomain%2Ecom%2Fdomainpage%2Ejsp&scope=user_photos,read_stream"

If you get the login status as "connected", it means that a user is logged in and has authorized the app for photo sharing. Along with the status "connected" you will receive an access token from Facebook, which will allow the user to post photos to his Facebook account.


Final step to Photo Sharing

Once login/authorization is done and the access token is received, you can go ahead and post your photos using the following Graph API:

<script>

var accessToken = "";

function setAccessToken(at){
   accessToken = at;
}

function sharePhoto( ) {

var imgURL = "http://www.someimageurl.com";
    FB.api('/photos', 'post', {
        message: 'some photo description',
        access_token: accessToken, // response.authResponse.accessToken
        url: imgURL
    }, function (response) {
        if (!response || response.error) {
            alert('Error!' + response.error.message);
        } else {
            alert('Photo Posted');
        }

    });
}

</script>


And your photo is posted on Facebook!

Facebook creates an album called "Your_app_name" Photos. Any photo sharing request from your app posts the photo by default into this album.

If you open your Facebook account, you will not see the photos immediately in your album list. You have to check your albums, approve these photos posted from your app to be shared by your Facebook account, for your friends to view. Any unapproved photo is not visible to public. This is a security check by Facebook, so as to prevent any leakage of private data by the app.

Shoot an email/comment for any queries!