JavaScript – krótkie wprowadzenie

Z tego krótkiego przewodnika dowiesz się, jak skonfigurować prostą stronę, która wysyła żądania do interfejsu YouTube Data API. Ten krótki przewodnik wyjaśnia, 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 krótki przewodnik, potrzebujesz:

  • Node.js i npm (do uruchomienia lokalnego serwera WWW),
  • dostępu do internetu i przeglądarki internetowej,
  • konta Google.

Krok 1. Skonfiguruj projekt i dane logowania

Utwórz lub wybierz projekt w konsoli Cloud. W konsoli Cloud wykonaj te czynności dla swojego projektu:

  1. W panelu biblioteki wyszukaj YouTube Data API v3. Kliknij listę tego interfejsu API i sprawdź, czy jest on włączony w Twoim projekcie.

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

    1. Utwórz klucz interfejsu API Będziesz go używać 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ń, które wymagają autoryzacji użytkownika, musisz użyć danych logowania OAuth 2.0. Na przykład musisz mieć autoryzację użytkownika, aby pobrać informacje o kanale w YouTube aktualnie uwierzytelnionego użytkownika.

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

Krok 2. Skonfiguruj i uruchom przykład

Aby uzyskać przykładowy kod do pobierania informacji o kanale GoogleDevelopers w YouTube, użyj widżetu APIs Explorer w panelu bocznym. To żądanie używa klucza interfejsu API do identyfikowania Twojej aplikacji i nie wymaga autoryzacji użytkownika ani żadnych 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 wyświetlania wyników według identyfikatora kanału.

    Kliknij symbol kodu w przypadku pierwszej pozycji, aby otworzyć i wypełnić APIs Explorer na pełnym ekranie.

    Obraz przedstawiający lokalizację linku do symbolu kodu w tabeli z przypadkami użycia w dokumentacji 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 APIs Explorer na pełnym ekranie widać:

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

    2. Pod parametrami znajduje się sekcja Dane logowania. W menu w tej sekcji powinna być wyświetlana wartość Klucz interfejsu API. Domyślnie APIs Explorer używa danych logowania do wersji demonstracyjnej, aby ułatwić rozpoczęcie pracy. Aby uruchomić przykład lokalnie, użyjesz jednak własnego klucza interfejsu API.

      Obraz pokazujący „Dane logowania” w APIs Explorer na pełnym ekranie i menu z wybraną opcją „Klucz interfejsu API”.

  4. Po prawej stronie APIs Explorer 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 krótkiego 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 w przeglądarce, np. „Narzędzia dla programistów” w przeglądarce Chrome.

    1. Kliknij przycisk load (wczytaj) na stronie, aby wczytać bibliotekę klienta interfejsów API Google do JavaScript. Po kliknięciu przycisku w konsoli dewelopera powinien wyświetlić się komunikat informujący o wczytaniu klienta GAPI.

    2. Kliknij przycisk execute (wykonaj), aby wysłać żądanie do interfejsu API. W konsoli dewelopera powinna się wtedy wyświetlić odpowiedź interfejsu API.

Krok 3. Uruchom autoryzowane żądanie

W tym kroku zmodyfikujesz przykładowy kod tak, 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 w przypadku trzeciej pozycji w tabeli. Ten przypadek użycia polega na wywołaniu metody list w przypadku „mojego kanału”.

  3. Ponownie po lewej stronie APIs Explorer na pełnym ekranie zobaczysz listę parametrów, a następnie sekcję Dane logowania. W porównaniu z przykładem, w którym pobierano informacje o kanale GoogleDevelopers, występują jednak 2 zmiany:

    1. W sekcji parametrów zamiast ustawionej wartości parametru id wartość parametru mine powinna być ustawiona na true. Informuje to serwer interfejsu API, aby pobrał informacje o kanale aktualnie uwierzytelnionego użytkownika.

    2. W sekcji Dane logowania w menu powinna być wybrana opcja Google OAuth 2.0.

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

      Obraz przedstawiający zakresy w eksploratorze interfejsów API na pełnym ekranie i wybraną opcję użycia 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 znaków YOUR_CLIENT_ID i zastąp go identyfikatorem klienta utworzonym w kroku 1 tego krótkiego przewodnika.

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

    npx http-server -p 8000

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

  7. Kliknij przycisk authorize and load (autoryzuj i wczytaj) na stronie, aby wczytać bibliotekę klienta interfejsów API Google do JavaScript i rozpocząć proces autoryzacji. Powinien pojawić się komunikat z prośbą 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 pomyślnym zalogowaniu i wczytaniu klienta interfejsu API.

  8. Kliknij przycisk execute (wykonaj), aby wysłać żądanie do interfejsu API. W konsoli dewelopera powinna się wtedy wyświetlić odpowiedź interfejsu API.

Więcej informacji