我想为网页开发一个“添加到联系人”按钮,就像您在网络研讨会和活动页面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
答案 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请求中。
现在,该代码对于我们要如何保持自己和用户的身份验证并不完美,因此我们将挑选出两个主要方面:
.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