Bu sayfa, Cloud Translation API ile çevrilmiştir.

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

Hızlı başlangıç kılavuzları, Google Workspace API'si çağıran bir uygulamanın nasıl ayarlanıp çalıştırılacağını açıklar.

Google Workspace hızlı başlangıç kılavuzları, kimlik doğrulama ve yetkilendirme akışının bazı ayrıntılarını işlemek için API istemci kitaplıklarını kullanır. İstemci kitaplıklarını kendi uygulamalarınızda kullanmanızı öneririz. Bu hızlı başlangıç kılavuzu, test ortamı için uygun olan basitleştirilmiş bir kimlik doğrulama yaklaşımı kullanır. Üretim ortamında, uygulamanız için uygun olan erişim kimlik bilgilerini seçmeden önce kimlik doğrulama ve yetkilendirme hakkında bilgi edinmenizi öneririz.

People API'ye istekte bulunan bir JavaScript web uygulaması oluşturun.

Hedefler

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

Ön koşullar

Node.js ve npm yüklendi.
Bir Google Cloud projesi.

API erişiminin etkin olduğu bir Google Workspace alanı.
Bu alan adında yönetici ayrıcalıklarına sahip bir Google Hesabı.

Ortamınızı ayarlayın

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

API'yi etkinleştirme

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

Google Cloud Console'da People API'yi etkinleştirin.

API'yi etkinleştirme

Bir web uygulaması için kimlik bilgilerini yetkilendirme

Son kullanıcı olarak kimlik doğrulaması yapmak 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, tek bir uygulamayı Google'ın OAuth sunucularına 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.

Google Cloud Console'da Menü > API'ler ve Hizmetler > Kimlik Bilgileri'ne gidin.
Kimlik Bilgileri'ne git
Kimlik bilgisi oluştur > OAuth istemci kimliği'ni tıklayın.
Uygulama türü > Web uygulaması'nı tıklayın.
Ad alanına, kimlik bilgisi için bir ad yazın. Bu ad yalnızca Google Cloud Console'da gösterilir.
Uygulamanızla ilgili yetkili URI'lar 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 alanları tanımlar.
- Sunucu tarafı uygulamalar (Java, Python ve diğerleri) - Yetkili yönlendirme URI'leri altında URI ekle'yi tıklayın. Ardından, OAuth 2.0 sunucusunun yanıt gönderebileceği bir uç nokta URI'si girin.
Oluştur'u tıklayın. Yeni istemci kimliğinizi ve istemci gizli anahtarınızı gösteren OAuth istemcisi tarafından oluşturulan ekran görünür.
İstemci Kimliğini not edin. İstemci gizli anahtarları web uygulamaları için kullanılmaz.
OK (Tamam) seçeneğini tıklayın. Yeni oluşturulan kimlik bilgisi OAuth 2.0 istemci kimlikleri altında görünür.

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

API anahtarı oluşturma

Google Cloud Console'da Menü > API'ler ve Hizmetler > Kimlik Bilgileri'ne gidin.
Kimlik Bilgileri'ne git
Kimlik bilgisi oluştur > API anahtarı'nı tıklayın.
Yeni API anahtarınız görüntülenir.
- API anahtarınızı uygulamanızın kodunda kullanmak üzere kopyalamak için Kopyala'yı tıklayın. API anahtarı, projenizin kimlik bilgilerinin "API anahtarları" bölümünde de bulunabilir.
- Gelişmiş ayarları güncellemek ve API anahtarınızın kullanımını sınırlamak için Anahtarı kısıtla'yı tıklayın. Daha fazla bilgi için API anahtarı kısıtlamalarını uygulama başlıklı makaleyi inceleyin.

Örneği oluşturma

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

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: Ön koşul olarak oluşturduğunuz API anahtarı.

Örneği çalıştırın

Çalışma dizininizde http-server paketini yükleyin:
```
npm install http-server
```
Çalışma dizininizde bir web sunucusu başlatın:
```
npx http-server -p 8000
```
Tarayıcınızda http://localhost:8000 adresine gidin.
Örneği ilk kez çalıştırdığınızda, erişimi yetkilendirmeniz istenir:
1. Google Hesabınızda oturum açmadıysanız oturum açmanız istenir. Birden çok hesapta oturum açtıysanız yetkilendirme için kullanılacak bir hesap seçin.
2. Kabul et'i tıklayın.
3. Tarayıcıdan kodu kopyalayın, komut satırı istemine yapıştırın ve Enter tuşuna basın.
Yetkilendirme bilgileri dosya sisteminde depolanır. Böylece, örnek kodu bir sonraki çalıştırmanızda yetkilendirme istenmez.

People API'ye istekte bulunan ilk JavaScript uygulamanızı başarıyla oluşturdunuz.