JavaScript hızlı başlangıç kılavuzu

Hızlı başlangıç kılavuzlarında, Google Workspace API.

Google Workspace hızlı başlangıç kılavuzları, bazı ve kimlik doğrulama ve yetkilendirme akışıyla ilgili ayrıntılara dikkat edin. Önerilerimiz: istemci kitaplıklarını kullanmayı tercih edebilirsiniz. Bu hızlı başlangıç kılavuzunda test için uygun olan basitleştirilmiş kimlik doğrulama yaklaşımı bahsedeceğim. Üretim ortamı için şu konularda bilgi edinmenizi öneririz: kimlik doğrulama ve yetkilendirme önce erişim kimlik bilgilerini seçme seçmeniz gerekir.

Google Calendar API'ye istek gönderen bir JavaScript web uygulaması oluşturma

Hedefler

• Ortamınızı ayarlayın.
• Örneği ayarlayın.
• Örneği çalıştırın.

Ön koşullar

• Node.js ve npm yüklendi.
• Bir Google Cloud inceleyebilirsiniz.

• Google Takvim'in etkin olduğu bir Google Hesabı.

Ortamınızı ayarlama

Bu hızlı başlangıç kılavuzunu tamamlamak için ortamınızı ayarlayın.

API'yi etkinleştirme

Google API'lerini kullanmadan önce bir Google Cloud projesinde etkinleştirmeniz gerekir. Tek bir Google Cloud projesinde bir veya daha fazla API'yi etkinleştirebilirsiniz.

• Google Cloud konsolunda Google Calendar API'yi etkinleştirin.

  API'yi etkinleştirme

OAuth izin ekranını yapılandırın

Bu hızlı başlangıç kılavuzunu tamamlamak için yeni bir Google Cloud projesi kullanıyorsanız OAuth izin ekranını ziyaret edin ve kendinizi test kullanıcısı olarak ekleyin. Zaten Cloud projeniz için bu adımı tamamladıktan sonra sonraki bölüme geçin.

1. Google Cloud konsolunda Menü'ye gidin > API'lar ve Hizmetler > OAuth izin ekranı.

   OAuth izin ekranına gidin.

2. Kullanıcı türü için Dahili'yi seçin ve ardından Oluştur'u tıklayın.
3. Uygulama kayıt formunu doldurup Kaydet ve Devam Et'i tıklayın.

4. Şimdilik kapsam eklemeyi atlayıp Kaydet ve Devam Et'i tıklayabilirsiniz. Gelecekte Google Workspace kuruluşu kullanıyorsanız Kullanıcı türü'nü Harici olarak değiştirmeniz ve ardından Uygulamanızın gerektirdiği yetkilendirme kapsamlarını ekleyin.

5. Uygulama kaydı özetinizi inceleyin. Değişiklik yapmak için Düzenle'yi tıklayın. Uygulama Kontrol Paneline Dön'ü tıklayın.

Bir web uygulaması için kimlik bilgilerini yetkilendirme

Son kullanıcıların kimliğini doğrulamak ve uygulamanızdaki kullanıcı verilerine erişmek için şunları yapmanız gerekir: En az bir OAuth 2.0 İstemci Kimliği oluşturun. Client-ID, bir tek bir uygulamayı Google'ın OAuth sunucularına göndermesini sağlar. Uygulamanız birden fazla platformda çalışıyorsa her platform için ayrı bir istemci kimliği oluşturmanız gerekir.

1. Google Cloud konsolunda Menü > API'ler ve Hizmetler > Kimlik bilgileri.

   Kimlik bilgilerine git

2. Kimlik Bilgisi Oluştur > OAuth istemci kimliği'ni tıklayın.
3. Uygulama türü > Web uygulaması'nı tıklayın.
4. Ad alanına kimlik bilgisi için bir ad yazın. Bu ad yalnızca Google Cloud konsolunda gösterilir.
5. Uygulamanızla ilgili yetkili URI'ler ekleyin:
   • İstemci tarafı uygulamalar (JavaScript): Yetkili JavaScript kaynakları altında, URI ekle'yi tıklayın. Ardından, tarayıcı istekleri için kullanılacak bir URI girin. Bu, uygulamanızın OAuth 2.0 sunucusuna API istekleri gönderebileceği alan adlarını tanımlar.
   • Sunucu tarafı uygulamalar (Java, Python ve daha fazlası): Yetkili yönlendirme URI'leri bölümünde URI ekle'yi tıklayın. Ardından, OAuth 2.0 sunucusunun yanıt gönderebileceği bir uç nokta URI'si girin.
