添加到联系人,例如添加到日历按钮/ html / Ajax选项

时间:2018-10-30 16:42:43

标签: javascript outlook addressbook google-contacts

我想为网页开发一个“添加到联系人”按钮,就像您在网络研讨会和活动页面like this one上看到的“添加到日历-Google,ICal,Outlook”类型的按钮一样。 / p>

我开始使用它来调查Google通讯录。 我开始构建一个表单,将应用程序/ atom + xml提交到他们在the help files here中谈论的URL以及对Google on Stack的类似问题。

我认为创建此项目是对社区的一种类似于开放源代码的服务,在我进行修补时会得到一些专家帮助。我要在这里索要捐款。

我的粗糙代码不起作用






function SendToGoogle() {

var url = "https://www.google.com/m8/feeds/contacts/default/full";
var data = contactData();

alert(data);

/*
$.post(url, data, function(data, status){
        alert("Data: " + data + "\nStatus: " + status);
    });
*/
    $.ajax({type: "POST",
        url: url,
        dataType: "xml",
        contentType: "application/atom+xml",
        cache: false,
        async: true,
        crossDomain: true,
        success: function(data, status){
        alert("Data: " + data + "\nStatus: " + status)}
})


} //end SendToGoogle








function contactData() {
return '        Elizabeth     Bennet     Elizabeth Bennet    Notes          (206)555-1212        (206)555-1213          Mountain View    1600 Amphitheatre Pkwy    CA    94043    United States          1600 Amphitheatre Pkwy Mountain View    ';
} //end contactData



2 个答案:

答案 0 :(得分:3)

证据在布丁里,所以在折磨自己之前,请阅读以下漫长的文章:Create Contacts Test Site使它起作用:)如果您打开了Webtool的控制台,则可以看到我们取回了联系人Person资源和Elizabeth Bennet现在将在您的联系人中!

哦,当以用户身份进行身份验证时,谷歌会抱怨它在我的小网站和您的本地版本上都不安全,只需单击“高级”并继续。 (Google会一直这样做,直到您将OAuth提交给他们的团队进行验证为止,这样对最终产品非常有用,但是...)

所以在google help docs中 在最上方,我们看到了:

  

注意:要获得对用户联系人的读写访问权限,请使用人员   API,使用JSON提供联系方式和个人资料信息   而不是旧的GData协议。

因此,看来正确的答案是移至People API。我花了一些时间研究它,并为您提供了一个粗略的答案。

我找到了this example页,可以满足您的大部分需求。如果您严格按照此说明进行操作,您将获得一个使用javascript工作的本地版本,并连接到他们的api,这允许我们创建联系人。

我们必须在Google的api中设置一个api应用,以从本质上验证此过程。

完成此操作后,我们可以设置按钮来请求用户接受身份验证(允许我们为他们创建联系人)。

乐趣在于更改他们的代码,只需将页面上的前10位用户放到创建联系人中即可。

在获得用户许可后,确实有一些方法可以直接对常规http请求进行处理,但是我发现与他们的crazy api setup一起使用会更快。

我们需要知道如何设置gapi.client.people.people.createContact api调用,它需要一个Person resource。该资源非常方便,可以单击以查看如何设置人员资源类别。

Here是我们在尝试将其放到网页上之前可以使用api的地方。在右侧面板中,标题为:

  

尝试使用此API

在它旁边有一个小盒子,它扩大了区域,因此我们可以更轻松地使用api。右上角有一个JavaScript选项,可以尝试查看与我们正在执行的请求等效的JavaScript。

在左侧,我们具有请求正文,可用于将详细信息放入createContacts api请求中。因此,以您的示例为例:

    {
      "names": [
          {
            "givenName": "Elizabeth",
            "familyName": "Bennet"
          }
        ],
        "phoneNumbers": [
          {
            "type": "home",
            "value": "(206)555-1212"
          },
          {
            "type": "cell",
            "value": "(206)555-1213"
          }
        ],
        "addresses": [
          {
            "type": "home",
            "streetAddress": "1600 Amphitheatre Pkwy",
            "postalCode": "94043",
            "country": "United States",
            "city": "Mountain View",
            "region": "California"
          }
        ]
    }

