使用 Node.js 建構 Google Workspace 外掛程式

在 Cloud Functions 中使用 Node.js 執行階段建立 Google Workspace 外掛程式。

目標

  • 設定環境。
  • 建立及部署 Cloud 函式。
  • 建立及部署外掛程式。
  • 安裝外掛程式。

先備知識

設定環境

在 Google Cloud 控制台中開啟 Cloud 專案

  1. 在 Google Cloud 控制台中，前往「Select a project」(選取專案) 頁面。

    選取 Cloud 專案

  2. 選取要使用的 Google Cloud 專案。或是按一下「建立專案」，然後按照畫面上的指示操作。如要建立 Google Cloud 專案，您可能需要開啟該專案的計費功能。

設定 OAuth 同意畫面

必須為 Google Workspace 外掛程式設定同意畫面。設定外掛程式的 OAuth 同意畫面，會定義 Google 向使用者顯示的內容。

  1. 在 Google Cloud 控制台中，依序前往「選單」圖示 >「API 和服務」>「OAuth 同意畫面」。

    前往 OAuth 同意畫面

  2. 在「使用者類型」部分選取「內部」，然後按一下「建立」。
  3. 填寫應用程式註冊表單，然後按一下「儲存並繼續」。

  4. 您現在可以略過新增範圍的步驟，然後按一下「儲存並繼續」。 日後建立要在 Google Workspace 機構外部使用的應用程式時，您必須將「使用者類型」變更為「外部」，再新增應用程式所需的授權範圍。

  5. 查看應用程式註冊摘要。如要修改資訊，請按一下「編輯」。如果應用程式註冊正確無誤，請按一下「Back to Dashboard」(返回資訊主頁)。

建立及部署 Cloud 函式

  1. 在本機終端機中開啟 Cloud Functions、Cloud Build 和 Google Workspace Add-ons API：

    gcloud services enable cloudfunctions cloudbuild.googleapis.com gsuiteaddons.googleapis.com

  2. 在空白目錄中，使用下列程式碼範例建立 function.js 檔案：

    /**
 * Cloud Function that loads the homepage for a
 * Google Workspace Add-on.
 *
 * @param {Object} req Request sent from Google
 * @param {Object} res Response to send back
 */
exports.loadHomePage = function addonsHomePage (req, res) {
  res.send(createAction());
};

/** Creates a card with two widgets. */
function createAction() {
  return {
    "action": {
      "navigations": [
        {
          "pushCard": {
            "header": {
              "title": "Cats!"
            },
            "sections": [
              {
                "widgets": [
                  {
                    "textParagraph": {
                      "text": "Your random cat:"
                    }
                  },
                  {
                    "image": {
                      "imageUrl": "https://cataas.com/cat"
                     }
                  }
                ]
              }
            ]
          }
        }
      ]
    }
  };
}

  3. 部署函式：

    gcloud functions deploy loadHomePage --runtime nodejs12 --trigger-http

    如果出現提示訊息，請指定不允許在未經驗證的情況下叫用函式。部署函式可能需要幾分鐘的時間。

建立外掛程式部署作業

  1. 找出外掛程式的服務帳戶電子郵件地址：

    gcloud workspace-add-ons get-authorization

  2. 將 cloudfunctions.invoker 角色授予服務帳戶：

    gcloud functions add-iam-policy-binding loadHomePage \
    --role roles/cloudfunctions.invoker \
    --member serviceAccount:SERVICE_ACCOUNT_EMAIL

  3. 取得已部署函式的網址。如要取得網址，請執行以下指令，並在 httpsTrigger 區段下尋找 url 欄位：

    gcloud functions describe loadHomePage

  4. 使用下列程式碼範例建立 deployment.json 檔案。將 URL 替換為上一步中部署的函式網址。

    {
  "oauthScopes": ["https://www.googleapis.com/auth/gmail.addons.execute"],
  "addOns": {
    "common": {
      "name": "My HTTP Add-on",
      "logoUrl": "https://raw.githubusercontent.com/webdog/octicons-png/main/black/beaker.png",
      "homepageTrigger": {
        "runFunction": "URL"
      }
    },
    "gmail": {},
    "drive": {},
    "calendar": {},
    "docs": {},
    "sheets": {},
    "slides": {}
  }
}

  5. 建立部署作業：

    gcloud workspace-add-ons deployments create quickstart \
    --deployment-file=deployment.json

安裝外掛程式

  1. 在開發模式中安裝部署項目：

    gcloud workspace-add-ons deployments install quickstart

  2. 開啟或重新載入 Gmail 即可查看外掛程式。在右側的工具列中，尋找「燒杯」圖示。

  3. 按一下圖示即可開啟外掛程式。如果系統顯示提示，請授權外掛程式。

選用：清除

如要避免系統向您的帳戶收取費用，請刪除您建立的資源：

  1. 從 Google 帳戶中解除安裝外掛程式：

    gcloud workspace-add-ons deployments uninstall quickstart

  2. 如要避免在本快速入門導覽課程中使用資源產生費用，請刪除 Cloud 專案：

    gcloud projects delete PROJECT_ID

    將 PROJECT_ID 替換為您在快速入門導覽課程中使用的 Cloud 專案 ID。您可以在 Google Cloud 控制台的「Dashboard」(資訊主頁) 頁面中找到 Cloud 專案 ID。

後續步驟

如要在 Google Workspace 外掛程式中新增更多功能，請參閱下列指南：