http Request Archives | Codeexecute

All about HTTP cookies

What is HTTP cookie?

When a server communicates with client’s computer then for identification sever needs  some sort of unique token from client side to identify specific client server and here comes the role of cookies. SO what are cookies. According to MDN

An HTTP cookie (web cookie, browser cookie) is a small piece of data that a server sends to the user’s web browser. The browser may store it and send it back with the next request to the same server. Typically, it’s used to tell if two requests came from the same browser — keeping a user logged-in, for example. It remembers stateful information for the stateless HTTP protocol.

So the server send the specific data to client end and then client browser use this data in further requests to provide it’s unique idenity to server. In this way when a browser requests a web page from a server, cookies correspoding to the website  is added to the http request and server returns the unique data for the request.

Application of Cookies

  1. Session management : Login details/session,
  2. Personalization: User preferences, themes, and other settings
  3. Tracking: User behaviour on site

Secure Cookies (HTTPOnly cookies )

These cookies are sent win an encrypted form over network and these cookies can’t be read / modify by client side JS. For this type of cookies user can’t access using them by document.cookie() API and for theese cookies HTTPOnly flag is set to true.

Check cookie in gogole chrome inspect tool:

http-cookie

  1. Go to google devloper console (ctrl+shift+I)> Application
  2. In left panel Storage> cookies click on site you want to check the cookies
  3. You can check the mutiple cookies for the site google.com in the right panel
  4. There are some cookies for which the http column is set as true , these are HttpOnly cookies.

How to set cookies and get cookies using JS

cookies are stored as name value pair


userToken=hzbfzjhfzjdfh6576579090910jhjsdhj65

Create a cookie


document.cookie = "userToken=hzbfzjhfzjdfh6576579090910jhjsdhj65; expires=Thu, 17 June 2018 12:00:00 UTC";

Read a cookie


var myPageCookie = document.cookie;

P.S. For further lnformation please refer MDN 

 

 

LinkedIn Login through Javascript

Requirement- Client Id

// Initialize linkedin API
<script type="text/javascript" src="http://platform.linkedin.com/in.js">
 api_key: CLIENT ID
 authorize: true
 scope: r_basicprofile r_emailaddress
 onLoad: onLinkedInLoad
</script>
<script type="text/javascript">
  // After Authentication of Account
 function onLinkedInLoad() {
 IN.Event.on(IN, "auth", getProfileData);
 }

 //After successfully Login 
 function onSuccess(data) {
 console.log(data);
  
 }

 // Error in API call
 function onError(error) {
 console.log(error);
 }

 // Get the needed Data
 function getProfileData() {
 IN.API.Raw("/people/~:(id,email-address,first-name,last-name,formatted-name)").result(onSuccess).error(onError);
 }
// destroy the session of linkedin
function closeSession(){
 IN.User.logout();
 return true;
}
</script>
<script type="in/Login"></script>

For custom Button

<script type="text/javascript">
//Invoke login window
function liAuth(){
 IN.User.authorize(function(){
 callback();
 });
}
</script>
<input type="button" onclick="liAuth()" value="Login"/>
 

How to add the page loader in angularJS??

To add the page loader , we need to determine the http request sent by us has been responded or not.

For this simple query we need to evaluate just the value of following expression.

$http.pendingRequests.length.

Following directive can be used anywhere to install loader the page on loading:-

Example:-

angular.module('myApp.loading',[])

   .directive('loading',   ['$http' ,function ($http)
    {
        return {
            restrict: 'A',
            link: function (scope, elm, attrs)
            {
                scope.isLoading = function () {
                    return $http.pendingRequests.length > 0;
                };

                scope.$watch(scope.isLoading, function (v)
                {
                    if(v){
                        elm.show();
                    }else{
                        elm.hide();
                    }
                });
            }
        };

    }]);

In View Page :-

Where spinner is the class you want to add as animation or loading image.

More about
Http Request