samples/requestWithBody.html

<!--
  Copyright (c) 2011 Google Inc.

  Licensed under the Apache License, Version 2.0 (the "License"); you may not
  use this file except in compliance with the License. You may obtain a copy of
  the License at

  http://www.apache.org/licenses/LICENSE-2.0

  Unless required by applicable law or agreed to in writing, software
  distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
  WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
  License for the specific language governing permissions and limitations under
  the License.

  To run this sample, replace "apiKey" and "clientId" with your own values.
  They can be found at https://code.google.com/apis/console/?api=calendar under API Access.
-->
<!DOCTYPE html>
<html>
  <head>
    <meta charset='utf-8' />
    <title>JS Client with Request Body Sample</title>
    <style>
      #info {
        border: 1px solid black;
        padding: 0.25em;
        margin: 0.5em 0;
      }
    </style>
    <script>
      // Enter the API key from the Google Develoepr Console - to handle any unauthenticated
      // requests in the code.
      // The provided key works for this sample only when run from
      // https://google-api-javascript-client.googlecode.com/hg/samples/rpcRequestBody.html
      // To use in your own application, replace this API key with your own.
      var apiKey = 'AIzaSyAdjHPT5Pb7Nu56WJ_nlrMGOAgUAtKjiPM';

      // Enter a client ID for a web application from the Google Developer Console.
      // The provided clientId will only work if the sample is run directly from
      // https://google-api-javascript-client.googlecode.com/hg/samples/rpcRequestBody.html
      // In your Developer Console project, add a JavaScript origin that corresponds to the domain
      // where you will be running the script.
      var clientId = '837050751313';

      var scopes = 'https://www.googleapis.com/auth/calendar';

      // The Calendar entry to create
      var resource = {
        "summary": "Appointment",
        "location": "Somewhere",
        "start": {
          "dateTime": "2011-12-16T10:00:00.000-07:00"
        },
        "end": {
          "dateTime": "2011-12-16T10:25:00.000-07:00"
        }
      };

      function handleClientLoad() {
        gapi.load('client', initClient);
      }

      function initClient() {
        gapi.client.init({
          apiKey: apiKey,
          clientId: clientId,
          scope: scopes
        }).then();
      }

      function signIn() {
        gapi.auth2.getAuthInstance().signIn();
      }

      function makeRequest() {
        gapi.client.request({
          'path': '/calendar/v3/calendars/primary/events',
          'method': 'POST',
          'body': resource
        }).then(function(resp) {
          writeResponse(resp.result);
        });
      }

      function writeResponse(response) {
        console.log(response);
        var creator = response.creator.email;
        var calendarEntry = response.htmlLink;
        var infoDiv = document.getElementById('info');
        var infoMsg = document.createElement('P');
        infoMsg.appendChild(document.createTextNode('Calendar entry ' +
            'successfully created by ' + creator));
        infoDiv.appendChild(infoMsg);
        var entryLink = document.createElement('A');
        entryLink.href = calendarEntry;
        entryLink.appendChild(
            document.createTextNode('View the Calendar entry'));
        infoDiv.appendChild(entryLink);
      }
    </script>
    <script async defer src="https://apis.google.com/js/api.js"
      onload="this.onload=function(){};handleClientLoad();"
      onreadystatechange="if (this.readyState === 'complete') this.onload();">
    </script>
  </head>
  <body>
    <p>
      This sample creates a Calendar entry for the logged-in user on Friday, 
      December 16, 2011 from 10:00 to 10:25. The entry will not be saved unless
      you click through to the Calendar entry and save it.
    </p>
    <button id="rpc" onclick="signIn();">Sign in</button>
    <button id="rest" onclick="makeRequest();">Make Request</button>
    <div id="info"></div>
  </body>
</html>