Google 课堂插件现已面向开发者正式推出！如需了解详情，请参阅插件文档。

此页面由 Cloud Translation API 翻译。

演示

本系列演示介绍了课堂插件。每个演示步骤都涉及概念，在单个 Web 应用中实现它们。目的是帮助您如何设置、配置和发布功能插件

您的插件必须与 Google Cloud 项目交互。如果您不熟悉 Google Cloud，建议您阅读入门指南。您负责管理 API 访问权限和 Google Workspace Marketplace SDK Google Cloud 控制台。如需详细了解 Marketplace SDK，请访问 Google Workspace Marketplace 商品详情指南页面。

本指南涵盖了以下主题：

使用 Google Cloud 创建页面，以通过 iframe 的形式展示课堂。
添加 Google 单点登录 (SSO) 并允许用户登录。
进行 API 调用以将插件附加到作业中。
满足关键的插件提交要求和所需的功能。

本指南假定您熟悉编程和基础 Web 应用开发概念。我们强烈建议您阅读项目配置指南。本页包含一些未完全涵盖的配置详细信息。

实现示例

完整的参考示例可在 Python 中找到。部分实现 Java 和 Node.js 也可用。这些实现是在后续网页中找到示例代码的来源。

下载位置

GitHub 代码库中提供了 Python 和 Java 示例：

您可以下载 zip 文件的 Node.js 示例：

Node.js 归档

前提条件

请查看以下部分以准备新的插件项目。

HTTPS 证书

虽然您可以在任何开发环境中托管应用， Google 课堂插件仅在 https://之前提供。因此，您需要一个采用 SSL 加密的服务器来部署应用或在插件 iframe。

您可以将 localhost 与 SSL 证书搭配使用；如果存在以下情况，请考虑使用 mkcert 您需要创建一个用于本地开发的证书。

Google Cloud 项目

您需要配置一个 Google Cloud 项目，以便与这些示例搭配使用。请参阅 Google Cloud 项目创建指南。步骤。设置 Google Cloud 项目部分还会逐步介绍要执行的操作。

完成后，以 JSON 文件格式下载 OAuth 2.0 客户端 ID；则需要添加复制到解压缩的示例目录。请参阅了解文件。

OAuth 凭据

要创建新的 OAuth 凭据，请按以下步骤操作：

前往 Google Cloud 凭据页面。确保确认您已在屏幕顶部选择了正确的项目。
点击创建凭据，然后从下拉菜单中。
在下一页面上： <ph type="x-smartling-placeholder">
- 将应用类型设置为网页应用。
- 在已获授权的重定向 URI 下，点击添加 URI。将完整 path。例如： https://my.domain.com/auth-callback 或 https://localhost:5000/callback。您创建并处理此路由详细介绍您可以随时修改或添加更多此类路线。
- 点击创建。
然后，您会收到一个包含新创建的凭据的对话框。选择 下载 JSON 选项。将下载的 JSON 文件复制到您的服务器目录。

特定语言的前提条件

查看每个代码库中的 README 文件以获取前提条件。

Python

我们的 Python 示例使用的是 Flask 框架。您可以下载从提供的链接中获取完整的源代码。

如有必要，请安装 Python 3.7 及更高版本，并确保 pip 可用。

python3 -m ensurepip --upgrade

我们还建议您设置和激活新的 Python 虚拟设备环境

python3 -m venv .classroom-addon-env
source .classroom-addon-env/bin/activate

以下文件内的每个演示子目录中都有一个 requirements.txt：下载的示例。您可以使用以下命令快速安装所需的库： pip。使用以下命令安装第 1 个演示

cd flask/01-basic-app
pip install -r requirements.txt

Node.js

我们的 Node.js 示例使用的是 Express 框架。您可以下载可通过提供的链接获取完整源代码。

本示例需要使用 Node.js v16.13 或更高版本。

使用 npm 安装所需的节点模块。

npm install

Java

我们的 Java 示例使用的是 Spring Boot 框架。您可以下载可通过提供的链接获取完整源代码。

如果您尚未在机器上安装 Java 11 及更高版本，请进行安装。

Spring Boot 应用可以使用 Gradle 或 Maven 来处理构建和管理依赖项此示例包含 Maven 封装容器，该封装容器可确保无需安装 Maven 即可成功构建。

在下载或克隆项目的目录中，运行以下命令，以确保您拥有运行项目的前提条件。

java --version
./mvnw --version

在 Windows 系统中，运行以下命令：

java -version
mvnw.cmd --version

了解文件

以下部分介绍了示例目录的布局。

目录名称

每个代码库都包含几个目录，这些目录的名称以数字开头，例如 /01-basic-app/。这些数字对应于具体演示步骤。每个目录都包含一个功能齐全的 Web 应用，该应用可实现以下功能：详细介绍。例如，/01-basic-app/ 目录中包含创建插件的最终实现代码，演示。

目录内容

目录内容因实现语言而异：

Python

目录根目录包含以下文件：
- main.py - Python 应用入口点。指定服务器您想在此文件中使用的配置，然后将其运行启动服务器
- requirements.txt - 运行 Web 应用所需的 Python 模块。您可以使用 pip install -r requirements.txt 自动安装这些插件。
- client_secret.json - 从 Google 下载的客户端密钥文件 Cloud 的最新动态和提示。请注意，示例存档中未包含该资源；您应重命名下载的凭据文件，并将其复制到目录的根目录下。
  
  重要提示 ：您必须提供您的 Google Cloud 项目，然后才能运行示例。
