JavaScript – krótkie wprowadzenie

Z tego przewodnika dowiesz się, jak skonfigurować prostą stronę, która wysyła żądania do interfejsu YouTube Data API. W tym krótkim wprowadzeniu wyjaśniamy, jak wysłać 2 żądania do interfejsu API:

  1. Aby pobrać informacje o kanale GoogleDevelopers w YouTube, użyjesz klucza interfejsu API, który identyfikuje Twoją aplikację.
  2. Aby przesłać autoryzowane żądanie, które pobiera informacje o Twoim kanale w YouTube, użyjesz identyfikatora klienta OAuth 2.0.

Wymagania wstępne

Aby uruchomić ten przewodnik, musisz mieć:

  • Python 2.4 lub nowszy (do obsługi serwera WWW)
  • Dostęp do internetu i przeglądarki.
  • konto Google;

Krok 1. Skonfiguruj projekt i dane logowania

Utwórz lub wybierz projekt w Konsoli interfejsów API. Wykonaj w konsoli interfejsów API te czynności dotyczące projektu:

  1. W panelu biblioteki wyszukaj interfejs YouTube Data API v3. Kliknij pozycję tego interfejsu API i upewnij się, że jest on włączony w Twoim projekcie.

  2. W panelu danych logowania utwórz 2 zestawy danych logowania:

    1. Utwórz klucz interfejsu API Klucz interfejsu API będzie służyć do wysyłania żądań interfejsu API, które nie wymagają autoryzacji użytkownika. Na przykład nie musisz mieć autoryzacji użytkownika, aby pobrać informacje o publicznym kanale w YouTube.

    2. Utwórz identyfikator klienta OAuth 2.0 Ustaw typ aplikacji na Aplikacja internetowa. W przypadku żądań wymagających autoryzacji użytkownika musisz używać danych logowania OAuth 2.0. Na przykład musisz uzyskać autoryzację użytkownika, aby pobrać informacje o kanale YouTube aktualnie uwierzytelnionego użytkownika.

      W polu Autoryzowane źródła JavaScriptu wpisz adres URL http://localhost:8000. Pole Autoryzowane identyfikatory URI przekierowania możesz pozostawić puste.

Krok 2. Skonfiguruj i uruchom przykład

Użyj widżetu API Explorer w panelu bocznym, aby uzyskać przykładowy kod do pobierania informacji o kanale GoogleDevelopers w YouTube. To żądanie używa klucza interfejsu API do identyfikowania aplikacji i nie wymaga autoryzacji użytkownika ani specjalnych uprawnień od użytkownika uruchamiającego przykład.

  1. Otwórz dokumentację metody channels.list interfejsu API.

  2. Na tej stronie w sekcji „Typowe przypadki użycia” znajduje się tabela, która wyjaśnia kilka typowych sposobów użycia tej metody. Pierwsza pozycja w tabeli dotyczy wyników wyświetlania według identyfikatora kanału.

    Kliknij symbol kodu przy pierwszej pozycji, aby otworzyć i wypełnić narzędzie APIs Explorer na pełnym ekranie.

    Obraz, który identyfikuje lokalizację linku do symbolu kodu w tabeli zawierającej przypadki użycia w dokumentacji channels.list. Tekst alternatywny dla tego obrazu identyfikuje go jako symbol kodu i określa przypadek użycia powiązany z tym linkiem.

  3. Po lewej stronie narzędzia APIs Explorer w trybie pełnoekranowym widać:

    1. Pod nagłówkiem Parametry żądania znajduje się lista parametrów obsługiwanych przez tę metodę. Wartości parametrów part i id powinny być ustawione. Wartość parametru id, czyli UC_x5XG1OV2P6uZZ5FSM9Ttw, to identyfikator kanału GoogleDevelopers w YouTube.

    2. Pod parametrami znajduje się sekcja Dane logowania. Menu w tej sekcji powinno zawierać wartość Klucz interfejsu API. Eksplorator interfejsów API domyślnie używa danych logowania wersji demonstracyjnej, aby ułatwić rozpoczęcie pracy. Aby uruchomić przykład lokalnie, użyjesz własnego klucza interfejsu API.

      Obraz przedstawiający „Dane logowania” w trybie pełnoekranowym Eksploratora interfejsów API oraz menu z wybraną opcją „Klucz interfejsu API”.

  4. Po prawej stronie eksploratora interfejsów API na pełnym ekranie znajdują się karty z przykładami kodu w różnych językach. Wybierz kartę JavaScript.

  5. Skopiuj przykładowy kod i zapisz go w pliku o nazwie example.html.

  6. W pobranym przykładzie znajdź ciąg znaków YOUR_API_KEY i zastąp go kluczem interfejsu API utworzonym w kroku 1 tego przewodnika.

  7. Uruchom serwer WWW za pomocą tego polecenia z katalogu roboczego:

    Python 2.x

    python -m SimpleHTTPServer 8000

    Python 3.x

    python -m http.server 8000

  8. Otwórz plik example.html w przeglądarce. Otwórz też narzędzia deweloperskie przeglądarki, np. „Narzędzia dla programistów” w Chrome.

    1. Kliknij przycisk Wczytaj na stronie, aby wczytać bibliotekę klienta interfejsów API Google w JavaScript. Po kliknięciu przycisku w konsoli dewelopera powinna się wyświetlić informacja o wczytaniu klienta GAPI.

    2. Aby wysłać żądanie do interfejsu API, kliknij przycisk Wykonaj. W konsoli dewelopera powinna się wtedy wyświetlić odpowiedź interfejsu API.

