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 dowiesz się, 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ć:

  • Node.js i npm (do uruchamiania lokalnego serwera WWW)
  • dostęp do internetu i przeglądarki internetowej,
  • konto Google,

Krok 1. Skonfiguruj projekt i dane logowania

Utwórz lub wybierz projekt w konsoli Cloud. Wykonaj w konsoli Cloud 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 używany do wysyłania żądań do 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. Konfigurowanie i uruchamianie przykładu

Użyj widżetu APIs 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 wskazuje lokalizację linku do symbolu kodu w tabeli z przypadkami użycia w dokumentacji metody channels.list. Tekst alternatywny tego obrazu identyfikuje go jako symbol kodu i określa przypadek użycia powiązany z tym linkiem.

  3. Po lewej stronie narzędzia API 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, UC_x5XG1OV2P6uZZ5FSM9Ttw, to identyfikator kanału GoogleDevelopers w YouTube.

    2. Pod parametrami znajduje się sekcja Dane logowania. Menu w tej sekcji powinno wyświetlać wartość Klucz interfejsu API. APIs Explorer 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 sekcję „Dane logowania” w trybie pełnoekranowym APIs Explorer oraz menu z wybraną opcją „Klucz interfejsu API”.

  4. Po prawej stronie eksploratora interfejsów API pełnego ekranu 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:

    npx http-server -p 8000

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

    1. Kliknij przycisk load 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 pliku 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:

    npx http-server -p 8000

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

  7. Na stronie kliknij przycisk authorize and load (autoryzuj i wczytaj), aby wczytać bibliotekę klienta interfejsów API Google dla JavaScript 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