config.py - Flask 服务器的配置选项。
webapp 目录包含 Web 应用的内容。此软件包包含以下工具：
/templates/ 目录，其中包含适用于各种页面的 Jinja 模板。
包含图片、CSS 和辅助 JavaScript 的 /static/ 目录文件。
routes.py - Web 应用路由的处理程序方法。
__init__.py - webapp 模块的初始化程序。这个 initializer 会启动 Flask 服务器并加载配置选项在 config.py 中设置。
特定演示步骤所需的其他文件。

Node.js

演示的每个步骤都可以在各自的 <step> 中找到子文件夹。每个步骤都包含：

JavaScript、CSS 和图片等静态文件可在 ./<step>/public 文件夹。
快速路由器位于 ./<step>/routes 文件夹中。
HTML 模板位于 ./<step>/views 文件夹中。
服务器应用为 ./<step>/app.js。

Java

项目目录包含以下内容：

src.main 目录包含要运行的源代码和配置已成功应用此目录包含以下内容： + java.com.addons.spring 目录包含 Application.java 和 Controller.java 文件。通过 Application.java 文件负责运行而 Controller.java 文件负责处理端点逻辑 + resources 目录包含 templates 目录， HTML 和 JavaScript 文件。它还包含 application.properties 文件，用于指定运行密钥库文件的路径、 templates 目录中。此示例包含密钥库文件位于 resources 目录中。您可以将其存储在但请务必更新 application.properties 文件与相应的路径相关联。
- pom.xml 包含构建项目和定义所需的依赖项
- .gitignore 包含不应上传到 Git 的文件名。请务必在此 .gitignore 中添加密钥库的路径。在提供的示例中，这是 secrets/*.p12（密钥库。用于演示 2 和您还应该包含指向 client_secret.json 文件，以确保您没有将将密钥保存在远程代码库中对于演示 3 及更高版本，应添加 H2 数据库文件和文件数据存储区的路径。如需详细了解这些数据存储区的设置，请参阅有关处理重复访问的第三个演示。
- mvnw 和 mvnw.cmd 是适用于 Unix 和 Windows。例如，在./mvnw --version Unix 会输出 Apache Maven 版本和其他信息。
- .mvn 目录包含 Maven 封装容器的配置。

运行示例服务器

您需要启动服务器才能对其进行测试。请按照以下说明操作：使用您选择的语言运行示例服务器：

Python

OAuth 凭据

如前所述，创建并下载 OAuth 凭据。地点 JSON 文件放在根目录下以及应用服务器中启动文件。

配置服务器

您可以通过多种方式运行 Web 服务器。在您的 Python 文件中，请添加以下内容之一：

localhost不安全。请注意，这适合用于；在 Google 课堂插件 iframe。

if __name__ == "__main__":
  # Disable OAuthlib's HTTPs verification.
  os.environ["OAUTHLIB_INSECURE_TRANSPORT"] = "1"

  # Run the web app at http://localhost:5000.
  app.run(debug=True)

保障 localhost 的安全。您必须为 ssl_context 参数。

if __name__ == "__main__":
  # Run the web app at https://localhost:5000.
  app.run(host="localhost",
          ssl_context=("localhost.pem", "localhost-key.pem"),
          debug=True)

Gunicorn 服务器。这适用于可正式投入使用的服务器或云部署我们建议为 PORT 使用此启动选项。

if __name__ == "__main__":
  # Run the web app at https://<your domain>:<server_port>.
  # Defaults to https://<your domain>:8080.
  server_port = os.environ.get("PORT", "8080")
  app.run(debug=True, port=server_port, host="0.0.0.0")

启动服务器

按照上一步。

python main.py

点击显示的网址，在浏览器中查看您的 Web 应用，确认它是否正常运行。

Node.js

配置服务器

为了通过 HTTPS 运行服务器，您需要创建一个自证书用于通过 HTTPS 运行应用。这些凭据应已另存为代码库根目录中的 sslcert/cert.pem 和 sslcert/key.pem 文件夹中。您可能需要将这些密钥添加到操作系统密钥链中，接受它们。

确保 .gitignore 文件中包含 *.pem，因为您不需要将文件提交到 Git

启动服务器

您可以使用以下命令（将 step01 替换为）运行应用以获取作为服务器运行的正确步骤（例如 step01 对于 01-basic-app 和 step02 适用于 02-sign-in）。

npm run step01

或

npm run step02

这将在 https://localhost:5000 启动 Web 服务器。

您可以在终端使用 Control + C 终止服务器。

Java

配置服务器

为了通过 HTTPS 运行服务器，您需要创建一个自证书用于通过 HTTPS 运行应用。

请考虑使用 mkcert 进行本地开发。安装 mkcert 后，以下命令会生成本地存储的证书，用于运行 HTTPS。

mkcert -install
mkcert -pkcs12 -p12-file <path_to_keystore> <domain_name>

此示例在资源目录中包含密钥库文件。您可以您可以根据需要将其存储在任何位置，但请务必更新 application.properties 文件替换为相应的路径。域名为您在其中运行项目的网域（例如 localhost）。

确保 .gitignore 文件中包含 *.p12，因为您不需要将文件提交到 Git

启动服务器

通过运行 Application.java 中的 main 方法启动服务器文件。例如，在 IntelliJ 中，您可以右键点击 Application.javaRun 'Application'在 src/main/java/com/addons/spring 目录或打开 Application.java 点击文件main(String[] args)左侧的绿色箭头方法签名。或者，您也可以在终端运行项目窗口：

./mvnw spring-boot:run

或者在 Windows 上：

mvnw.cmd spring-boot:run

这将在 https://localhost:5000 或您选定的端口上启动服务器在 application.properties 中指定。