Thursday, November 21, 2013

OAuth2 with LinkedIn

OAuth2 basically allows third party application, to access protected resource of a specific user. You may have seen some web applications/sites allows you to login through your Google, Facebook, LinkedIn etc accounts. As an example just try this with any mentioned account (Google, Facebook, Yahoo etc.). After giving your username password credentials you will be notified the authorities which the third party application will get if you agreed to proceed.

Some important term definitions in OAuth2:
  • Resource Owner - The person/entity which capable of granting the access to a protected resource.
  • Resource Server - The server which contains the protected resources, and capable of deal with access tokens in protected resource requests.
  • Client - The application which requests for protected resources on behalf of resource owner.
  • Authorization Server - The server which authorize resource owner, and issue access tokens to the client

Following figure shows basic flow of OAuth2 authentication process.




If you are really interested in digging more details, OAuth2 RFC will be the best resource. I strongly recommend you to go through at least up to 1.6 section in the RFC.

With this blog post, I show you how third party java application can access protected LinkedIn resources.

1. Register an application on LinkedIn. - This basically helps to create a link between LinkedIn and your application (third party application).

2. Get an access token - The access token represent the credentials to access protected resources. So your application does not need to store resource owner's credentials, but the access token.

3. Make API calls - Yes, after obtaining access token you are free to call API methods with that, until it expires.

LinkedIn official documentation contains detailed description on the above steps. You can follow those and familiar with this matter. Make sure you tried both Authorization code request and Access token request.

Now we need our application to store access token. For this we have to do some coding in the application. We can easily get authorization code with a GET request. Then we need a POST request to get access token using the authorization code and other required parameters.

So, we can get the authorization code from request parameters in the redirect uri, and make server side code request to get the access token. For this we have to use a HTTP client library. You can use Apache HTTP client library components to approach this. For process the responce you can use XML parser like DOM or SAX. Try out the sample application yourself after reaing README file. Happy coding !


Thanks to mkyong for making me comfortable with his SpingMVC example.

Tuesday, January 8, 2013

Limit textarea character count in IE8

   After long time I'm going to start blogging again. Yes, it's on your favorite browser IE :). As you know, with HTML 5 there is lots of additional features support for major browsers except IE. However it's nice to hear that IE10 is having more support for HTML 5.

     With the HTML 5, maxlength attribute was introduced for textarea HTML element. But IE 8 does not have support for this. I did some work around to find a simple solution for this and seems I found it.

    Make sure you are using HTML 5 doctype. Note that I have target only IE here, but not the already support browser for maxlength attribute in teaxtarea elements.

<!DOCTYPE HTML>
<html>
  <head>
    <script type="text/javascript">
      function getCaret(el) {
        if (el.selectionStart) {
          return el.selectionStart;
        } else if (document.selection) {
          el.focus();
          var r = document.selection.createRange();
    
          if (r == null) {
            return 0;
          }
    
          var re = el.createTextRange(),
          rc = re.duplicate();
          re.moveToBookmark(r.getBookmark());
          rc.setEndPoint('EndToStart', re);
          return rc.text.length;
        }
        return 0;
      }
 
      function limitPasteData(obj, limit) {
        // Do it with Internet Explorer
        if (window.clipboardData) {
          if (document.selection && document.selection.createRange) {
            obj.focus();
            var modifiedTxtLen;
            // If text has been selected
            if (document.selection.createRange().text.length > 0) {
              modifiedTxtLen = obj.value.length - document.selection.createRange().text.length + window.clipboardData.getData("Text").length;
    
              if (modifiedTxtLen > limit) {
                var neededLen = limit - (obj.value.length - document.selection.createRange().text.length);
                document.selection.createRange().text = window.clipboardData.getData("Text").substring(0, neededLen);
                return false;
              }
            } else {
              modifiedTxtLen = obj.value.length + window.clipboardData.getData("Text").length;
              if (modifiedTxtLen > limit) {
                var neededLen = limit - obj.value.length;
                var neededTxt = window.clipboardData.getData("Text").substring(0, neededLen);
                var mofifiedText = obj.value.substring(0, getCaret(obj)) + neededTxt + obj.value.substring(getCaret(obj), obj.value.length);
                obj.value = mofifiedText;
                return false;
              }
            }
            // If not exceed limit just paste it
            return true;
          }
        }
      }
    
      function limitTypingData(obj, limit) {
        // Other browsers may have support for maxlength attribute
        if (navigator.appName == 'Microsoft Internet Explorer') {
          if (obj.value.length > (limit - 1)) {
   
            if (document.selection && document.selection.createRange) {
              obj.focus();
              // If only text has been selected, allow to type once
              if (document.selection.createRange().text.length > 0) {
                return true;
              }
            }
            return false;
          }
        }
      }
    </script>
  </head>
  <body>
    <textarea id="txtArea" cols="20" rows="5" maxlength="15"
        onpaste="return limitPasteData(this, 15);"
        onkeypress="return limitTypingData(this, 15);" ></textarea>
  </body>
</html>

       But remember that the behavior of these functions in IE8 will not 100% equal to default maxlength behavior of supporting browsers. But we can still do the work with this.

Apart from that I would like to notice you that, new line character(s) may be changed in IE than others. IE always take it as '\n\r' and other browsers may take it as '\n'. So that, either you have to handle that or use additional space from the back end database fields.

Have a fun with IE 8 :D