JavaScript 快速入門導覽課程

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

1. 您將使用 API 金鑰 (用於識別應用程式)，擷取 GoogleDevelopers YouTube 頻道資訊。
2. 您將使用 OAuth 2.0 用戶端 ID 提交授權要求，以擷取自家 YouTube 頻道的相關資訊。

注意： 一般來說，如果用途是使用 API 金鑰，您可以按照第一個範例的操作說明進行；如果用途是使用 OAuth 2.0 授權，則可按照第二個範例的操作說明進行。如需更多範例，請參閱用途和程式碼範例工具。

必要條件

如要執行這項快速入門導覽課程，請務必符合以下條件：

• Node.js 和 npm (用於執行本機網路伺服器)
• 連上網際網路並使用網路瀏覽器。
• Google 帳戶。

步驟 1：設定專案和憑證

在 Cloud 控制台中建立或選取專案。在專案的 Cloud 控制台中完成下列工作：

1. 在程式庫面板中，搜尋 YouTube Data API v3。按一下該 API 的資訊，確認專案已啟用該 API。

2. 在「憑證」面板中，建立兩項憑證：

   1. 建立 API 金鑰 您將使用 API 金鑰，提出不需要使用者授權的 API 要求。舉例來說，如要擷取公開 YouTube 頻道的資訊，不需要取得使用者授權。

   2. 建立 OAuth 2.0 用戶端 ID 將應用程式類型設為「網頁應用程式」。如果要求需要使用者授權，您必須使用 OAuth 2.0 憑證。舉例來說，您需要使用者授權，才能擷取目前已驗證使用者 YouTube 頻道的相關資訊。

      在「已授權的 JavaScript 來源」欄位中，輸入網址 http://localhost:8000。您可以將「已授權的重新導向 URI」欄位留空。

步驟 2：設定及執行範例

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

1. 開啟 API 的 channels.list 方法說明文件。

2. 該頁面的「常見用途」部分包含一個表格，說明這個方法的幾種常見用法。表格中的第一個項目是依頻道 ID 列出結果。

   按一下第一個清單的程式碼符號，開啟並填入全螢幕 APIs Explorer。

   

3. 全螢幕 APIs Explorer 左側會顯示下列內容：

   1. 「要求參數」標頭下方會列出方法支援的參數。請設定 part 和 id 參數值。id 參數值 UC_x5XG1OV2P6uZZ5FSM9Ttw 是 GoogleDevelopers YouTube 頻道的 ID。

   2. 參數下方有一個名為「憑證」的部分。該區段的下拉式選單應顯示「API key」(API 金鑰) 值。APIs Explorer 預設會使用試用憑證，方便您快速上手。但您會使用自己的 API 金鑰在本機執行範例。

      

4. 全螢幕 APIs Explorer 的右側會顯示分頁，其中包含不同語言的程式碼範例。選取「JavaScript」JavaScript分頁標籤。

5. 複製程式碼範例，並儲存至名為 example.html 的檔案。

6. 在下載的範例中，找出 YOUR_API_KEY 字串，並替換為您在本快速入門導覽課程步驟 1 中建立的 API 金鑰。

7. 從工作目錄使用下列指令啟動網路伺服器：

   npx http-server -p 8000
   

8. 在瀏覽器中開啟 example.html 檔案。同時開啟瀏覽器的開發人員工具，例如 Chrome 瀏覽器的「開發人員工具」。

   1. 按一下頁面上的「load」按鈕，載入 JavaScript 適用的 Google API 用戶端程式庫。按一下按鈕後，開發人員控制台應會顯示 GAPI 用戶端已載入的附註。

   2. 按一下「execute」按鈕，傳送 API 要求。開發人員控制台隨即會顯示 API 回應。

步驟 3：執行授權要求

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

1. 返回 API 的 channels.list 方法說明文件。

2. 在「Common use cases」(常見用途) 部分，按一下表格中第三個項目的程式碼符號。這個用途是呼叫「我的頻道」的 list 方法。

3. 同樣地，在全螢幕 APIs Explorer 的左側，您會看到參數清單，後面接著「Credentials」(憑證) 區段。不過，與您擷取 GoogleDevelopers 頻道資訊的範例相比，有兩項變更：

   1. 在參數部分，請勿設定 id 參數值，而是將 mine 參數值設為 true。這會指示 API 伺服器擷取目前已驗證使用者頻道的相關資訊。

   2. 在「憑證」部分，下拉式選單應選取「Google OAuth 2.0」選項。

      此外，如果點選「Show scopes」連結，系統應會勾選 https://www.googleapis.com/auth/youtube.readonly 範圍。

      

4. 與上一個範例相同，請選取「JavaScript」JavaScript分頁標籤，複製程式碼範例，然後儲存至 example.html。

   在程式碼中找出 YOUR_CLIENT_ID 字串，並替換為您在本快速入門導覽課程步驟 1 中建立的用戶端 ID。

5. 從工作目錄使用下列指令啟動網路伺服器：

   npx http-server -p 8000
   

6. 在瀏覽器中前往 http://localhost:8000/example.html 檔案。 開啟瀏覽器的開發人員工具，例如 Chrome 瀏覽器中的「開發人員工具」。

7. 按一下頁面上的「authorize and load」按鈕，載入適用於 JavaScript 的 Google API 用戶端程式庫，並啟動授權流程。系統應會提示您授予應用程式權限，允許讀取 YouTube 帳戶中的資料。

   如果您授予權限，開發人員控制台應會顯示訊息，指出登入成功且 API 用戶端已載入。

8. 按一下「execute」按鈕，傳送 API 要求。開發人員控制台應會顯示 API 回應。

延伸閱讀

• Google Developers Console 說明文件
• 適用於 JavaScript 的 Google API 用戶端程式庫說明文件
• YouTube Data API 參考文件