Monday, September 17, 2012

How to implement "Remember Me" or "Keep Me Signed In" option for your Web Application - JAVA Example

Most of the web applications that we see these days, have the "Remember Me" option, that keeps the user signed in. If you "check" this option, and do not log-out from the application, you will automatically be signed-in without being prompted to enter the username and password.

People usually believe that it is the browser related thing and need not be written in your application code.
It is true that it is related to the browser, but at the same time your application can interact with the browser properties to retrieve the useful data.

Suppose I have a web application, where-in the log-in page, there is an option for the user to command us to keep him signed in. In the html form where you ask the user his log-in credentials, add a checkbox with id and name as "rememberMe". If the user selects it, then a non-null value will be passed with your form for that field.

Put the following code in the jsp to which you are submitting the form:

if(request.getParameter("rememberMe")!= null){
    bytes [] bytes = request.getParameter("username") + ":" + request.getParameter("password")).getBytes();
    String encodedCredentials = Base64.encode(bytes, 0, bytes.length);
    Cookie cookie=new Cookie("myCookieName", encodedCredentials);
    cookie.setMaxAge(60 * 60 * 24 * 15);
    response.addCookie(cookie);
}

Get the values of the username and password, and encode them using an encoder(in my case I used a Base64 encoder), so that the username and password are not saved as a naive string. Then I create an instance of Cookie class, and pass my cookie name and the encoded credentials (key-value mapping), which I want to save. I set the maximum validity of this cookie as 15 days (you can set it for even longer time). After this I add this cookie instance to my HTTP response. This cookie is now saved in my browser.


Now I will write the following piece of code on my home page.


try{
    Cookie[] cookies = request.getCookies();
    for (int i = 0; i < cookies.length; i++) {
        Cookie cookie = cookies[i];
        if (cookie.getName().equals("myCookieName")) {
        if(cookie.getValue()!= "" && cookie.getValue().length() > 0){
            try{
            response.sendRedirect("your_authentication_page.jsp?cookieEnabled=" + cookie.getValue());
            }catch(Exception e){
            e.printStackTrace();
            }
        }
        }
    }
    }catch(Exception e){
     e.printStackTrace();
}

This code tries to read the name all the cookies saved in the browser. If the name matches with the one that you have given for your application, then you know that some user credentials are already saved. You pass on the value of the cookie to your authentication page. Write the following code snippet in your authentication page.

if(request.getParameter("cookieEnabled")!=null){
    boolean bAuthenticated = false;
    String credentials = request.getParameter("cookieEnabled");
    if (credentials != null) {
        String decodedCredentials = new String(Base64.decode(credentials));
        String credArray[] = decodedCredentials.split(":");
        bAuthenticated = function_to_authenticate_user(credArray[0], credArray[1]);
    }
}


You have passed encoded credentials (as your cookie value, which you have saved previously), to your authentication page. You can now decode those credentials and call your function that authenticates the user and automatically land him to your logged-in home page. Easy!

Shoot your doubts right here!

Monday, May 28, 2012

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"; 

Thursday, May 24, 2012

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.

Friday, May 11, 2012

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.

Wednesday, May 9, 2012

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.

Friday, May 4, 2012

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!

Wednesday, April 18, 2012

Replacing Library Items In Flash!

Whenever you try to copy an item to the fla library, which already has one with the same name, you get the following window and are prompted to check any one of the follwoing option


Let us assume a case where any one of your symbol/movie clip, say "Symbol 1", has become corrupted, or may be there are some issues with that, so you need to either replace it, or copy it afresh to the library. Also assume that due to some reasons you had already created one copy of the symbol in the library. So we have two similar items now, "Symbol 1" and "Symbol 1 copy". If you copy the same item from somewhere else it displayes the above window. If you select the first option," Don't replace existing item", it creates a copy of it as "Symbol 1 copy". Note that this existing symbol was already there. So both the items will be same and both will be corrupted. Even the freshly copied item becomes corrupted.

If you had selected the other option, what I experienced was that even after that, the copied item was corrupted. But in most of the cases it has worked for me. So the safest option was, that I deleted all the items by that name and all the copies of that, and copied the correct item afresh from a different file.

*****Please note that corrupted item here means that its not the desired movie/symbol or something has been changed in it which you do not need anymore.

Sunday, December 18, 2011

More Flash Inteview Questions

Q11. Can you read a remotely placed sound file? Where will you store the location of the sound file?
Ans: Yes, the server will store the location of the sound file, and will send it to the client whenever required.

Q12. How do you use Tweening?
Ans: Refer to the post: http://bashwithflash.blogspot.com/2011/01/tweening-part-i.html

