添加到联系人，例如添加到日历按钮/ html/ Ajax 选项
Posted
技术标签:
【中文标题】添加到联系人，例如添加到日历按钮/ html/ Ajax 选项【英文标题】：Add to Contacts like Add to Calendar button/ html/ Ajax option 【发布时间】：2019-04-03 18:41:45 【问题描述】：我想为网页开发一个“添加到联系人”按钮，就像您在网络研讨会和活动页面 like this one 上看到的“添加到日历 - Google、ICal、Outlook”类型的按钮。
我开始使用 Google 通讯录进行调查。 我开始构建一个表单，将 application/atom+xml 提交到他们在 the help files here 中讨论的 URL 以及 Google on Stack 的类似问题。
我认为创建它是一种类似于开源的社区服务，在我修补它时，我们将不胜感激一些专家的帮助。我在这里请求贡献。
我的粗略代码不起作用
功能 SendToGoogle() var url = "https://www.google.com/m8/feeds/contacts/default/full"; var 数据 = 联系人数据（）； 警报（数据）； /* $.post(url, data, function(data, status) alert("数据：" + 数据 + "\n状态：" + 状态); ); */ $.ajax(type: "POST", 网址：网址， 数据类型：“xml”， 内容类型：“应用程序/原子+xml”， 缓存：假， 异步：真， 跨域：是的， 成功：功能（数据，状态） alert("数据：" + 数据 + "\n状态：" + 状态) ) //结束 SendToGoogle 函数联系人数据（） 返回'伊丽莎白班纳特伊丽莎白班纳特笔记 (206)555-1212 (206)555-1213 Mountain View 1600 Amphitheatre Pkwy CA 94043 美国 1600 Amphitheatre Pkwy Mountain View'; //结束联系人数据【问题讨论】：
认为我在下面为你找到了一些东西，完全改变了我的答案。 【参考方案1】：证据就在布丁中，所以在你折磨自己阅读这篇长文之前：Create Contacts Test Site 让它工作了 :) 如果你打开了 webtool 的控制台，你可以看到我们取回了联系人 Person 资源，而 Elizabeth Bennet 现在将加入您的通讯录！
哦，顺便说一句，当以用户身份进行身份验证时，google 会抱怨它在我的小网站和您的本地版本上都不安全，只需单击高级并继续。 （Google 会执行此操作，直到您提交 OAuth 以供他们的团队在最终产品上进行验证，但是......）
所以在google help docs 在最顶部，我们看到：
注意：对于用户联系人的读写访问权限，请使用 People 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") 中的 url
该范围基本上告诉 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你只需要注意php的index.html，我就可以放一个小测试网站给你看。
Google API 再次出击！
希望对你有帮助，如果还有什么可以联系我！
【讨论】：
谢谢@ekr990011 我希望在编写代码方面得到一些帮助，你能帮忙吗？ 是的，我今天会再研究一下。我将使用和编辑部分更新我的答案。 很棒的努力 @ekr990011 这是完全可行的例子，非常感谢您的贡献。我将在 Git 上与您联系，我们可以在那里继续。【参考方案2】：如果您使用 Outlook 并转到您的联系人，然后右键单击一个联系人并说作为 vCard 转发，然后将其保存到您的桌面，您可以使用类似 TextEdit 的方式打开它用于 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
【讨论】：
感谢@JGFMK，如果你想“托管”一个文件，那就太好了 - 我想要一个按钮直接插入一个人的“联系人”（就像我们看到的日历一样的按钮）以上是关于添加到联系人，例如添加到日历按钮/ html/ Ajax 选项的主要内容，如果未能解决你的问题，请参考以下文章