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

People API'ye istek gönderen bir JavaScript web uygulaması oluşturun.

Hızlı başlangıç kılavuzlarında, Google Workspace API'yi çağıran bir uygulamanın nasıl ayarlanacağı ve çalıştırılacağı açıklanır. Bu hızlı başlangıç kılavuzunda, test ortamına uygun, basitleştirilmiş bir kimlik doğrulama yaklaşımı kullanılmaktadır. Üretim ortamı için uygulamanıza uygun erişim kimlik bilgilerini seçmeden önce kimlik doğrulama ve yetkilendirme hakkında bilgi edinmenizi öneririz.

Bu hızlı başlangıç kılavuzunda, kimlik doğrulama ve yetkilendirme akışının bazı ayrıntılarını işlemek için Google Workspace'in önerilen API istemci kitaplıkları kullanılmaktadır.

Hedefler

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

Ön koşullar

• Node.js ve npm'nin yüklü olması gerekir.
• Google Cloud projesi.

• API erişimi etkinleştirilmiş bir Google Workspace alanı.
• Söz konusu alanda yönetici ayrıcalıklarına sahip 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 Console'da People API'yi etkinleştirin.

  API'yi etkinleştirme

OAuth kullanıcı rızası ekranını yapılandırma

Bu hızlı başlangıç kılavuzunu tamamlamak için yeni bir Google Cloud projesi kullanıyorsanız OAuth kullanıcı rızası ekranını yapılandırın. Cloud projeniz için bu adımı zaten tamamladıysanız sonraki bölüme geçin.

1. Google API Konsolu'nda Menü > Google Auth platform > Markalama'ya gidin.

   Markalama'ya gidin.

2. Google Auth platformunu daha önce yapılandırdıysanız Marka bilinci oluşturma, Kitle ve Veri Erişimi'nde aşağıdaki OAuth kullanıcı rızası ekranı ayarlarını yapılandırabilirsiniz. Google Auth platform not configured yet (Google Auth platformu henüz yapılandırılmadı) mesajını görürseniz Get Started'ı (Başlayın) tıklayın:
1. Uygulama Bilgileri bölümündeki Uygulama adı alanına uygulamanın adını girin.
2. Kullanıcı destek e-postası bölümünde, kullanıcıların izinleriyle ilgili soruları olduğunda sizinle iletişime geçebilecekleri bir destek e-posta adresi seçin.
3. İleri'yi tıklayın.
4. Kitle bölümünde Şirket içi'ni seçin.
5. İleri'yi tıklayın.
6. İletişim Bilgileri bölümünde, projenizdeki değişikliklerle ilgili bildirim alabileceğiniz bir E-posta adresi girin.
7. İleri'yi tıklayın.
8. Bitir bölümünde Google API Hizmetleri Kullanıcı Verileri Politikası'nı inceleyin ve kabul ediyorsanız Google API Hizmetleri: Kullanıcı Verileri Politikası'nı kabul ediyorum'u seçin.
9. Devam'ı tıklayın.
10. Oluştur'u tıklayın.
3. Şimdilik kapsam ekleme adımını atlayabilirsiniz. Gelecekte Google Workspace kuruluşunuzun dışında kullanılacak bir uygulama oluşturduğunuzda Kullanıcı türü'nü Harici olarak değiştirmeniz gerekir. Ardından, uygulamanızın gerektirdiği yetkilendirme kapsamlarını ekleyin. Daha fazla bilgi edinmek için OAuth kullanıcı rızası ekranını yapılandırma başlıklı makalenin tamamını inceleyin.

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 bir veya daha fazla OAuth 2.0 istemci kimliği oluşturmanız gerekir. İstemci kimliği, Google'ın OAuth sunucularına tek bir uygulamayı tanımlamak için kullanılır. Uygulamanız birden fazla platformda çalışıyorsa her platform için ayrı bir istemci kimliği oluşturmanız gerekir.

1. Google Cloud Console'da Menü > Google Auth platform > Clients'a (Müşteriler) gidin.

   Müşteriler'e gidin

