I am going to write this article in English, so my sister can read it.
First of all, u need to believe it is very easy, I just tried, here is step by step tutorial.
1. go to google console via your web browser.
https://console.developers.google.com/apis
you're gonna have to login to your google account first.
2. create a new project for this.
add a new project
click create
new project created
3. Enable "Google Calendar API" in the "Library" menu
click "Library" menu int the picture above.
search API "calendar" and press "Enter"
click "Google Calendar API" found.
click "Enable"
4. Create your app and set it up
click "CREATE CREDENTIALS"
choose "User Data" and click "Next"
name your app and choose your self as the app supporter
5. decide the information your users need to provide to you
so you can know who they are.
just click it.
choose what you want to know from your app users, for example, their email for further contact or event notify.
click "Update" after finish choosing
then save it
6. create your app's client id and put it in your web page javascript
So the Google API server will know that it is your app, not others'.
name your client id that you will put in your web page javascript
set the domain that you are going to use your app (the Google calendar API), so other hackers' domain will not be able to use it
click "Create" to create your app's client id
client id created, you can copy it again any time you want.
7. create your API key for google server to check your quota and access
for this project, you may create multiple API keys, and put them in different web page. So google will log their behavior separately.
API key created, you may want to restrict it's use from web page only, so other hackers will not be able to try it from the windows app they wrote.
8. add app testing users
9. write the javascript in your web page
for Google Calendar API Reference:
https://developers.google.com/calendar/api/v3/reference
for javascript example, you can visit the following webapage.
https://developers.google.com/calendar/api/quickstart/js
please make sure you set your CLIENT_ID and API_KEY in the example code:
here is the result of the example code:
however, this example shows you only the way to login.
here is another example, please make sure you set your CLIENT_ID and API_KEY in the following code:
<!DOCTYPE html>
<html>
<head>
<title>Google Calendar API</title>
<meta charset="UTF-8" />
<meta name="description" content="test Google Calendar API">
<script src="https://apis.google.com/js/api.js"></script>
</head>
<body>
<p>Google Calendar API</p>
<button id="loginButton">log in .</button>
<button onclick="add2EventAtCalendar()">add party events at 2021-10-10 and 2021-10-13</button>
<P>
<a href="https://calendar.google.com/calendar/r/month/2021/10/1?tab=rc" target="_blank">show Google 10/2021 Calender</a>
<script type="text/javascript">
var CLIENT_ID = '1031293676717-e1osoq4b89qm3njucjar6bo0jsg5qam3.apps.googleusercontent.com';
var API_KEY = 'AIzaSyCF7YkpJ4lzepNYoKgSP8WBCsGMs0bqR-g';
var authParams = {
'response_type' : 'token',
'client_id' : CLIENT_ID,
'immediate' : false,
'scope' : ['https://www.googleapis.com/auth/calendar https://www.googleapis.com/auth/calendar.events']
};
//init
gapi.load("client:auth2", function() {
gapi.auth2.init({client_id: CLIENT_ID});
});
//login btn set onclick event
document.getElementById('loginButton').onclick = function(){
gapi.auth.authorize(authParams, loginAndSetToken)
};
//login and set token
function loginAndSetToken(returnToken){
if (returnToken && returnToken['access_token']) {
gapi.auth.setToken(returnToken);
console.log(returnToken)
setAPIandLoadClient();
} else {
alert("Auth failed");
} }
//set API key and load client
function setAPIandLoadClient() {
gapi.client.setApiKey( API_KEY );
return gapi.client.load("https://content.googleapis.com/discovery/v1/apis/calendar/v3/rest").then(
function() { console.log("GAPI client loaded for API"); },
function(err) { console.error("Error loading GAPI client for API", err); }
);
}
//add 2 calendar events
function add2EventAtCalendar() {
alert("c1");
const events = [ {
'summary': 'Join the party No.1 at 10/20',
'location': 'My sweet home',
'description': 'https://www.cyccea.org.tw/',
'start': {
'date': '2021-10-20',
'timeZone': 'America/New_York'
},
'end': {
'date': '2021-10-21',
'timeZone': 'America/New_York'
}
},
{
'summary': 'Join the party No.2 at 10/26',
'location': 'My sweet garden',
'description': 'https://www.cyccea.org.tw/',
'start': {
'date': '2021-10-26',
'timeZone': 'America/New_York'
},
'end': {
'date': '2021-10-27',
'timeZone': 'America/New_York'
}
}];
//multi events
const batch = gapi.client.newBatch();
events.map((r, j) => {
batch.add(gapi.client.calendar.events.insert({
'calendarId': 'primary',
'resource': events[j]
}))
})
batch.then(function(){
console.log('2 events add successfully !')
});
}
</script>
</body>
</html>
and here is the result :
沒有留言:
張貼留言