本頁面由 Cloud Translation API 翻譯而成。

JavaScript 快速入門導覽課程

本快速入門指南說明如何設定簡單的頁面，向 YouTube Data API 發出要求。本快速入門導覽課程實際上說明如何提出兩個 API 要求：

您會使用 API 金鑰來辨識您的應用程式，以擷取 GoogleDevelopers YouTube 頻道的相關資訊。
您將使用 OAuth 2.0 用戶端 ID 提交已授權要求來擷取您自己 YouTube 頻道的相關資訊。

必要條件

如要執行本快速入門導覽課程，您必須符合以下條件：

Python 2.4 以上版本 (提供網路伺服器)
網際網路和網路瀏覽器的存取。
Google 帳戶。

步驟 1：設定專案和憑證

在 API 主控台建立或選取專案。在 API 控制台中為您的專案完成以下工作：

在資料庫面板中搜尋 YouTube Data API v3。點進該 API 的列表，並確定您的專案已啟用該 API。
在憑證面板中建立兩個憑證：
1. 建立 API 金鑰 您將使用 API 金鑰發出不需要使用者授權的 API 要求。舉例來說，您不需要取得使用者授權，即可擷取公開 YouTube 頻道的相關資訊。
2. 建立 OAuth 2.0 用戶端 ID 將應用程式類型設為「網路應用程式」。使用 OAuth 2.0 憑證時，您必須使用需要使用者授權的要求。舉例來說，您必須取得使用者授權，才能擷取目前已驗證使用者的 YouTube 頻道相關資訊。
  
  在「Authorized JavaScript origins」(已授權的 JavaScript 來源) 欄位中輸入 http://localhost:8000。您可以將授權重新導向 URI 欄位留空。

步驟 2：設定並執行範例

使用側邊面板中的 APIs Explorer 小工具取得程式碼範例，以擷取 GoogleDevelopers YouTube 頻道的相關資訊。此要求使用 API 金鑰來識別您的應用程式，且不需要使用者授權，或執行此範例的使用者的任何特殊權限。

開啟 API channels.list 方法的說明文件。
在這個頁面中，「常見用途」一節中的表格說明瞭這個方法的幾種常見方式。表格中的第一個商家資訊是依頻道 ID 列出結果。

按一下第一個商家資訊的程式碼符號，以開啟並填入全螢幕 API Explorer。
全螢幕 API Explorer 的左側會顯示以下內容：
1. 「Request parameters」(要求參數) 標頭的下方列出了該方法支援的參數清單。part 和 id 參數值應進行設定。id 參數值 UC_x5XG1OV2P6uZZ5FSM9Ttw 是 GoogleDevelopers YouTube 頻道的 ID。
2. 參數下方有一個名為「憑證」的部分，該部分中的下拉式選單會顯示 API 金鑰的值。根據預設，APIs Explorer 會使用示範憑證，以便輕鬆上手。不過，您必須使用自己的 API 金鑰在本機執行範例。
全螢幕 API Explorer 的右側會顯示不同語言的程式碼範例分頁。選取 [JavaScript] 分頁標籤。
複製程式碼範例，然後儲存在名為 example.html 的檔案中。
在下載的範例中，找出 YOUR_API_KEY 字串，並將其替換成您在本快速入門導覽課程步驟 1 中建立的 API 金鑰。
使用工作目錄中的下列指令來啟動網路伺服器：
Python 2.x
```
python -m SimpleHTTPServer 8000
```
Python 3.x
```
python -m http.server 8000
```
在瀏覽器中開啟 example.html 檔案。同時也開啟瀏覽器的開發人員工具，例如 Chrome 瀏覽器的「開發人員工具」。
1. 按一下頁面上的 [load] 按鈕，載入 JavaScript 適用的 Google API 用戶端程式庫。當您點選按鈕後，開發人員控制台會顯示一則附註，指出 GAPI 用戶端已載入。
2. 按一下「Execute」按鈕傳送 API 要求。接著，開發人員主控台應該會顯示 API 回應。

步驟 3：執行已授權的要求

在這個步驟中，您將修改程式碼範例，這樣就不會擷取 GoogleDevelopers YouTube 頻道的相關資訊，而是擷取您 your YouTube 頻道的相關資訊。此要求需要使用者授權。

返回 API 的 channels.list 方法的說明文件。
在「常見用途」區段中，按一下資料表中第三個商家資訊的程式碼符號。此應用實例就是為「我的頻道」呼叫 list 方法。
同樣地，在全螢幕 API Explorer 的左側，您會看到參數清單，後面接著「憑證」區段。然而，如果您擷取了 GoogleDevelopers 管道相關資訊，該範例有兩項變更：
1. 在參數區段中，mine 參數值應設為 true，而非 id 參數值。這會指示 API 伺服器擷取目前已驗證使用者頻道的相關資訊。
2. 在「Credentials」(憑證) 區段中，下拉式選單應選取 Google OAuth 2.0 選項。
  
  此外，如果您按一下「顯示範圍」連結，則應檢查 https://www.googleapis.com/auth/youtube.readonly 範圍。
和上例一樣，選取「JavaScript」分頁標籤，複製程式碼範例，然後儲存到 example.html。

在程式碼中找出 YOUR_CLIENT_ID 字串，並將其替換成您在本快速入門導覽課程步驟 1 中建立的用戶端 ID。
使用工作目錄中的下列指令來啟動網路伺服器：
Python 2.x
```
python -m SimpleHTTPServer 8000
```
Python 3.x
```
python -m http.server 8000
```
透過瀏覽器前往 http://localhost:8000/example.html 檔案。開啟瀏覽器的開發人員工具，例如 Chrome 瀏覽器的「開發人員工具」。
按一下頁面上的 [Authorize and load] (授權並載入) 按鈕，載入 Google API 的 Google API 用戶端程式庫，並啟動授權流程。系統應會提示你授權應用程式讀取 YouTube 帳戶中的資料。

如果您授予權限，開發人員控制台將會顯示訊息，指出登入成功並載入 API 用戶端。
按一下「Execute」按鈕傳送 API 要求。接著，開發人員主控台應該會顯示 API 回應。