本系列演练展示了正常运行的 Classroom 加载项的所有活动部件。每个演练步骤都针对特定概念,并在单个 Web 应用中实现这些概念。目标是帮助您设置、配置和启动功能性插件。
您的插件必须与 Google Cloud 项目互动。如果您不熟悉 Google Cloud,建议您阅读入门指南。您可以在 Google Cloud 控制台中管理凭据、API 访问权限和 Google Workspace Marketplace SDK。如需详细了解 Marketplace SDK,请访问 Google Workspace Marketplace 商品详情指南页面。
本指南涵盖了以下主题:
- 使用 Google Cloud 创建一个网页,以便在 Classroom 的 iframe 中显示。
- 添加 Google 单点登录 (SSO),并允许用户登录。
- 通过 API 调用将插件附加到作业。
- 满足关键的插件提交要求和必需的功能。
本指南假定您熟悉编程和基本的 Web 开发概念。我们强烈建议您在开始演练之前,先阅读项目配置指南。本页面包含演练中未完全涵盖的重要配置详情。
实现示例
您可以在 Python 中找到完整的参考示例。此外,我们还提供了 Java 和 Node.js 中的部分实现。这些实现是后续页面中示例代码的来源。
下载位置
Python 和 Java 示例可在 GitHub 代码库中获取:
您可以下载 Node.js 示例的 zip 文件:
前提条件
请查看以下各部分,为新的插件项目做好准备。
HTTPS 证书
虽然您可以在任何开发环境中托管应用,但课堂插件只能通过 https://
使用。因此,您需要使用具有 SSL 加密的服务器来部署应用或在插件 iframe 中测试应用。
localhost
可以与 SSL 证书搭配使用;如果您需要为本地开发创建证书,请考虑使用 mkcert。
Google Cloud 项目
您需要配置一个 Google Cloud 项目,以便用于这些示例。如需了解开始使用 Google Cloud 项目所需的步骤,请参阅 Google Cloud 项目创建指南。第一个演练中的设置 Google Cloud 项目部分还逐步介绍了要采取的具体配置操作。
完成后,请将 OAuth 2.0 客户端 ID 下载为 JSON 文件;您需要将此凭据文件添加到解压缩后的示例目录中。如需了解特定位置的相关文件,请参阅了解文件。
OAuth 凭据
请按照以下步骤创建新的 OAuth 凭据:
- 前往 Google Cloud 凭据页面。确保您已在屏幕顶部选择正确的项目。
- 点击创建凭据,然后从下拉菜单中选择 OAuth 客户端 ID。
- 在下一页上:
- 将应用类型设置为 Web 应用。
- 在已获授权的重定向 URI 下,点击添加 URI。为应用的某个回调路由添加完整路径。例如,
https://my.domain.com/auth-callback
或https://localhost:5000/callback
。您将在本演示的后面部分创建和处理此路由。您可以随时修改或添加更多此类路线。 - 点击创建。
- 然后,您会收到一个对话框,其中包含新创建的凭据。选择下载 JSON 选项。将下载的 JSON 文件复制到服务器目录中。
特定于语言的前提条件
如需查看最新的前提条件列表,请参阅每个代码库中的自述文件。
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
快速安装所需的库。使用以下命令安装第一个演练所需的库。
cd flask/01-basic-app
pip install -r requirements.txt
Node.js
我们的 Node.js 示例使用 Express 框架。您可以从提供的链接下载完整的源代码。
此示例需要使用 Node.js v16.13 或更高版本。
使用 npm
安装所需的 Node 模块。
npm install
Java
我们的 Java 示例使用 Spring Boot 框架。您可以从提供的链接下载完整的源代码。
如果您的机器上尚未安装 Java 11 及更高版本,请进行安装。
Spring Boot 应用可以使用 Gradle 或 Maven 来处理 build 并管理依赖项。此示例包含 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 下载的客户端密钥文件。请注意,此文件未包含在示例归档中;您应重命名下载的凭据文件,并将其复制到每个目录根目录中。
config.py
- Flask 服务器的配置选项。webapp
目录包含 Web 应用的内容。 此拓扑包含以下设置:包含各种网页的 Jinja 模板的
/templates/
目录。包含图片、CSS 和辅助 JavaScript 文件的
/static/
目录。routes.py
- Web 应用路由的处理程序方法。__init__.py
-webapp
模块的初始化程序。此初始化程序会启动 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 的 Maven 封装容器可执行文件。例如,在 Unix 上运行./mvnw --version
会输出 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
实参指定一个 SSL 密钥文件元组。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 应用以启动在上一步中配置的服务器。
python main.py
点击显示的网址,在浏览器中查看您的 Web 应用,确认其运行正常。
Node.js
配置服务器
为了通过 HTTPS 运行服务器,您需要创建一个自签名证书,用于通过 HTTPS 运行应用。这些凭据应以 sslcert/cert.pem
和 sslcert/key.pem
的形式保存在代码库根文件夹中。您可能需要将这些密钥添加到操作系统密钥链中,以便浏览器接受它们。
请确保 *.pem
位于您的 .gitignore
文件中,因为您不希望将该文件提交到 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
)。
请确保 *.p12
位于您的 .gitignore
文件中,因为您不希望将该文件提交到 Git。
启动服务器
通过运行 Application.java
文件中的 main
方法来启动服务器。例如,在 IntelliJ 中,您可以右键点击 src/main/java/com/addons/spring
目录中的 Application.java
> Run 'Application'
,也可以打开 Application.java
文件,然后点击 main(String[] args)
方法签名左侧的绿色箭头。或者,您也可以在终端窗口中运行项目:
./mvnw spring-boot:run
或者在 Windows 上:
mvnw.cmd spring-boot:run
这会在 https://localhost:5000
或您在 application.properties
中指定的端口上启动服务器。