6. Oluştur'u tıklayın. Yeni İstemci Kimliğiniz ve İstemci sırrınızın gösterildiği, OAuth istemcisi oluşturuldu ekranı görüntülenir.

   İstemci kimliğini not edin. İstemci gizli anahtarları web uygulamaları için kullanılmaz.

7. Tamam'ı tıklayın. Yeni oluşturulan kimlik bilgisi OAuth 2.0 İstemci Kimlikleri altında görünür.

Bu hızlı başlangıç kılavuzunda daha sonra ihtiyacınız olacağından bu kimlik bilgilerini not edin.

API anahtarı oluşturma

1. Google Cloud konsolunda Menü'ye gidin > API'lar ve Hizmetler > Kimlik bilgileri.

   Kimlik bilgilerine git

2. Kimlik bilgileri oluştur > seçeneğini tıklayın. API anahtarı.
3. Yeni API anahtarınız gösterilir.
   • Kopyala'yı tıklayın. özelliğini kullanabilirsiniz. API anahtarı ayrıca "API anahtarları" içinde bulunur kimlik doğrulama bilgileri dahil edilir.
   • Gelişmiş ayarları güncellemek ve kullanımı sınırlandırmak için Anahtarı kısıtla'yı tıklayın ekleyin. Daha fazla bilgi için API anahtarı kısıtlamaları uygulama bölümüne bakın.

Örneği ayarlama

1. Çalışma dizininizde index.html adlı bir dosya oluşturun.

