我想为网页开发一个“添加到联系人”按钮,就像您在网络研讨会和活动页面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 @H_502_13@
哦,顺便说一下,当用户谷歌会在我的小网站和你的本地版本上抱怨它不安全时,只需点击高级并继续. (谷歌会这样做,直到你提交你的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" } ] }
@H_502_13@在左侧框中,您可以看到它将其输入到右侧的javascript createContacts请求中.
既然代码并不完美,我们希望保持自己和用户的身份验证,那么我们将挑选出两个主要内容:
> createContacts代码
> .signIn中的网址({scope:“https://www.googleapis.com/auth/contacts”})该范围基本上告诉api我们想要为用户访问什么.
所以现在把它们放在一起:
Meta charset="utf-8" /> 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); } @H_502_13@
顶部的客户端和api变量是您在快速入门页面上完成步骤后放入密钥的位置.
显然,按钮和工作方式可以改变,但这只是为了证明它有效:P
这是我的github:GitHub你只需要注意index.html PHP就这样我就可以把小测试网站给你看.
谷歌API再次罢工!
希望这有帮助,如果还有别的什么就打我!