2. Create Client'ı (İstemci oluştur) tıklayın.
3. Uygulama türü > Web uygulaması'nı tıklayın.
4. Name (Ad) alanına kimlik bilgisi için bir ad yazın. Bu ad yalnızca Google Cloud Console'da gösterilir.
5. Uygulamanızla ilgili yetkilendirilmiş URI'leri ekleyin:
   • İstemci tarafı uygulamaları (JavaScript): Yetkilendirilmiş JavaScript kaynakları bölümünde 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 alanları tanımlar.
   • Sunucu tarafı uygulamaları (Java, Python ve daha fazlası): Yetkilendirilmiş 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. İsteğe bağlı: Uygulamanız, kullanıcılar adına harekete geçen bir yapay zeka aracısıysa Bu istemciyi yapay zeka destekli bir aracı için kullan'ı seçin. Uygulamanız hem yapay zeka aracısı iş akışlarını hem de standart kullanıcı özelliklerini destekliyorsa her biri için ayrı OAuth istemcileri oluşturun. Müşteriyi oluşturduktan sonra bu ayarı değiştiremezsiniz.
7. Oluştur'u tıklayın.

   Yeni oluşturulan kimlik bilgisi OAuth 2.0 İstemci Kimlikleri bölümünde görünür.

   İstemci gizli anahtarlarının web uygulamaları için kullanılmadığını unutmayın.

8. İstemci kimliğini, bu hızlı başlangıç kılavuzunun ilerleyen bölümlerinde kullanmak üzere kaydedin.

API anahtarı oluşturma

1. Google Cloud Console'da Menü > API'ler ve Hizmetler > Kimlik Bilgileri'ne gidin.

   Kimlik Bilgileri'ne gidin

2. Kimlik bilgileri oluştur > API anahtarı'nı tıklayın.
3. Yeni API anahtarınız gösterilir.
   • Uygulamanızın kodunda kullanmak üzere API anahtarınızı kopyalamak için Kopyala'yı tıklayın. API anahtarını, projenizin kimlik bilgilerinin "API Anahtarları" bölümünde de bulabilirsiniz.
   • Yetkisiz kullanımı önlemek için API anahtarının nerede ve hangi API'ler için kullanılabileceğini kısıtlamanızı öneririz. Daha fazla bilgi için API kısıtlamaları ekleme başlıklı makaleyi inceleyin.

Ö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:

   people/quickstart/index.html

   GitHub'da göster
   <!DOCTYPE html>
   <html>
     <head>
       <title>People API Quickstart</title>
       <meta charset="utf-8" />
     </head>
     <body>
       <p>People 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/people/v1/rest';
   
         // Authorization scopes required by the API; multiple scopes can be
         // included, separated by spaces.
         const SCOPES = 'https://www.googleapis.com/auth/contacts.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 listConnectionNames();
           };
   
           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 display name if available for 10 connections.
          */
         async function listConnectionNames() {
           let response;
           try {
             // Fetch first 10 files
             response = await gapi.client.people.people.connections.list({
               'resourceName': 'people/me',
               'pageSize': 10,
               'personFields': 'names,emailAddresses',
             });
           } catch (err) {
             document.getElementById('content').innerText = err.message;
             return;
           }
           const connections = response.result.connections;
           if (!connections || connections.length == 0) {
             document.getElementById('content').innerText = 'No connections found.';
             return;
           }
           // Flatten to string to display
           const output = connections.reduce(
               (str, person) => {
                 if (!person.names || person.names.length === 0) {
                   return `${str}Missing display name\n`;
                 }
                 return `${str}${person.names[0].displayName}\n`;
               },
               'Connections:\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: Bir web uygulaması için kimlik bilgilerini yetkilendirdiğinizde oluşturduğunuz istemci kimliği.
   • YOUR_API_KEY: Oluşturduğunuz API anahtarı.

Ö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şim yetkisi vermenizi 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. Birden fazla hesapta oturum açtıysanız yetkilendirme için kullanılacak bir hesap seçin.
   2. Kabul et'i tıklayın.

JavaScript uygulamanız çalışır ve People API'yi çağırır.

Sonraki adımlar

• API Gezgini'nde Google Workspace API'lerini deneme
  • Kimlik doğrulama ve yetkilendirme sorunlarını giderme
  • People API referans belgeleri
  • GitHub'ın google-api-javascript-client bölümü