2. index.html dosyasına aşağıdaki örnek kodu yapıştırın:

   calendar/quickstart/index.html

   GitHub'da göster

   <!DOCTYPE html>
   <html>
     <head>
       <title>Google Calendar API Quickstart</title>
       <meta charset="utf-8" />
     </head>
     <body>
       <p>Google Calendar API Quickstart</p>
   
       <!--Add buttons to initiate auth sequence and sign out-->
       <button id="authorize_button" onclick="handleAuthClick()">Authorize</button>
       <button id="signout_button" onclick="handleSignoutClick()">Sign Out</button>
   
       <pre id="content" style="white-space: pre-wrap;"></pre>
   
       <script type="text/javascript">
         /* exported gapiLoaded */
         /* exported gisLoaded */
         /* exported handleAuthClick */
         /* exported handleSignoutClick */
   
         // TODO(developer): Set to client ID and API key from the Developer Console
         const CLIENT_ID = '<YOUR_CLIENT_ID>';
         const API_KEY = '<YOUR_API_KEY>';
   
         // Discovery doc URL for APIs used by the quickstart
         const DISCOVERY_DOC = 'https://www.googleapis.com/discovery/v1/apis/calendar/v3/rest';
   
         // Authorization scopes required by the API; multiple scopes can be
         // included, separated by spaces.
         const SCOPES = 'https://www.googleapis.com/auth/calendar.readonly';
   
         let tokenClient;
         let gapiInited = false;
         let gisInited = false;
   
         document.getElementById('authorize_button').style.visibility = 'hidden';
         document.getElementById('signout_button').style.visibility = 'hidden';
   
         /**
          * Callback after api.js is loaded.
          */
         function gapiLoaded() {
           gapi.load('client', initializeGapiClient);
         }
   
         /**
          * Callback after the API client is loaded. Loads the
          * discovery doc to initialize the API.
          */
         async function initializeGapiClient() {
           await gapi.client.init({
             apiKey: API_KEY,
             discoveryDocs: [DISCOVERY_DOC],
           });
           gapiInited = true;
           maybeEnableButtons();
         }
   
         /**
          * Callback after Google Identity Services are loaded.
          */
         function gisLoaded() {
           tokenClient = google.accounts.oauth2.initTokenClient({
             client_id: CLIENT_ID,
             scope: SCOPES,
             callback: '', // defined later
           });
           gisInited = true;
           maybeEnableButtons();
         }
   
         /**
          * Enables user interaction after all libraries are loaded.
          */
         function maybeEnableButtons() {
           if (gapiInited && gisInited) {
             document.getElementById('authorize_button').style.visibility = 'visible';
           }
         }
   
         /**
          *  Sign in the user upon button click.
          */
         function handleAuthClick() {
           tokenClient.callback = async (resp) => {
             if (resp.error !== undefined) {
               throw (resp);
             }
             document.getElementById('signout_button').style.visibility = 'visible';
             document.getElementById('authorize_button').innerText = 'Refresh';
             await listUpcomingEvents();
           };
   
           if (gapi.client.getToken() === null) {
             // Prompt the user to select a Google Account and ask for consent to share their data
             // when establishing a new session.
             tokenClient.requestAccessToken({prompt: 'consent'});
           } else {
             // Skip display of account chooser and consent dialog for an existing session.
             tokenClient.requestAccessToken({prompt: ''});
           }
         }
   
         /**
          *  Sign out the user upon button click.
          */
         function handleSignoutClick() {
           const token = gapi.client.getToken();
           if (token !== null) {
             google.accounts.oauth2.revoke(token.access_token);
             gapi.client.setToken('');
             document.getElementById('content').innerText = '';
             document.getElementById('authorize_button').innerText = 'Authorize';
             document.getElementById('signout_button').style.visibility = 'hidden';
           }
         }
   
         /**
          * Print the summary and start datetime/date of the next ten events in
          * the authorized user's calendar. If no events are found an
          * appropriate message is printed.
          */
         async function listUpcomingEvents() {
           let response;
           try {
             const request = {
               'calendarId': 'primary',
               'timeMin': (new Date()).toISOString(),
               'showDeleted': false,
               'singleEvents': true,
               'maxResults': 10,
               'orderBy': 'startTime',
             };
             response = await gapi.client.calendar.events.list(request);
           } catch (err) {
             document.getElementById('content').innerText = err.message;
             return;
           }
   
           const events = response.result.items;
           if (!events || events.length == 0) {
             document.getElementById('content').innerText = 'No events found.';
             return;
           }
           // Flatten to string to display
           const output = events.reduce(
               (str, event) => `${str}${event.summary} (${event.start.dateTime || event.start.date})\n`,
               'Events:\n');
           document.getElementById('content').innerText = output;
         }
       </script>
       <script async defer src="https://apis.google.com/js/api.js" onload="gapiLoaded()"></script>
       <script async defer src="https://accounts.google.com/gsi/client" onload="gisLoaded()"></script>
     </body>
   </html>

   Aşağıdakini değiştirin:

   • YOUR_CLIENT_ID: oluşturduğunuz istemci kimliği CANNOT TRANSLATE bir web uygulaması için yetkilendirilmiş kimlik bilgileri olmalıdır.
   • YOUR_API_KEY: olarak oluşturduğunuz API anahtarı bir Ön koşul olarak kabul edilir.

Örneği çalıştırma

1. Çalışma dizininizde http-server paketini yükleyin:

   npm install http-server
   

2. Çalışma dizininizde bir web sunucusu başlatın:

   npx http-server -p 8000
   

3. Tarayıcınızda http://localhost:8000 adresine gidin.
4. Erişimi yetkilendirmenizi isteyen bir istem görürsünüz:
   1. Google Hesabınızda henüz oturum açmadıysanız istendiğinde oturum açın. Eğer Birden fazla hesapta oturum açtıysanız yetkilendirme için kullanmak üzere bir hesap seçin.
   2. Kabul et'i tıklayın.

JavaScript uygulamanız Google Calendar API'yi çalıştırır ve çağırır.

Sonraki adımlar

• Etkinlik oluşturma
• Kimlik doğrulama ve yetkilendirme sorunlarını giderme
• Calendar API referans belgeleri
• GitHub'ın google-api-javascript-client bölümü