Profiel informatie ophalen

1. Wat hieraan voorafgaat
   Om deze les te kunnen volgen heb je OAuth 2.0 voor client-side web applicaties doornomen en het voorbeeld zelf gemaakt. Verder moet je de Google People API activeren op de Google Developer Console (zie daarvoor Een Google API activeren).
2. Beschrijving
   Nadat de gebruiker is aangemeld kan je op twee manieren zijn of haar gegevens ophalen:
   1. je laad de people api in:
      de methode makePeopleApiCall vind je hieronder
   2. Je gebruikt de getBasicProfile methode:
      de methode showUserProfile vind je hieronder
   3. gebruik de twee methoden in de opdracht
3. Stappenplan
   1. Bronnen
      1. Getting profile information
      2. Google API Client Libraries JavaScript - Getting Started
   2. JavaScript code
      1. In een bestand met de naam google-oauth-api.js in de map js plaats je de JavaScript code. De apiKey en de clientId zijn die van mijn Google account. Je kan gebruiken om de code te testen maar voor de opdracht gebruik je een eigen apiKey en clientID:

         // Enter an API key from the Google API Console:
         //   https://console.developers.google.com/apis/credentials?project=_
         // Enter an API key from the Google API Console:
         //   https://console.developers.google.com/apis/credentials?project=_
         var apiKey = 'AIzaSyDx-m6cpF2b-aDz_D_DqS9-Z3KbHGEUIf8';
         
         // Enter a client ID for a web application from the Google API Console:
         //   https://console.developers.google.com/apis/credentials?project=_
         // In your API Console project, add a JavaScript origin that corresponds
         //   to the domain where you will be running the script.
         var clientId = '567196011386-np3nt5nng9oeokfbk8medpf42u2iun6c.apps.googleusercontent.com';
         // Enter one or more authorization scopes. Refer to the documentation for
         // the API or https://developers.google.com/identity/protocols/googlescopes
         // for details.
         var scopes = 'profile';
         
         var signinButton = document.getElementById('signin-button');
         var signoutButton = document.getElementById('signout-button');
         
         function handleClientLoad() {
             // Load the API client and auth library
             gapi.load('client:auth2', initAuth);
         }
         
         function initAuth() {
             // gapi.client.setApiKey(apiKey);
             gapi.auth2.init({
                     'apiKey': apiKey,
                     client_id: clientId,
                     scope: scopes
                 }).then(function() {
                     // Listen for sign-in state changes.
                     gapi.auth2.getAuthInstance().isSignedIn.listen(updateSigninStatus);
                     // Handle the initial sign-in state.
                     updateSigninStatus(gapi.auth2.getAuthInstance().isSignedIn.get());
                     signinButton.addEventListener("click", signin);
                     signoutButton.addEventListener("click", signout);
                 }).catch(function(e) {
                     alert(e.details);
                 });
         }
         
         function updateSigninStatus(isSignedIn) {
             if (isSignedIn) {
                 signinButton.style.display = 'none';
                 signoutButton.style.display = 'block';
                 makePeopleApiCall();
                 showUserProfile();
             }
             else {
                 signinButton.style.display = 'block';
                 signoutButton.style.display = 'none';
                 deleteUserProfile();
             }
         }
         
         function signin(event) {
             gapi.auth2.getAuthInstance().signIn();
         }
         
         function signout(event) {
             var auth2 = gapi.auth2.getAuthInstance();
             auth2.signOut().then(function () {
                 auth2.disconnect();
             });
         }
         
         // Load the API and make an API call.  Display the results on the screen.
         function makePeopleApiCall() {
             gapi.client.load('people', 'v1', function() {
                 var request = gapi.client.people.people.get({
                     resourceName: 'people/me',
                     'requestMask.includeField': 'person.names'
                 });
                 request.execute(function(resp) {
                     var p = document.createElement('p');
                     if (resp.names) {
                         var name = resp.names[0].givenName;
                     }
                     else {
                         var name = 'Geen naam gevonden';
                     }
                     p.appendChild(document.createTextNode('Hello, ' + name + '!'));
                     document.getElementById('content').appendChild(p);
                     // Toon het response object als JSON string
                     var pre = document.createElement('pre');
                     var feedback = JSON.stringify(resp, null, 4);
                     pre.appendChild(document.createTextNode(feedback));
                     document.getElementById('content').appendChild(pre);
                 });
             });
         }
         
         function showUserProfile(resp) {
             // Note: In this example, we use the People API to get the current
             // user's name. In a real app, you would likely get basic profile info
             // from the GoogleUser object to avoid the extra network round trip.
             var profile = gapi.auth2.getAuthInstance().currentUser.get().getBasicProfile();
             var h1 = document.createElement('h1');
             h1.appendChild(document.createTextNode(profile.getId()));
             document.getElementById('content').appendChild(h1);
             var h2 = document.createElement('h2');
             h2.appendChild(document.createTextNode(profile.getName()));
             document.getElementById('content').appendChild(h2);
             var h3 = document.createElement('h3');
             h3.appendChild(document.createTextNode(profile.getGivenName()));
             document.getElementById('content').appendChild(h3);
             var h4 = document.createElement('h4');
             h4.appendChild(document.createTextNode(profile.getFamilyName()));
             document.getElementById('content').appendChild(h4);
             var img = document.createElement('img');
             img.setAttribute("src", profile.getImageUrl());
             document.getElementById('content').appendChild(img);
             var h5 = document.createElement('h5');
             h5.appendChild(document.createTextNode(profile.getEmail()));
             document.getElementById('content').appendChild(h5);
         }
         
         function deleteUserProfile() {
             document.getElementById('content').innerHTML = '';
         }
         
         function storeUserEmail()
         {
             // Note: In this example, we use the People API to get the current
             // user's name. In a real app, you would likely get basic profile info
             // from the GoogleUser object to avoid the extra network round trip.
             var profile = gapi.auth2.getAuthInstance().currentUser.get().getBasicProfile();
             alert (profile.getEmail());
             localStorage.setItem('userEmail', profile.getEmail());
         }

   3. HTML
      1. De html plaats je in een index.html bestand in de map google-oauth:

         <!doctype html>
         <html lang="nl">
         <head>
             <meta charset="UTF-8">
             <title>Google oAuth - Een eerste begin</title>
         </head>
         <body>
             <h1>De People Google API gebruiken</h1>
             <!--Knoppen toevoegen om auth te initialiseren en af te melden -->
             <button id="signin-button" style="display: none;">Aanmelden</button>
             <button id="signout-button" style="display: none;">Afmelden</button>
             <div id="content"></div>
             <pre id="response"></pre>
             <script>
             </script>
             <script type="text/javascript" src="js/google-oauth-api.js"></script>
             <script src="https://apis.google.com/js/api.js?onload=handleClientLoad"></script>
         </body>
         </html>