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

证据就在布丁中,所以在你折磨自己阅读这篇长篇文章之前：

Create Contacts Test Site让它运转起来:)如果你打开了webtool的控制台,你可以看到我们找回联系人资源,而Elizabeth Bennet现在将在你的联系人中！

哦,顺便说一下,当用户谷歌会在我的小网站和你的本地版本上抱怨它不安全时,只需点击高级并继续. (谷歌会这样做,直到你提交你的OAuth,以便他们的团队对最终产品进行验证,但……)

Note: For read and write access to users’ contacts, use the People

API, which provides both contact and profile information using JSON

instead of the older GData protocol.

所以这里看起来正确的答案似乎是转到People API.我花了一些时间研究它,并为你粗略回答.

我找到了this example页面,它可以解决你想要的大部分问题.如果您完全遵循它,您将获得一个本地版本,使用javascript连接到他们的api,这允许我们创建联系人.

我们必须在google的api中设置api应用程序,以基本上验证此过程.

一旦我们这样做,我们可以设置请求用户接受身份验证的按钮(允许我们为他们创建联系人).

有趣的是改变他们的代码,它只是为页面上的用户提供前十个用户来创建联系人.

在得到用户的许可之后,似乎有可能通过常规的http请求直接进行,但我发现使用他们的crazy api setup更快.

我们需要知道如何设置gapi.client.people.people.createContact api调用,它需要一个Person resource.该资源很方便点击,看看我们如何设置人员资源类别.

Here是我们在尝试将它放在我们的网页上之前可以使用api的地方.在右侧面板中有一个标题：

Try this 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我们想要为用户访问什么.

所以现在把它们放在一起：

People API Quickstart

People API Quickstart

Authorize

Sign Out

Create Contact

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

}

onreadystatechange="if (this.readyState === 'complete') this.onload()">

顶部的客户端和api变量是您在快速入门页面上完成步骤后放入密钥的位置.

显然,按钮和工作方式可以改变,但这只是为了证明它有效：P

这是我的github：GitHub你只需要注意index.html php就这样我就可以把小测试网站给你看.

谷歌API再次罢工！

希望这有帮助,如果还有别的什么就打我！