Update Walkthrough 2 code to use the revised classroom-addon routing.

AndrewMBurke · AndrewMBurke · commit 9f365dde96a9 · 2021-12-09T12:08:09.000-05:00
Change-Id: I23c739987e7dd5d4dd44b5fd5c0a48749757ff03
diff --git a/README.md b/README.md
@@ -45,21 +45,21 @@ Enable the following in the API Library:
 
 1.  Install [Python 3.7+](https://www.python.org/downloads/) and ensure that `pip` is available:
 
-    ```shell
+    ```posix-terminal
     python -m ensurepip --upgrade
     ```
 
 1.  Clone this repository and `cd` into the root project directory:
 
-    ```shell
+    ```posix-terminal
     git clone https://github.com/<org>/<repo>/
     cd <repo>
     ```
 
 1.  *(Optional, but recommended!)* Set up and activate a new Python virtual environment in
 the <repo> directory:
 
-    ```shell
+    ```posix-terminal
     python3 -m venv .classroom-addon-env
     source .classroom-addon-env/bin/activate
     ```
@@ -68,13 +68,13 @@ the <repo> directory:
 
 1.  `cd` into an example directory:
 
-    ```shell
+    ```posix-terminal
     cd flask/01-basic-app
     ```
 
 1.  Install the required libraries using `pip`:
 
-    ```shell
+    ```posix-terminal
     pip install -r requirements.txt
     ```
 
@@ -90,6 +90,12 @@ example, to run the web app on `localhost`:
         app.run(debug=True)
     ```
 
+1.  Launch the server by running the `main.py` file:
+
+    ```posix-terminal
+    python main.py
+    ```
+
 1.  To load your app, either open the app in your browser or click the **Add-ons** button when creating an Assignment in [Google Classroom](https://classroom.google.com).
 
 Useful Resources
diff --git a/flask/01-basic-app/main.py b/flask/01-basic-app/main.py
@@ -25,12 +25,28 @@
 
 @app.route("/")
 def index():
-    return flask.render_template("index.html", message="You've reached the index page.")
+    """
+    Render the index page from the "index.html" template. This is meant to act
+    as a facsimile of a company's home page.
+    The Add-on Discovery URL should be set to the /classroom-addon route below.
+    """
+
+    return flask.render_template("index.html",
+                                 message="You've reached the index page.")
 
 
 @app.route("/classroom-addon")
 def classroom_addon():
-    return flask.render_template("addon-discovery.html", message="You've reached the addon discovery page.")
+    """
+    Renders the addon discovery page from the "addon-discovery.html" template.
+    This is meant to be the landing page when opening the web app in the
+    Classroom add-on iframe.
+    """
+
+    return flask.render_template(
+        "addon-discovery.html",
+        message="You've reached the addon discovery page.")
+
 
 if __name__ == "__main__":
     # You have several options for running the web server.
diff --git a/flask/01-basic-app/templates/addon-discovery.html b/flask/01-basic-app/templates/addon-discovery.html
@@ -18,7 +18,7 @@
 {% include "navbar.html" %}
 {% block content %}
 <div class="container">
-    <h3>Welcome to the home page!</h3>
+    <h3>Welcome to the add-on page!</h3>
     <strong>{{message}}</strong>
 </div>
 
diff --git a/flask/01-basic-app/templates/base.html b/flask/01-basic-app/templates/base.html
@@ -19,7 +19,6 @@
 
 <head>
   <meta charset="utf-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 
   <title>Classroom Add-on Example</title>
 
diff --git a/flask/01-basic-app/templates/navbar.html b/flask/01-basic-app/templates/navbar.html
@@ -17,7 +17,7 @@
 <div class="topnav">
     <ul>
         <li>
-            <a href="{{url_for('index')}}">Company Homepage</a>
+            <a href="{{url_for('classroom_addon')}}">Home</a>
         </li>
 
         <li style="float: right">
diff --git a/flask/02-sign-in/main.py b/flask/02-sign-in/main.py
@@ -46,31 +46,37 @@
 # OAuth Consent Screen: https://console.cloud.google.com/apis/credentials/consent
 SCOPES = [
     "https://www.googleapis.com/auth/userinfo.profile",
-    "https://www.googleapis.com/auth/userinfo.email",
-    "https://www.googleapis.com/auth/classroom.courses.readonly",
-    "https://www.googleapis.com/auth/classroom.addons.student",
-    "https://www.googleapis.com/auth/classroom.addons.teacher",
+    "https://www.googleapis.com/auth/userinfo.email"
 ]
-CLASSROOM_API_SERVICE_NAME = "classroom"
-CLASSROOM_API_VERSION = "v1"
-
-# An API key in your GCP project's credentials:
-# https://console.cloud.google.com/apis/credentials.
-GOOGLE_API_KEY = os.environ.get("GOOGLE_API_KEY")
 
 
 @app.route("/")
 def index():
     """
-    Checks if a user is signed in. If so, renders the main page from the "index.html" template.
+    Render the index page from the "index.html" template. This is meant to act
+    as a facsimile of a company's home page.
+    The Add-on Discovery URL should be set to the /classroom-addon route below.
+    """
+
+    return flask.render_template("index.html",
+                                 message="You've reached the index page.")
+
+
+@app.route("/classroom-addon")
+def classroom_addon():
+    """
+    Checks if a user is signed in. If so, renders the addon discovery page from
+    the "addon-discovery.html" template. This is meant to be the landing page
+    when opening the web app in the Classroom add-on iframe.
     Otherwise, renders the "authorization.html" template.
     """
 
     if "credentials" not in flask.session:
         return flask.render_template("authorization.html")
 
-    return flask.render_template("index.html",
-                                 message="This is the index page.")
+    return flask.render_template(
+        "addon-discovery.html",
+        message="You've reached the addon discovery page.")
 
 
 @app.route("/test/<request_type>")
@@ -79,7 +85,7 @@ def test_api_request(request_type="username"):
     Tests an API request, rendering the result in the "show-api-query-result.html" template.
 
     Args:
-        request_type: The type of API request to test. Can be "username" or "courses".
+        request_type: The type of API request to test. Currently only "username" is supported.
     """
 
     if "credentials" not in flask.session:
@@ -102,18 +108,6 @@ def test_api_request(request_type="username"):
 
         fetched_data = flask.session.get("username")
 
-    elif request_type == "courses":
-        classroom_service = googleapiclient.discovery.build(
-            CLASSROOM_API_SERVICE_NAME,
-            CLASSROOM_API_VERSION,
-            credentials=credentials,
-            discoveryServiceUrl=
-            f"https://classroom.googleapis.com/$discovery/rest?labels=ADD_ONS_ALPHA&key={GOOGLE_API_KEY}"
-        )
-
-        fetched_data = classroom_service.courses().list(
-            pageSize=10).execute().get("courses", [])
-
     # Save credentials back to session in case access token was refreshed.
     # ACTION ITEM: In a production app, you likely want to save these
     #              credentials in a persistent database instead.
@@ -163,7 +157,7 @@ def callback():
     the user's credentials, including the access token, refresh token, and allowed scopes.
     """
 
-    # Specify the state when creating the flow in the callback so that it can
+    # Specify the state when creating the flow in the callback so that it can be
     # verified in the authorization server response.
     state = flask.session["state"]
 
@@ -198,7 +192,7 @@ def revoke():
     """
 
     if "credentials" not in flask.session:
-        return flask.render_template("index.html",
+        return flask.render_template("addon-discovery.html",
                                      message="You need to authorize before " +
                                      "attempting to revoke credentials.")
 
@@ -228,9 +222,7 @@ def clear_credentials():
 
     clear_credentials_in_session()
 
-    return flask.render_template(
-        "index.html",
-        message="Your credentials have been cleared; you are logged out.")
+    return flask.render_template("signed-out.html")
 
 
 def clear_credentials_in_session():
diff --git a/flask/02-sign-in/static/base-style.css b/flask/02-sign-in/static/base-style.css
@@ -39,4 +39,32 @@ body {
 .topnav a:hover {
     background-color: #ddd;
     color: black;
+}
+
+a.rounded-button {
+    display: inline-block;
+    padding: 0.3em 1.2em;
+    margin: 0 0.1em 0.1em 0;
+    border: 0.16em solid rgba(255, 255, 255, 0);
+    border-radius: 2em;
+    box-sizing: border-box;
+    text-decoration: none;
+    font-family: 'Roboto', sans-serif;
+    font-weight: 300;
+    color: #FFFFFF;
+    text-shadow: 0 0.04em 0.04em rgba(0, 0, 0, 0.35);
+    text-align: center;
+    transition: all 0.2s;
+    background-color: #4285F4;
+}
+
+a.rounded-button:hover {
+    border-color: rgba(255, 255, 255, 1);
+}
+
+@media all and (max-width:30em) {
+    a.rounded-button {
+        display: block;
+        margin: 0.2em auto;
+    }
 }
diff --git a/flask/02-sign-in/static/scripts/addon-utils.js b/flask/02-sign-in/static/scripts/addon-utils.js
@@ -0,0 +1,44 @@
+/**
+ * Copyright 2021 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * Opens a given destination route in a new window. This function uses
+ * window.open() so as to force window.opener to retain a reference to the
+ * iframe from which it was called.
+ * @param {string=} destinationURL The endpoint to open, or "/" if none is
+ *     provided.
+ */
+function openWebsiteInNewTab(destinationURL = '/') {
+  window.open(destinationURL, '_blank');
+}
+
+/**
+ * Close the iframe by calling postMessage() in the host Classroom page. This
+ * function can be called direcly when in a Classroom add-on iframe.
+ *
+ * Alternatively, it can be used to close an add-on iframe in another window.
+ * For example, if an add-on iframe in Window 1 opens a link in a new Window 2
+ * using the openWebsiteInNewTab function above, you can call
+ * window.opener.closeIframe() from Window 2 to close the iframe in Window 1.
+ */
+function closeAddonIframe() {
+  window.parent.postMessage(
+      {
+        type: 'Classroom',
+        action: 'closeIframe',
+      },
+      '*');
+}
diff --git a/flask/02-sign-in/templates/addon-discovery.html b/flask/02-sign-in/templates/addon-discovery.html
@@ -0,0 +1,44 @@
+<!--
+Copyright 2021 Google LLC
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    https://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+-->
+
+{% extends "base.html" %}
+{% include "navbar.html" %}
+{% block content %}
+<div class="container">
+    <h3>Welcome to the home page!</h3>
+    <strong>{{message}}</strong>
+
+    <hr>
+
+    <a class="rounded-button" href="#" onclick="openWebsiteInNewTab()">Visit our website</a>
+    <a class="rounded-button" href="#" onclick="closeAddonIframe()">Close add-on iframe</a>
+
+
+    From here you can:
+    <ul>
+        <li>
+            <a href="{{url_for('test_api_request', request_type='courses')}}">Test a Classroom API request</a>
+            <br>This will submit an API request and display a JSON response.
+            <br>You should go through the authorization flow if there are no stored credentials.</li>
+        <li><a href="{{ url_for('revoke') }}">Revoke credentials</a>
+            <br>This will force users to allow your app to access their account again via the OAuth consent
+            screen.</li>
+        <li><a href="{{ url_for('clear_credentials') }}">Clear session credentials</a>
+            <br>This will clear credentials from the current session.
+            <br>You will have to reauthorize to issue any API requests.</li>
+    </ul>
+</div>
+{% endblock %}
diff --git a/flask/02-sign-in/templates/authorization.html b/flask/02-sign-in/templates/authorization.html
@@ -19,24 +19,19 @@
 <div class="container">
     <h2>Authorization Required</h2>
     <hr>
-    <!-- Developer note: if you have *never* seen the user before, they'll need to authorize your app.
-        It's most reliable to do so in a popup due to add-ons being presented in an iframe. -->
-    <a target="popup" id="auth-user" href="{{ url_for('authorize') }}">
+    <!--
+        Developer note: if you have *never* seen the user before, they'll need to
+        authorize your app. It's most reliable to do so in a popup due to add-ons
+        being presented in an iframe.
+        Note that this link also calls a function to close the iframe; since we
+        won't know when the user has finished the authorization flow, we won't
+        be able to reload the addon with their correct credentials. -->
+    <a target="popup" onclick="closeAddonIframe()" href="{{ url_for('authorize') }}">
         <img src="../static/btn_google_signin_dark_normal_web.png" alt="Authorize the user">
     </a>
     <br>This will immediately start the authorization flow in a popup.
     <br>This should only be necessary once per user, unless your app has changed scopes or they
     have revoked their credentials.
     <br>Once complete, close the popup and use the other links below.
 </div>
-
-<script>
-    document.querySelector('#auth-user')
-        .addEventListener('click', () => {
-            window.parent.postMessage({
-                type: 'Classroom',
-                action: 'closeIframe',
-            }, '*');
-        });
-</script>
 {% endblock %}
diff --git a/flask/02-sign-in/templates/base.html b/flask/02-sign-in/templates/base.html
@@ -25,6 +25,10 @@
   <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto">
   <link rel="stylesheet" href="../static/base-style.css">
 
+  <script src="../static/scripts/addon-utils.js"></script>
+
+  {% block headcontent %}
+  {% endblock %}
 </head>
 
 <body>
diff --git a/flask/02-sign-in/templates/close-me.html b/flask/02-sign-in/templates/close-me.html
diff --git a/flask/02-sign-in/templates/index.html b/flask/02-sign-in/templates/index.html
diff --git a/flask/02-sign-in/templates/navbar.html b/flask/02-sign-in/templates/navbar.html
diff --git a/flask/02-sign-in/templates/signed-out.html b/flask/02-sign-in/templates/signed-out.html
