Change sign-in behavior to use a popup for authorization flow.

Revise query parameter and credential management logic.
Remove access token storage.

Change-Id: I6abf51eb52d365d26206081670bb0ec0400c7f85

Author: AndrewMBurke

flask/02-sign-in/main.py

@@ -72,7 +72,7 @@ def classroom_addon():
     """
 
     if "credentials" not in flask.session:
-        return flask.render_template("authorization.html")
+        return start_auth_flow()
 
     return flask.render_template(
         "addon-discovery.html",
@@ -89,7 +89,7 @@ def test_api_request(request_type="username"):
     """
 
     if "credentials" not in flask.session:
-        return flask.render_template("authorization.html")
+        return start_auth_flow()
 
     # Load credentials from the session.
     credentials = google.oauth2.credentials.Credentials(
@@ -114,10 +114,9 @@ def test_api_request(request_type="username"):
     flask.session["credentials"] = credentials_to_dict(credentials)
 
     # Render the results of the API call.
-    return flask.render_template(
-        "show-api-query-result.html",
-        data=json.dumps(fetched_data, indent=2),
-        data_title=request_type)
+    return flask.render_template("show-api-query-result.html",
+                                 data=json.dumps(fetched_data, indent=2),
+                                 data_title=request_type)
 
 
 @app.route("/authorize")
@@ -208,12 +207,22 @@ def revoke():
 
     status_code = getattr(revoke, "status_code")
     if status_code == 200:
-        return flask.render_template("authorization.html")
+        return start_auth_flow()
     else:
         return flask.render_template(
             "index.html", message="An error occurred during revocation!")
 
 
+@app.route("/start-auth-flow")
+def start_auth_flow():
+    """
+    Starts the OAuth 2.0 authorization flow. It's important that the
+    template be rendered to properly manage popups.
+    """
+
+    return flask.render_template("authorization.html")
+
+
 @app.route("/clear")
 def clear_credentials():
     """

flask/02-sign-in/requirements.txt

@@ -1,5 +1,5 @@
 Flask==2.0.2
-google_api_python_client==2.31.0
+google_api_python_client==2.33.0
 google_auth_oauthlib==0.4.6
 protobuf==3.19.1
 requests==2.26.0

flask/02-sign-in/templates/authorization.html

@@ -15,6 +15,20 @@
 -->
 
 {% extends "base.html"%}
+
+{% block headcontent %}
+<script>
+    var popupWindow;
+
+    function createPopup(url) {
+        popupWindow = window.open(url, 'popUpWindow',
+            'height=500,width=500,left=100,top=100,resizable=no,' +
+            'scrollbars=yes,toolbar=yes,menubar=no,location=yes,' +
+            'directories=no,status=yes');
+    }
+</script>
+{% endblock %}
+
 {% block content %}
 <div class="container">
     <h2>Authorization Required</h2>
@@ -23,15 +37,12 @@ <h2>Authorization Required</h2>
         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') }}">
+    -->
+    <a target="popup" onclick="createPopup(this.href);return false" 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>
 {% endblock %}

flask/02-sign-in/templates/close-me.html

@@ -15,10 +15,10 @@
 -->
 
 {% extends "base.html"%}
-{% block content %}
-<div class="container">
-    <h2>Authorization Complete!</h2>
-    <hr>
-    The OAuth2 authorization flow has completed. You may now close this window.
-</div>
+
+{% block headcontent %}
+<script>
+    window.opener.location.href = "{{ url_for('classroom_addon') }}";
+    window.close();
+</script>
 {% endblock %}

flask/02-sign-in/templates/navbar.html

@@ -33,7 +33,7 @@
             <a style="background-color: #db4437" href="{{url_for('clear_credentials')}}">Logout
                 {{ session['username'] }}</a>
             {% else %}
-            <a style="background-color: #4285f4" href="{{url_for('authorize')}}">Login</a>
+            <a style="background-color: #4285f4" href="{{url_for('start_auth_flow')}}">Login</a>
             {% endif %}
         </li>
     </ul>

flask/02-sign-in/templates/signed-out.html

@@ -16,14 +16,14 @@
 
 {% extends "base.html"%}
 {% block headcontent %}
-<meta http-equiv="refresh" content="3;url={{url_for('classroom_addon')}}" />
+<meta http-equiv="refresh" content="3;url={{url_for('start_auth_flow')}}" />
 {% endblock %}
 
 {% block content %}
 <div class="container">
     <h2>Sign-out Complete!</h2>
     <hr>
     Your credentials have been cleared; you are logged out.
-    You will be redirected to the authorization page in 5 seconds.
+    You will be redirected to the sign-in page in 5 seconds.
 </div>
 {% endblock %}

flask/03-query-parameters/main.py

@@ -14,7 +14,6 @@
 
 import os
 import flask
-from oauth2client import client
 import requests
 import json
 import flask_sqlalchemy
@@ -67,14 +66,13 @@ class User(db.Model):
     email = db.Column(db.String(120), unique=True)
     portrait_url = db.Column(db.Text())
 
-    # The user's credentials.
-    # Note that refresh and access tokens will become invalid if:
+    # The user's refresh token, which will be used to obtain an access token.
+    # Note that refresh tokens will become invalid if:
     # - The refresh token has not been used for six months.
     # - The user revokes your app's access permissions.
     # - The user changes passwords.
     # - The user belongs to a Google Cloud Platform organization
     #   that has session control policies in effect.
-    access_token = db.Column(db.Text())
     refresh_token = db.Column(db.Text())
 
     def __repr__(self):
@@ -119,46 +117,59 @@ def classroom_addon():
         db.create_all()
 
     # Retrieve the login_hint and hd query parameters.
+    login_hint = flask.request.args.get("login_hint")
+    hd = flask.request.args.get("hd")
+
     # It's possible that we might return to this route later, in which case the
     # parameters will not be passed in. Instead, use the values cached in the session.
-    login_hint = flask.request.args.get("login_hint") or flask.session.get(
-        "login_hint")
-    hd = flask.request.args.get("hd") or flask.session.get("hd")
 
-    # Ensure that these parameters are cached in the session.
-    if login_hint:
-        flask.session["login_hint"] = login_hint
-    if hd:
+    # If neither query parameter is available, use the values in the session.
+    if login_hint is None and hd is None:
+        login_hint = flask.session.get("login_hint")
+        hd = flask.session.get("hd")
+
+    # If there's no login_hint query parameter, then check for hd.
+    # Send the user to the sign in page.
+    elif hd is not None:
         flask.session["hd"] = hd
+        return start_auth_flow()
+
+    # If the login_hint query parameter is available, we'll store it in the session.
+    else:
+        flask.session["login_hint"] = login_hint
 
-    # If we received a login_hint, we'll use it to check if we have any stored
-    # credentials for this user.
-    if login_hint:
-        stored_credentials = get_credentials_from_storage(login_hint)
-
-        # If we have stored credentials, store them in the session.
-        if stored_credentials:
-            # Load the client secrets file contents.
-            client_secrets_dict = json.load(
-                open(CLIENT_SECRETS_FILE)).get("web")
-
-            # Set the credentials in the session.
-            flask.session["credentials"] = {
-                "token": stored_credentials.access_token,
-                "refresh_token": stored_credentials.refresh_token,
-                "token_uri": client_secrets_dict["token_uri"],
-                "client_id": client_secrets_dict["client_id"],
-                "client_secret": client_secrets_dict["client_secret"],
-                "scopes": SCOPES
-            }
-
-            # Set the username in the session.
-            flask.session["username"] = stored_credentials.display_name
-
-    # Redirect to the authorization page if we received hd OR if we received
-    # login_hint but don't have any stored credentials for this user.
-    if "credentials" not in flask.session or hd:
-        return flask.render_template("authorization.html")
+    # Check if we have any stored credentials for this user.
+    stored_credentials = get_credentials_from_storage(login_hint)
+
+    # If we have stored credentials, load them into the session.
+    if stored_credentials:
+        # Load the client secrets file contents.
+        client_secrets_dict = json.load(open(CLIENT_SECRETS_FILE)).get("web")
+
+        # Update the credentials in the session.
+        if not flask.session.get("credentials"):
+            flask.session["credentials"] = {}
+
+        flask.session["credentials"]["token"] = flask.session.get("credentials").get("token") or None
+        flask.session["credentials"][
+            "refresh_token"] = stored_credentials.refresh_token
+        flask.session["credentials"]["token_uri"] = client_secrets_dict[
+            "token_uri"]
+        flask.session["credentials"]["client_id"] = client_secrets_dict[
+            "client_id"]
+        flask.session["credentials"]["client_secret"] = client_secrets_dict[
+            "client_secret"]
+        flask.session["credentials"]["scopes"] = SCOPES
+
+        # Set the username in the session.
+        flask.session["username"] = stored_credentials.display_name
+
+    # Redirect to the authorization page if we received login_hint but don't
+    # have any stored credentials for this user. We need the refresh token
+    # specifically.
+    if "credentials" not in flask.session or \
+        flask.session["credentials"]["refresh_token"] is None:
+        return start_auth_flow()
 
     return flask.render_template(
         "addon-discovery.html",
@@ -175,7 +186,7 @@ def test_api_request(request_type="username"):
     """
 
     if "credentials" not in flask.session:
-        return flask.render_template("authorization.html")
+        return start_auth_flow()
 
     # Load credentials from the session and client id and client secret from file.
     credentials = google.oauth2.credentials.Credentials(
@@ -185,12 +196,12 @@ def test_api_request(request_type="username"):
     fetched_data = ""
 
     if request_type == "username":
-        if not flask.session.get("username"):
-            user_info_service = googleapiclient.discovery.build(
-                serviceName="oauth2", version="v2", credentials=credentials)
+        # if not flask.session.get("username"):
+        user_info_service = googleapiclient.discovery.build(
+            serviceName="oauth2", version="v2", credentials=credentials)
 
-            flask.session["username"] = (
-                user_info_service.userinfo().get().execute().get("name"))
+        flask.session["username"] = (
+            user_info_service.userinfo().get().execute().get("name"))
 
         fetched_data = flask.session.get("username")
 
@@ -308,10 +319,21 @@ def revoke():
 
     status_code = getattr(revoke, "status_code")
     if status_code == 200:
-        return flask.render_template("authorization.html")
+        return start_auth_flow()
     else:
         return flask.render_template(
-            "index.html", message="An error occurred during revocation!")
+            "addon-discovery.html",
+            message="An error occurred during revocation!")
+
+
+@app.route("/start-auth-flow")
+def start_auth_flow():
+    """
+    Starts the OAuth 2.0 authorization flow. It's important that the
+    template be rendered to properly manage popups.
+    """
+
+    return flask.render_template("authorization.html")
 
 
 @app.route("/clear")
@@ -377,16 +399,14 @@ def save_user_credentials(credentials=None, user_info=None):
             existing_user.email = user_info.get("email")
             existing_user.portrait_url = user_info.get("picture")
 
-        if credentials:
-            existing_user.access_token = credentials.token
+        if credentials and credentials.refresh_token is not None:
             existing_user.refresh_token = credentials.refresh_token
 
     elif credentials and user_info:
         new_user = User(id=user_info.get("id"),
                         display_name=user_info.get("name"),
                         email=user_info.get("email"),
                         portrait_url=user_info.get("picture"),
-                        access_token=credentials.token,
                         refresh_token=credentials.refresh_token)
 
         db.session.add(new_user)

flask/03-query-parameters/templates/authorization.html

@@ -15,6 +15,20 @@
 -->
 
 {% extends "base.html"%}
+
+{% block headcontent %}
+<script>
+    var popupWindow;
+
+    function createPopup(url) {
+        popupWindow = window.open(url, 'popUpWindow',
+            'height=500,width=500,left=100,top=100,resizable=no,' +
+            'scrollbars=yes,toolbar=yes,menubar=no,location=yes,' +
+            'directories=no,status=yes');
+    }
+</script>
+{% endblock %}
+
 {% block content %}
 <div class="container">
     <h2>Authorization Required</h2>
@@ -23,15 +37,12 @@ <h2>Authorization Required</h2>
         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') }}">
+    -->
+    <a target="popup" onclick="createPopup(this.href);return false" 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>
 {% endblock %}

flask/03-query-parameters/templates/close-me.html

@@ -15,10 +15,10 @@
 -->
 
 {% extends "base.html"%}
-{% block content %}
-<div class="container">
-    <h2>Authorization Complete!</h2>
-    <hr>
-    The OAuth2 authorization flow has completed. You may now close this window.
-</div>
+
+{% block headcontent %}
+<script>
+    window.opener.location.href = "{{ url_for('classroom_addon') }}";
+    window.close();
+</script>
 {% endblock %}