Question

我想知道是否有人可以帮忙解决这个问题。我正在使用以下代码来使用OAuth拉取我的谷歌联系人，它到目前为止工作正常，我在控制台日志中得到一个回复，谷歌的XML看起来很复杂，说实话。

我的最终目标是能够使用地址簿中的联系人姓名填充HTML表单下拉列表，并将该联系人的电话号码归为所选名称的值。

以下是代码，如果您有任何想法，请与我们联系！

<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
</head>
<body>
<script type="text/javascript">
    var clientId = 'ID_HERE';
    var apiKey = 'KEY_HERE';
    var scopes = 'https://www.googleapis.com/auth/contacts.readonly';
    $(document).on("click",".googleContactsButton", function(){
        gapi.client.setApiKey(apiKey);
        window.setTimeout(authorize);
    });

    function authorize() {
        gapi.auth.authorize(
            {
                client_id: clientId, 
                scope: scopes, 
                immediate: false
            }, 
            handleAuthorization
        );
    }

    function handleAuthorization(authorizationResult) {
        if (authorizationResult && !authorizationResult.error) {
            $.get(
                "https://www.google.com/m8/feeds/contacts/default/thin?alt=json&access_token=" 
                    + authorizationResult.access_token + "&max-results=500&v=3.0",
                function(response){
                    //process the response here
                    console.log(response);
                }
            );
        }
    }
    </script>
    <script src="https://apis.google.com/js/client.js"></script>
    <button class="googleContactsButton">Get my contacts</button>
</body>
</html>

修改

所以，我已经玩了一下，这就是我到目前为止所做的，它运行正常，我将结果列在一行的名称中，然后是下一个号码，然后是名字，等等..

到目前为止的问题如下。

这只会返回有限数量的联系人，我相信对API的响应有限制，这是200或者其他什么（我认为），我怎样才能显示所有联系人？

此外，我仍然试图让它以选择框格式显示，允许我选择一个名称，并将链接到该名称的数字传递给表单。

有什么想法吗？

<!DOCTYPE html>
<html>
<head>
<title>People API Quickstart</title>
<meta charset='utf-8' />
</head>
<body>
<p>People API Quickstart</p>

<!--Add buttons to initiate auth sequence and sign out-->
<button id="authorize-button" style="display: none;">Authorize</button>
<button id="signout-button" style="display: none;">Sign Out</button>

<pre id="content"></pre>

<script type="text/javascript">
  // Client ID and API key from the Developer Console
  var CLIENT_ID = 'CLIENT ID.apps.googleusercontent.com';

  // Array of API discovery doc URLs for APIs used by the quickstart
  var DISCOVERY_DOCS = ["https://www.googleapis.com/discovery/v1/apis/people/v1/rest"];

  // Authorization scopes required by the API; multiple scopes can be
  // included, separated by spaces.
  var SCOPES = "https://www.googleapis.com/auth/contacts.readonly";

  var authorizeButton = document.getElementById('authorize-button');
  var signoutButton = document.getElementById('signout-button');

  /**
   *  On load, called to load the auth2 library and API client library.
   */
  function handleClientLoad() {
    gapi.load('client:auth2', initClient);
  }

  /**
   *  Initializes the API client library and sets up sign-in state
   *  listeners.
   */
  function initClient() {
    gapi.client.init({
      discoveryDocs: DISCOVERY_DOCS,
      clientId: CLIENT_ID,
      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());
      authorizeButton.onclick = handleAuthClick;
      signoutButton.onclick = handleSignoutClick;
    });
  }

  /**
   *  Called when the signed in status changes, to update the UI
   *  appropriately. After a sign-in, the API is called.
   */
  function updateSigninStatus(isSignedIn) {
    if (isSignedIn) {
      authorizeButton.style.display = 'none';
      signoutButton.style.display = 'block';
      listConnectionNames();
    } else {
      authorizeButton.style.display = 'block';
      signoutButton.style.display = 'none';
    }
  }

  /**
   *  Sign in the user upon button click.
   */
  function handleAuthClick(event) {
    gapi.auth2.getAuthInstance().signIn();
  }

  /**
   *  Sign out the user upon button click.
   */
  function handleSignoutClick(event) {
    gapi.auth2.getAuthInstance().signOut();
  }

  /**
   * Append a pre element to the body containing the given message
   * as its text node. Used to display the results of the API call.
   *
   * @param {string} message Text to be placed in pre element.
   */
  function appendPre(message) {
    var pre = document.getElementById('content');
    var textContent = document.createTextNode(message + '\n');
    pre.appendChild(textContent);
  }

  /**
   * Print the display name if available for 10 connections.
   */
  function listConnectionNames() {
    gapi.client.people.people.connections.list({
       'resourceName': 'people/me',
       'pageSize': 2000,
       'personFields': 'names,phoneNumbers',
     }).then(function(response) {
      console.log(response)
       var connections = response.result.connections;
       appendPre('<select>');

       if (connections.length > 0) {
         for (i = 0; i < connections.length; i++) {
           var person = connections[i];
           if (person.names && person.names.length > 0) {
             appendPre(person.names[0].displayName)
             appendPre(person.phoneNumbers[0].value)
           } else {
             appendPre("No display name found for connection.");
           }
         }
       } else {
         appendPre('No upcoming events found.');
       }
     });
  }

</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>
</body>
</html>

Answer 1

访问联系人

当您收到响应时，联系人位于response.feed.entry下，这是联系人的数组。让我们保存var contacts = response.feed.entry下的内容。作为后面的示例，让我们联系 Jimmy ：var jimmy = contacts[0]。

您可以访问多个属性，例如：

电子邮件：jimmy.gd$email[0].address。（可以有更多电子邮件）
姓名：jimmy.title.$t。
电话：jimmy.gd$phoneNumber[0].$t。
地址：jimmy.gd$postalAddress[0].$t。
上次更新：jimmy.updated.$t。

警告：如果未设置该字段，则该字段将是未定义的。您必须首先验证它是否存在，如下所示：

// Standard way
var name;
if (jimmy.title != undefined) name = jimmy.title.$t
else name = "?? well too bad ??";

// The ninja way
var name = jimmy.title ? jimmy.title.$t : null;

另外

将获取网址更改为https://www.google.com/m8/feeds/contacts/default/**full**/...，因为您将获得有关联系人的更多信息。

填充下拉列表

为简单起见，您可以使用<select>代码并将联系人作为<option>标记插入其中。此外，您还可以使用具有很酷下拉菜单的 bootstrap 等库。

如果您的代码仍无效......

试试这段代码：

<html>
  <head>
    <script src="https://apis.google.com/js/client.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
    <script>
      function auth() {
        var config = {
          'client_id': 'OAUTH_CLIENT_ID',
          'scope': 'https://www.google.com/m8/feeds'
        };
        gapi.auth.authorize(config, function() {
          fetch(gapi.auth.getToken());
        });
      }
      function fetch(token) {
        $.ajax({
          url: 'https://www.google.com/m8/feeds/contacts/default/full?alt=json',
          dataType: 'jsonp',
          data: token
        }).done(function(data) {
            console.log(JSON.stringify(data));
          });
      }
    </script>
  </head>

  <body>
    <button onclick="auth();">GET CONTACTS FEED</button>
  </body>
</html>

Source

Google通讯录下拉列表

1 个答案:

访问联系人

另外

填充下拉列表

如果您的代码仍无效......