Изменено 12.10.2011 в 17:00 по восточному времени для исправления двух опечаток в XML-коде calendar_functions.js
Я работаю локально на своем ноутбуке за динамическим IP-адресом, чтобы разработать веб-приложение для взаимодействия с API Календаря Google через AJAX. Я не уверен, как обойти междоменные ограничения AJAX, поскольку документация Google на самом деле не говорит об этом. Возможно, проблема в том, что запрос в Google приходит с http://domain вместо полного URL-адреса, например http://domain.net?
Google предоставляет возможность зарегистрировать ваше веб-приложение (http://code.google.com/apis/accounts/docs/RegistrationForWebAppsAuto.html), которое предоставит мне уникальную пару consumer_key / consumer_secret, но форма регистрации не примет http://domain в качестве домена. Без регистрации эта пара является анонимной / анонимной.
Пост Stackoverflow Как API JavaScript Google обходит междоменную безопасность в AJAX , объясняет, что Google обходит это, динамически внедряя теги SCRIPT в заголовок документа. Я попробовал три метода, описанных в этом потоке, но в консоли Chrome все еще отображается одно и то же сообщение: «Origin http://domain не разрешен Access-Control-Allow-Origin».
Документация Google по подписанию запросов OAuth находится по адресу http://code.google.com/apis/accounts/docs/OAuth_ref.html#SigningOAuth.
Вот форма, с которой я тестирую, которая добавляет событие-событие в календарь:
<?php // calendar.php
session_start();
require_once 'header.php';
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Site's Title</title>
<link rel="stylesheet" href="/styles.css">
<script type="text/javascript" src="/js/jquery.js"></script>
<script type="text/javascript" src="/js/UMDNJ.js"></script>
<script type="text/javascript" src="/js/oauth_lib/sha1.js"></script>
<script type="text/javascript" src="/js/oauth_lib/oauth.js"></script>
<script type="text/javascript">
$(document).ready( function() {
$.getScript('/includes/calendar_functions.js', function() {
alert("calendar_functions.js has been added");
});
});
</script>
</head>
<body>
<h3>Add Calendar Event</h3>
<div id="addEvent">
<form action="calendar.php" id="addEventForm" method="POST">
<label>Event title: </label><input type="text" name="eventTitle" id="eventTitle" size="20" /><br />
<label>Event content: </label><textarea name="eventContent" id="eventContent" cols="20" rows="5"></textarea><br />
<label>Location: </label><input type="text" name="eventLoc" id="eventLoc" size="20" /><br />
<label>Start time: </label><input type="text" name="startTime" id="startTime" size="20" /><br />
<label>End time: </label><input type="text" name="endTime" id="endTime" size="20" /><br />
<input type="submit" name="eventSubmit" value="Submit" />
</form>
</div> <!-- /#addEvent -->
</body>
</html>
А вот jQuery, который обрабатывает событие отправки формы с заимствованным кодом из этой библиотеки :
// calendar_functions.js
dateObj = new Date();
function nonce( length ) {
var chars = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXTZabcdefghiklmnopqrstuvwxyz";
var result = "";
for (var i = 0; i < length; ++i) {
var rnum = Math.floor(Math.random() * chars.length);
result += chars.substring(rnum, rnum+1);
}
return result;
}
$("#addEventForm").submit(function() {
// Make the XML for creating a new calendar event
var eventTitle = $("#eventTitle").val();
var eventContent = $("#eventContent").val();
var startTime = $("#startTime").val();
var endTime = $("#endTime").val();
var eventLoc = $("#eventLoc").val();
var eventXML = "<entry xmlns='http://www.w3.org/2005/Atom' xmlns:gd='http://schemas.google.com/g/2005'>";
eventXML += "<category scheme='http://schemas.google.com/g/2005#kind' term='http://schemas.google.com/g/2005#event'></category>";
eventXML += "<title type='text'>"+eventTitle+"</title>";
eventXML += "<content type='text'>"+eventContent+"</content>";
eventXML += "<gd:transparency value='http://schemas.google.com/g/2005#event.opaque'></gd:transparency>";
eventXML += "<gd:eventStatus value='http://schemas.google.com/g/2005#event.confirmed'></gd:eventStatus>";
eventXML += "<gd:where valueString='"+eventLoc+"'></gd:where>";
eventXML += "<gd:when startTime='"+startTime+"' endTime='"+endTime+"'></gd:when>";
eventXML += "</entry>";
// Set connection details
var Connection = {
method: "POST",
url: "https://www.google.com/calendar/feeds/default/private/full",
params: {
oauth_version: "1.0",
oauth_nonce: nonce(30),
oauth_timestamp: dateObj.getTime(),
oauth_consumer_key: "anonymous",
oauth_token: "--hidden for stackoverflow post for security reasons--",
oauth_signature_method: "HMAC-SHA1",
}
};
var oauth_consumer_secret = "anonymous";
var oauth_token_secret = "--hidden for stackoverflow post for security reasons--";
var oauth_verifier = "--hidden for stackoverflow post for security reasons--";
// Encode connection details
var connectD = OAuth.percentEncode('oauth_version')+'="'+OAuth.percentEncode(Connection.params.oauth_version)+'"';
connectD += ','+OAuth.percentEncode('oauth_nonce')+'="'+OAuth.percentEncode(Connection.params.oauth_nonce)+'"';
connectD += ','+OAuth.percentEncode('oauth_timestamp')+'="'+OAuth.percentEncode(Connection.params.oauth_timestamp)+'"';
connectD += ','+OAuth.percentEncode('oauth_consumer_key')+'="'+OAuth.percentEncode(Connection.params.oauth_consumer_key)+'"';
connectD += ','+OAuth.percentEncode('oauth_token')+'="'+OAuth.percentEncode(Connection.params.oauth_token)+'"';
connectD += ','+OAuth.percentEncode('oauth_signature_method')+'="'+OAuth.percentEncode(Connection.params.oauth_signature_method)+'"';
// Make the base string
var baseString = Connection.method+'&'+Connection.url+'&'+OAuth.SignatureMethod.normalizeParameters(Connection.params);
baseString = OAuth.percentEncode(baseString);
// Make the signature
var theKey = oauth_consumer_secret+'&'+oauth_token_secret;
var b64pad = '=';
var signature = b64_hmac_sha1(theKey, baseString);
// Add signature to encoded base connection details
connectD += ','+OAuth.percentEncode('oauth_signature')+'="'+OAuth.percentEncode(signature)+'"';
// alert(connectD);
// alert(baseString);
alert(signature);
// Submit request to Google via AJAX
$.ajax({
type: 'POST',
url: 'https://www.google.com/calendar/feeds/default/private/full',
data: eventXML,
dataType: 'xml',
contentType: 'application/atom+xml',
// headers: [
// ['Access-Control-Allow-Origin', '*'],
// ['Authorization', 'OAuth '+connectD]
// ],
beforeSend: function(xhr) {
$("#addEvent").before('<div id="message_center">uploading...<br /></div>');
xhr.setRequestHeader('Authorization', 'OAuth '+connectD);
},
success: function(data, textStatus, jqXHR) {
$("#addEvent").before('<div id="message_center">Success!<br /> Data: '+data+'<br />textStatus: '+textStatus);
console.log(data, textStatus);
},
error: function(jqXHR, textStatus, errorThrown) {
$("#addEvent").before('<div id="message_center">'+textStatus+'<br />'+errorThrown+'</div>');
var res = jqXHR.getAllResponseHeaders();
console.info(jqXHR, textStatus, errorThrown);
},
});
return false;
});
Я ценю любые предложения, которые могут быть у каждого.
Спасибо.