Krok 3. Uruchom autoryzowane żądanie

W tym kroku zmodyfikujesz przykładowy kod, aby zamiast pobierać informacje o kanale GoogleDevelopers w YouTube, pobierał informacje o Twoim kanale w YouTube. To żądanie wymaga autoryzacji użytkownika.

  1. Wróć do dokumentacji metody channels.list interfejsu API.

  2. W sekcji „Typowe przypadki użycia” kliknij symbol kodu przy trzeciej pozycji na liście w tabeli. W tym przypadku chodzi o wywołanie metody list dla „my channel”.

  3. Po lewej stronie narzędzia APIs Explorer w trybie pełnoekranowym zobaczysz listę parametrów, a za nią sekcję Dane logowania. W porównaniu z przykładem, w którym pobierasz informacje o kanale GoogleDevelopers, występują jednak 2 różnice:

    1. W sekcji parametrów zamiast wartości parametru id powinna być ustawiona wartość parametru mine na true. To polecenie nakazuje serwerowi API pobranie informacji o kanale aktualnie uwierzytelnionego użytkownika.

    2. W sekcji Dane logowania w menu powinno być wybrane Google OAuth 2.0.

      Jeśli klikniesz link Pokaż zakresy, powinien być zaznaczony zakres https://www.googleapis.com/auth/youtube.readonly.

      Ilustracja przedstawiająca zakresy w interfejsie API Explorer na pełnym ekranie oraz wybraną opcję używania danych logowania „Google OAuth 2.0”.

  4. Podobnie jak w poprzednim przykładzie wybierz kartę JavaScript, skopiuj przykładowy kod i zapisz go w example.html.

    W kodzie znajdź ciąg YOUR_CLIENT_ID i zastąp go identyfikatorem klienta utworzonym w kroku 1 tego krótkiego wprowadzenia.

  5. Uruchom serwer WWW za pomocą tego polecenia z katalogu roboczego:

    Python 2.x

    python -m SimpleHTTPServer 8000

    Python 3.x

    python -m http.server 8000

  6. Otwórz plik http://localhost:8000/example.html w przeglądarce. Otwórz narzędzia deweloperskie przeglądarki, np. „Narzędzia dla programistów” w przeglądarce Chrome.

  7. Kliknij na stronie przycisk authorize and load (autoryzuj i wczytaj), aby wczytać bibliotekę klienta JavaScript Google API i rozpocząć proces autoryzacji. Powinien pojawić się monit o przyznanie aplikacji uprawnień do odczytywania danych z Twojego konta YouTube.

    Jeśli przyznasz uprawnienia, w konsoli dewelopera powinny się wyświetlić komunikaty informujące o tym, że logowanie się powiodło i że klient interfejsu API został wczytany.

  8. Aby wysłać żądanie do interfejsu API, kliknij przycisk Wykonaj. W konsoli dewelopera powinna się wtedy wyświetlić odpowiedź interfejsu API.

Więcej informacji