API tools faq
paste
obernardovieira

Google+ Login button [get info with JS]

obernardovieira
Jan 2nd, 2014
209
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 3.36 KB | None | 0 0
raw download clone embed print report
  1. <html>
  2. <head>
  3.     <title>Demo: Getting an email address using the Google+ Sign-in button</title>
  4.     <style type="text/css">
  5.         html, body { margin: 0; padding: 0; }
  6.         .hide { display: none;}
  7.         .show { display: block;}
  8.     </style>
  9.     <script type="text/javascript">
  10.     /**
  11.     * Global variables to hold the profile and email data.
  12.     */
  13.     var profile, email;
  14.  
  15.     /*
  16.     * Triggered when the user accepts the sign in, cancels, or closes the
  17.     * authorization dialog.
  18.     */
  19.     function loginFinishedCallback(authResult) {
  20.         if (authResult) {
  21.             if (authResult['error'] == undefined){
  22.                 toggleElement('signin-button'); // Hide the sign-in button after successfully signing in the user.
  23.                 gapi.client.load('plus','v1', loadProfile);  // Trigger request to get the email address.
  24.             } else {
  25.                 console.log('An error occurred');
  26.             }
  27.         } else {
  28.             console.log('Empty authResult');  // Something went wrong
  29.         }
  30.     }
  31.  
  32.     /**
  33.     * Uses the JavaScript API to request the user's profile, which includes
  34.     * their basic information. When the plus.profile.emails.read scope is
  35.     * requested, the response will also include the user's primary email address
  36.     * and any other email addresses that the user made public.
  37.     */
  38.     function loadProfile(){
  39.         var request = gapi.client.plus.people.get( {'userId' : 'me'} );
  40.         request.execute(loadProfileCallback);
  41.     }
  42.  
  43.     /**
  44.     * Callback for the asynchronous request to the people.get method. The profile
  45.     * and email are set to global variables. Triggers the user's basic profile
  46.     * to display when called.
  47.     */
  48.     function loadProfileCallback(obj) {
  49.         profile = obj;
  50.  
  51.         // Filter the emails object to find the user's primary account, which might
  52.         // not always be the first in the array. The filter() method supports IE9+.
  53.         email = obj['emails'].filter(function(v) {
  54.             return v.type === 'account'; // Filter out the primary email
  55.         })[0].value; // get the email from the filtered results, should always be defined.
  56.         displayProfile(profile);
  57.     }
  58.  
  59.     /**
  60.     * Display the user's basic profile information from the profile object.
  61.     */
  62.     function displayProfile(profile){
  63.         document.getElementById('name').innerHTML = profile['displayName'];
  64.         document.getElementById('pic').innerHTML = '<img src="' + profile['image']['url'] + '" />';
  65.         document.getElementById('email').innerHTML = email;
  66.         toggleElement('profile');
  67.     }
  68.  
  69.     /**
  70.     * Utility function to show or hide elements by their IDs.
  71.     */
  72.     function toggleElement(id) {
  73.         var el = document.getElementById(id);
  74.         if (el.getAttribute('class') == 'hide') {
  75.             el.setAttribute('class', 'show');
  76.         } else {
  77.             el.setAttribute('class', 'hide');
  78.         }
  79.     }
  80.     </script>
  81.     <script src="https://apis.google.com/js/client:plusone.js" type="text/javascript"></script>
  82. </head>
  83. <body>
  84.     <div id="signin-button" class="show">
  85.         <div class="g-signin"
  86.             data-callback="loginFinishedCallback"
  87.             data-approvalprompt="force"
  88.             data-clientid="YOUR_CLIENT_ID"
  89.             data-scope="https://www.googleapis.com/auth/plus.login https://www.googleapis.com/auth/plus.profile.emails.read"
  90.             data-height="short"
  91.             data-cookiepolicy="single_host_origin"
  92.         >
  93.         </div>
  94.         <!-- In most cases, you don't want to use approvalprompt=force. Specified
  95.         here to facilitate the demo.-->
  96.     </div>
  97.  
  98.     <div id="profile" class="hide">
  99.         <div>
  100.             <span id="pic"></span>
  101.             <span id="name"></span>
  102.         </div>
  103.  
  104.         <div id="email"></div>
  105.     </div>
  106. </body>
  107. </html>
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!