Q13. How do you use drag and drop in action script?
Ans: The following piece of code starts the drag for myMC display object when mouse is clicked over it, and stops the drag when the mouse is released up.

    myMC.addEventListener(MouseEvent:CLICK, onMouseClick, false, 0 , true);
    myMC.addEventListener(MouseEvent:MOUSE_UP, onMouseClick, false, 0 , true);

    function onMouseClick(e:MouseEvent)
    {
        startDrag(this);
    }
   
    function onMouseUp(e:MouseEvent)
    {
        stopDrag();
    }

Q14. What is the use of preloader? How can you create one?
Ans: Refer to the post: http://bashwithflash.blogspot.com/2011/01/creating-your-own-flash-preloader.html

Q15. What are the different design patterns available in flash?
Ans: 

    1) Factory Method Pattern
    2) Singleton Pattern
    3) Decorator Pattern
    4) Adapter Pattern
    5) Command Pattern
    6) Observer Pattern
    7) Strategy Pattern
    8) Template Method Pattern
    9) State Pattern
    10) ModelViewController Pattern
    11) Symmetric Proxy Pattern
    12) Composite pattern
   

Q16. What is the purpose of bitmap caching?
Ans: Refer to the post: http://bashwithflash.blogspot.com/2010/12/when-does-it-make-sense-to-use-bitmap.html

Q17. Which ActionScript method should be used to bring a component from the library to the stage?
Ans: attachMovie

Q18. Describe Event Flow in flash.
Ans: The event flow is conceptually divided into three parts.
    1) Capture phase: This phase comprises all of the nodes from the Stage to the parent of the target node.
    2) Target phase: This phase consists solely of the target node.
    3) Bubbling phase: This phase comprises the nodes encountered on the return trip from the parent of the target node back to the Stage.

Q19. How do you create pop-up window in flash?
Ans: The following piece of code opens up a new window on the click of "myMC" display object.

    myMC.addEventListener(MouseEvent:CLICK, onMouseClick, false, 0 , true);

    function onMouseClick(e:MouseEvent):void {
            ExternalInterface.call("window.open", "http://bashwithflash.blogspot.com/", "win", "width=500,height=500");
        }

Q20. Explain the difference between Stream Sound and Event Sound.
Ans: Refer to the post: http://bashwithflash.blogspot.com/2010/12/sound-bound.html

Thursday, December 15, 2011

Flash Interview Questions

This post mainly deals with the most popular flash interview questions that we come across now. Hope it fulfills the purpose.

Q1. What is the default frame rate?
Ans: The default frame rate is 24 frames per second (fps) for the new versions. In previous versions of Flash, the default frame rate is 12 fps.

Q2. From which version of Adobe flash player, you see the compatibility of AS 3.0?
Ans: Flash Player Version 9

Q3. How many types of symbols can be there in any flash application? Name them.
Ans: 3, namely, Button, Movieclip and Graphic.

Q4. How does the it affect the frame rates of a swf file when it is loaded into another?
Ans: The new swf file takes the frame rate of the parent swf file and runs with that.

Q5. How can you change the frame rate with the help of code, with and without using the stage property?
Ans: Refer to the post: http://bashwithflash.blogspot.com/2011/09/frames-and-frame-rates.html

Q6. Why do we need to embed fonts to a dynamic text field?
Ans: Refer to the post: http://bashwithflash.blogspot.com/2010/12/dynamic-text-look-and-feel.html

Q7. How are _root and _level different?
Ans: Refer to the post: http://bashwithflash.blogspot.com/2011/08/root-and-level.html

Q8. How are _root and parent different?
Ans: "_root" is the main timeline of the currently active movie. "parent" is the container movie of the currently active movie clip.

Q9. Write a code sample to draw line between the given two points?
Ans: We use the "lineTo(x,y)" API. Here is the example code:

    var mc:Sprite = new Sprite();
    mc.x = 50;
    mc.y = 50;
    this.addChild(mc);
    mc.graphics.lineTo(100,100);

This sample code defines a movie clip at (50,50), and draws a line from this point to (100,100). Now line is the mc. We can further draw more lines to other points also.

Q10. How do you add listener to a particular display object? What are the arguments that you need to pass to the listener?
Ans: Refer to the post: http://bashwithflash.blogspot.com/2011/01/capturing-events-in-flash-as3-part-ii.html


Apart from the above questions, OOP concepts are also asked. The candidate might also be asked to make a small flash application.

Readers are most welcome to make any correction to the answers they think is wrong. Also keep adding the questions too.

*More questions to follow soon in the next post.