我想为网页开发一个“添加到联系人”按钮,就像您在网络研讨会和活动页面like this one上看到的“添加到日历 – Google,ICal,Outlook”类型按钮.
我开始调查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
哦,顺便说一下,当用户谷歌会在我的小网站和你的本地版本上抱怨它不安全时,只需点击高级并继续. (谷歌会这样做,直到你提交你的OAuth,以便他们的团队对最终产品进行验证,但……)
所以在google help docs
在最顶层我们看到这个：
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我们想要为用户访问什么.
所以现在把它们放在一起：
Meta charset="utf-8" />
display: none;">Authorizedisplay: none;">Sign Outdisplay: none;">Create Contactdiscovery 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","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);
}
顶部的客户端和api变量是您在快速入门页面上完成步骤后放入密钥的位置.
显然,按钮和工作方式可以改变,但这只是为了证明它有效：P
这是我的github：GitHub你只需要注意index.html PHP就这样我就可以把小测试网站给你看.
谷歌API再次罢工！
希望这有帮助,如果还有别的什么就打我！
