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

Hızlı başlangıç kılavuzlarında, Google Workspace API'yi çağıran bir uygulamanın nasıl oluşturulacağı ve çalıştırılacağı açıklanmaktadır.

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. Kendi uygulamalarınız için istemci kitaplıklarını kullanmanızı öneririz. Bu hızlı başlangıç kılavuzunda, test ortamı için uygun olan basitleştirilmiş bir kimlik doğrulama yaklaşımı kullanılır. Üretim ortamında, uygulamanız için uygun erişim kimlik bilgilerini seçmeden önce kimlik doğrulama ve yetkilendirme hakkında bilgi edinmenizi öneririz.

Admin SDK API'sine istek gönderen bir JavaScript web uygulaması oluşturun.

Hedefler

• Ortamınızı ayarlayın.
• Numuneyi ayarlayın.
• Sana Özel içeriğini çalıştırın.

Ön koşullar

• Node.js ve npm yüklü olmalıdır.
• Bir Google Cloud projesi.

• API erişiminin etkin olduğu bir Google Workspace alanı.
• İlgili 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 Yönetici SDK'sı API'sini etkinleştirin.

  API'yi etkinleştirme

OAuth izin ekranını yapılandırma

Bu hızlı başlangıç kılavuzunu tamamlamak için yeni bir Google Cloud projesi kullanıyorsanız OAuth izin 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 Cloud Console'da Menü > > Markalaşma'ya gidin.

   Markalama'ya gidin

2. 'ü zaten yapılandırdıysanız Marka, Kitle ve Veri Erişimi'nde aşağıdaki OAuth kullanıcı rızası ekranı ayarlarını yapılandırabilirsiniz. Henüz yapılandırılmadı yazan bir mesaj görürseniz 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ı için sizinle iletişime geçebileceği bir destek e-posta adresi seçin.
3. İleri'yi tıklayın.
4. Kitle bölümünde Dahili'yi seçin.
5. İleri'yi tıklayın.
6. İletişim bilgileri bölümünde, projenizde yapılan değişikliklerle ilgili bildirim alabileceğiniz bir e-posta adresi girin.
7. İleri'yi tıklayın.
8. Son 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. Şu anda kapsam eklemeyi 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 ihtiyaç duyduğu yetkilendirme kapsamlarını ekleyin. Daha fazla bilgi edinmek için OAuth iznini yapılandırma kılavuzunun 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, tek bir uygulamanın Google OAuth sunucularına tanıtılması 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ü > > İstemciler'e gidin.

   Müşteriler'e gidin

2. Create Client'ı (Müşteri Oluştur) tıklayın.
3. Uygulama türü > Web uygulaması'nı tıklayın.
4. Ad alanına, kimliğin adını yazın. Bu ad yalnızca Google Cloud Console'da gösterilir.
5. Uygulamanızla ilgili yetkili 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 diğerleri): 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. Oluştur'u tıklayın.

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

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

Bu kimlik bilgilerini not edin. Bu hızlı başlangıç kılavuzunun ilerleyen bölümlerinde bu bilgilere ihtiyacınız olacak.

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örüntülenir.
   • API anahtarınızı uygulamanızın kodunda kullanmak için Kopyala'yı seçin. API anahtarını, projenizin kimlik bilgilerinin "API anahtarları" bölümünde de bulabilirsiniz.
   • 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 ayrıntılı bilgi için API anahtarı kısıtlamaları uygulama 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:

   adminSDK/reports/index.html

   GitHub'da göster
   <!DOCTYPE html>
   <html>
     <head>
       <title>Reports API Quickstart</title>
       <meta charset="utf-8" />
     </head>
     <body>
       <p>Reports 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/admin/reports_v1/rest';
   
         // Authorization scopes required by the API; multiple scopes can be
         // included, separated by spaces.
         const SCOPES = 'https://www.googleapis.com/auth/admin.reports.audit.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 listLoginActivity();
           };
   
           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 10 recent login activities.
          */
         async function listLoginActivity() {
           let response;
           try {
             const request = {
               'userKey': 'all',
               'applicationName': 'login',
               'maxResults': 10,
             };
             response = await gapi.client.reports.activities.list(request);
           } catch (err) {
             document.getElementById('content').innerText = err.message;
             return;
           }
   
           const activities = response.result.items;
           if (!activities || activities.length == 0) {
             document.getElementById('content').innerText = 'No activities found.';
             return;
           }
           // Flatten to string to display
           const output = activities.reduce(
               (str, activity) => {
                 const time = activity.id.time;
                 const email = activity.actor.email;
                 const eventName = activity.events[0].name;
                 return `${str}-${time}: ${email} (${eventName})\n`;
               },
               'Logins:\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: 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ı.

Sana Özel'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 için yetkilendirme istemi görürsünüz:
   1. Google Hesabınızda 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 Yönetici SDK'si API'sini çağırır.

Sonraki adımlar

• Kimlik doğrulama ve yetkilendirme sorunlarını giderme
• Yönetici SDK'sı Reports API referans dokümanları
• GitHub'ın google-api-javascript-client bölümünde