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

Hızlı başlangıç kılavuzlarında Google Workspace API çağıran bir uygulamanın nasıl kurulacağı 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. İstemci kitaplıklarını kendi uygulamalarınız için 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ı söz konusuysa uygulamanız için uygun olan erişim kimlik bilgilerini seçmeden önce kimlik doğrulama ve yetkilendirme hakkında bilgi edinmenizi öneririz.

Google Classroom API'ye istek gönderen bir JavaScript web uygulaması oluşturmak.

Hedefler

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

Ön koşullar

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

• Google Classroom'un etkin olduğu bir Google for Education 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 etkinleştirebilirsiniz.

• Google Cloud konsolunda Google Classroom 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ı yapılandırın ve kendinizi test kullanıcısı olarak ekleyin. Cloud projeniz için bu adımı zaten tamamladıysanız bir sonraki bölüme geçin.

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

   OAuth izin ekranına gidin

2. Uygulamanızın kullanıcı türünü seçin, 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şunuzun dışında kullanmak için uygulama oluşturduğunuzda, uygulamanızın gerektirdiği yetkilendirme kapsamlarını eklemeniz ve doğrulamanız gerekir.

5. Kullanıcı türü olarak Harici seçeneğini belirlediyseniz test kullanıcılarını ekleyin:
   1. Test kullanıcıları bölümünde Kullanıcı ekle'yi tıklayın.
   2. E-posta adresinizi ve diğer yetkili test kullanıcılarınızı girip Kaydet ve Devam Et'i tıklayın.
6. Uygulama kaydı özetinizi inceleyin. Değişiklik yapmak için Düzenle'yi tıklayın. Uygulama kaydında sorun yoksa Kontrol Paneline Dön'ü tıklayın.

Web uygulaması için kimlik bilgilerini yetkilendirme

Son kullanıcı olarak kimlik doğrulaması yapmak ve uygulamanızda kullanıcı verilerine erişmek için bir veya daha fazla OAuth 2.0 İstemci 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.

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

   Kimlik Bilgileri'ne git

2. Kimlik Bilgileri 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 Console'da gösterilir.
5. Uygulamanızla ilgili yetkili URI'lar ekleyin:
   • İstemci tarafı uygulamalar (JavaScript): Yetkilendirilmiş 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 isteği gönderebileceği alan adlarını 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'sı girin.
6. Create'i (Oluştur) tıklayın. Yeni İstemci Kimliğinizi ve İstemci gizli anahtarınızı gösteren OAuth istemcisi oluşturma ekranı görünür.

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

7. OK (Tamam) seçeneğini 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 ihtiyaç duyacağınızdan bu kimlik bilgilerini not edin.

API anahtarı oluşturma

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

   Kimlik Bilgileri'ne git

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ı, 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ı uygulama başlıklı makaleye bakın.

Örneği oluşturma

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

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

   classroom/quickstart/index.html

   GitHub'da göster

   <!DOCTYPE html>
   <html>
     <head>
       <title>Classroom API Quickstart</title>
       <meta charset="utf-8" />
     </head>
     <body>
       <p>Classroom 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://classroom.googleapis.com/$discovery/rest';
   
         // Authorization scopes required by the API; multiple scopes can be
         // included, separated by spaces.
         const SCOPES = 'https://www.googleapis.com/auth/classroom.courses.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 listCourses();
           };
   
           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 names of the first 10 courses the user has access to. If
          * no courses are found an appropriate message is printed.
          */
         async function listCourses() {
           let response;
           try {
             response = await gapi.client.classroom.courses.list({
               pageSize: 10,
             });
           } catch (err) {
             document.getElementById('content').innerText = err.message;
             return;
           }
   
           const courses = response.result.courses;
           if (!courses || courses.length == 0) {
             document.getElementById('content').innerText = 'No courses found.';
             return;
           }
           // Flatten to string to display
           const output = courses.reduce(
               (str, course) => `${str}${course.name}\n`,
               'Courses:\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ğidir.
   • YOUR_API_KEY: Ön koşul olarak oluşturduğunuz API anahtarıdır.

Örneği çalıştır

1. Çalışma dizininize 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 yetkilendirmeniz için bir istem gösterilir:
   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 Google Classroom API'yi çalıştırır ve çağırır.

Sonraki adımlar

• Kimlik doğrulama ve yetkilendirme sorunlarını giderme
• Classroom API referans dokümanları
• GitHub'ın google-api-javascript-client bölümü