Dotnet Developers: January 2014

<html>
<head>
<title>Demo: Getting an email address using the Google+ Sign-in button</title>
<style type="text/css">
html, body { margin: 0; padding: 0; }
.hide { display: none;}
.show { display: block;}
</style>
<script type="text/javascript">
      /**
      * Global variables to hold the profile and email data.
      */
      var profile, email;

      /*
      * Triggered when the user accepts the sign in, cancels, or closes the
      * authorization dialog.
      */
      function loginFinishedCallback(authResult) {
          if (authResult) {
              if (authResult['error'] == undefined) {
                  toggleElement('signin-button'); // Hide the sign-in button after successfully signing in the user.
                  gapi.client.load('plus', 'v1', loadProfile); // Trigger request to get the email address.
              } else {
                  console.log('An error occurred');
              }
          } else {
              console.log('Empty authResult'); // Something went wrong
          }
      }

      /**
      * Uses the JavaScript API to request the user's profile, which includes
      * their basic information. When the plus.profile.emails.read scope is
      * requested, the response will also include the user's primary email address
      * and any other email addresses that the user made public.
      */
      function loadProfile() {
          var request = gapi.client.plus.people.get({ 'userId': 'me' });
          request.execute(loadProfileCallback);
      }

      /**
      * Callback for the asynchronous request to the people.get method. The profile
      * and email are set to global variables. Triggers the user's basic profile
      * to display when called.
      */
      function loadProfileCallback(obj) {
          profile = obj;
          console.log(obj);

          // Filter the emails object to find the user's primary account, which might
          // not always be the first in the array. The filter() method supports IE9+.
          email = obj['emails'].filter(function (v) {
              return v.type === 'account'; // Filter out the primary email
          })[0].value; // get the email from the filtered results, should always be defined.
          displayProfile(profile);
      }

      /**
      * Display the user's basic profile information from the profile object.
      */
      function displayProfile(profile) {
          document.getElementById('name').innerHTML = profile['displayName'];
          document.getElementById('name').innerHTML = profile['name']['givenName'] + " - " + profile['name']['familyName'];
          document.getElementById('pic').innerHTML = '<img src="' + profile['image']['url'] + '" />';
          document.getElementById('email').innerHTML = email;

          if (profile['language'] == 'en')
              document.getElementById('launguage').innerHTML = "English";
          else
              document.getElementById('launguage').innerHTML = "French";

          if (profile['placesLived'][0].value != "undefine");
          document.getElementById('PlacesLived').innerHTML = profile['placesLived'][0].value;

          toggleElement('profile');
      }

      /**
      * Utility function to show or hide elements by their IDs.
      */
      function toggleElement(id) {
          var el = document.getElementById(id);
          if (el.getAttribute('class') == 'hide') {
              el.setAttribute('class', 'show');
          } else {
              el.setAttribute('class', 'hide');
          }
      }
</script>
<script src="https://apis.google.com/js/client:plusone.js" type="text/javascript"></script>
</head>
<body>
<div id="signin-button" class="show">
     <div class="g-signin"
      data-callback="loginFinishedCallback"
      data-approvalprompt="force"
      data-clientid="656942774761-v378l3ad6pm3q6k3s0hrfbd4dl4tq4te.apps.googleusercontent.com"
      data-scope="https://www.googleapis.com/auth/plus.login https://www.googleapis.com/auth/plus.profile.emails.read"
      data-height="short"
      data-cookiepolicy="single_host_origin"
      >
    </div>
    
</div>

<div id="profile" class="hide">
    <div>
      <span id="pic"></span>
      <span id="name"></span>
    </div>

    <div id="email"></div>
    <div id="launguage"></div>
    <div id="PlacesLived"></div>
</div>
</body>
</html>

Create Project with this Link

https://cloud.google.com/console/project

Then Follow the step

APIs & auth Tab --> Credentials Client ID for web application Edit Settings of (Redirect URIs & Javascript Origins) Here write url of your site where to use.

Dotnet Developers

Thursday, 9 January 2014

Facebook Sign In Button

Google Plus Sign In Button