在左侧的框中,您可以看到它输入到右侧的javascript createContacts请求中。

现在,该代码对于我们要如何保持自己和用户的身份验证并不完美,因此我们将挑选出两个主要方面:

  • createContacts代码
  • .signIn({scope: "https://www.googleapis.com/auth/contacts"})
  • 中的网址

该范围实际上告诉api我们想要为用户访问的内容。

现在将它们放在一起:

<!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>
    <button id="contact_button" style="display: none;">Create Contact</button>

    <pre id="content" style="white-space: pre-wrap;"></pre>

    <script type="text/javascript">
      // Client ID and API key from the Developer Console
      var CLIENT_ID = '< YOUR CLIENT ID HERE! >';
      var API_KEY = '< YOUR API KEY HERE! >';

      // 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";

      var authorizeButton = document.getElementById('authorize_button');
      var signoutButton = document.getElementById('signout_button');
      var contactButton = document.getElementById('contact_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({
          apiKey: API_KEY,
          clientId: CLIENT_ID,
          discoveryDocs: DISCOVERY_DOCS,
          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;
          contactButton.onclick = handleContactClick;
        }, function(error) {
          appendPre(JSON.stringify(error, null, 2));
        });
      }

      /**
       *  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';
          contactButton.style.display = 'block';
        } 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();
      }

      /**
       *  Create a contact upon button click.
       */
      function handleContactClick() {
        gapi.client.people.people.createContact({
          "resource": {
            "names": [
              {
                "givenName": "Elizabeth",
                "familyName": "Bennet"
              }
            ],
            "phoneNumbers": [
              {
                "type": "home",
                "value": "(206)555-1212"
             .signIn({scope: "https://www.googleapis.com/auth/contacts"}) },
              {
                "type": "cell",
                "value": "(206)555-1213"
              }
            ],
            "addresses": [
              {
                "type": "home",
                "streetAddress": "1600 Amphitheatre Pkwy",
                "postalCode": "94043",
                "country": "United States",
                "city": "Mountain View",
                "region": "California"
              }
            ]
          }
        }).then(function(response) {
                // Handle the results here (response.result has the parsed body).
                console.log("Response", response);
              },
              function(err) { console.error("Execute error", err); });
      }

      /**
       * 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);
      }
    </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>

顶部的client和api变量是您在快速入门页面上浏览它们的步骤之后放置密钥的地方。

很明显,可以更改按钮及其工作方式,但这只是为了证明其有效:P

这是我的github:GitHub,您只需要注意index.html php,这样我就可以建立一个小的测试网站来展示给您。

Google API再次罢工!

希望这会有所帮助,如果还有其他问题,请打我!

答案 1 :(得分:0)

如果您使用Outlook并转到联系人,然后右键单击某个联系人并以 vCard 的身份转发,然后将其保存到桌面,则可以在诸如适用于Windows计算机的Mac或Notepad或Notepad ++。 您会看到它具有标准格式:

begin:vcard
version:3.0
prodid:Microsoft-MacOutlook/10.15.0.190117
UID:<uid string>
fn;charset=utf-8:<first> <last>
n;charset=utf-8:<last>;<first>;;;
title;charset=utf-8:<title>
office;charset=utf-8:<location>
note;charset=utf-8: 
adr;charset=utf-8;type=work;type=pref:;;;;;;<country>
label;charset=utf-8;type=work;type=pref:<country>
tel;charset=utf-8;type=cell:<mobile>
email;charset=utf-8;type=internet;type=pref;type=work:<email address>
end:vcard

如果您以此为基础,则可以毫无问题地下载此类文件。这是Wiki link