Migrate sign-in Google Identity Services library (#1729)

* Migrate Google sign-in

* fix

* Reapply changes

* Fix tests

Co-authored-by: Joseph Medley <jmedley@google.com>

api/login_api.py

@@ -25,10 +25,10 @@ import settings
 
 
 class LoginAPI(basehandlers.APIHandler):
-  """Create a session using the id_token generated by Google Sign-In."""
+  """Create a session using the credential generated by Google Sign-In."""
 
   def do_post(self):
-    token = self.get_param('id_token')
+    token = self.get_param('credential')
     message = "Unable to Authenticate"
 
     try:

api/login_api_test.py

@@ -32,8 +32,8 @@ class LoginAPITest(testing_config.CustomTestCase):
     self.handler = login_api.LoginAPI()
     self.request_path = '/api/v0/login'
 
-  def test_post__missing_id_token(self):
-    """We reject login requests that don't have any id_token."""
+  def test_post__missing_credential_token(self):
+    """We reject login requests that don't have any credential_token."""
     params = {}
     with test_app.test_request_context(self.request_path, json=params):
       session.clear()
@@ -42,9 +42,9 @@ class LoginAPITest(testing_config.CustomTestCase):
         self.handler.do_post()
       self.assertEqual(1, len(session))
 
-  def test_post__invalid_id_token(self):
-    """We reject login requests that have an invalid id_token."""
-    params = {'id_token': 'fake bad token'}
+  def test_post__invalid_credential_token(self):
+    """We reject login requests that have an invalid credential_token."""
+    params = {'credential': 'fake bad token'}
     with test_app.test_request_context(self.request_path, json=params):
       session['something else'] = 'some other aspect of the session'
       actual_response = self.handler.do_post()
@@ -53,9 +53,9 @@ class LoginAPITest(testing_config.CustomTestCase):
 
   @mock.patch('google.oauth2.id_token.verify_oauth2_token')
   def test_post__normal(self, mock_verify):
-    """We log in the user if they provide a good id_token."""
+    """We log in the user if they provide a good credential_token."""
     mock_verify.return_value = {'email': 'user@example.com'}
-    params = {'id_token': 'fake bad token'}
+    params = {'credential': 'fake bad token'}
     with test_app.test_request_context(self.request_path, json=params):
       session.clear()
       session['something else'] = 'some other aspect of the session'

static/js-src/cs-client.js

@@ -133,18 +133,14 @@ class ChromeStatusClient {
 
   // Signing in and out
 
-  signIn(googleUser) {
-    // TODO(jrobbins): Consider using profile pic.
-    // let profile = googleUser.getBasicProfile();
-    const idToken = googleUser.getAuthResponse().id_token;
+  signIn(credentialResponse) {
+    const credential = credentialResponse.credential;
     // We don't use doPost because we don't already have a XSRF token.
-    return this.doFetch('/login', 'POST', {'id_token': idToken}, false);
+    return this.doFetch('/login', 'POST', {'credential': credential}, false);
   }
 
-  signOut(auth2) {
-    return auth2.signOut().then(() => {
-      return this.doPost('/logout');
-    });
+  signOut() {
+    return this.doPost('/logout');
   }
 
   // Cues API

templates/_base.html

@@ -54,51 +54,16 @@ limitations under the License.
     app-drawer-layout:not([narrow]) [drawer-toggle] {
       display: none;
     }
-
-    /* CSS For Google Sign In Button */
-    #gSignInCustomBtn {
-      display: inline-block;
-      background: white;
-      color: #444;
-      width: 190px;
-      box-shadow: 1px 0px 5px grey;
-      white-space: nowrap;
-    }
-
-    #gSignInCustomBtn:hover {
-      cursor: pointer;
-      box-shadow: 0px 0px 5px 1px #84a3d8;
-    }
-
-    #gSignInCustomBtn:active .gSignInIcon {
-      background: url('/static/img/google_sign_in/btn_google_signin_light_pressed_web@2x.png');
-      background-size: contain;
-      display: inline-block;
-      vertical-align: middle;
-      width: 191px;
-      height: 41px;
-    }
-
-    .gSignInIcon {
-      background: url('/static/img/google_sign_in/btn_google_signin_light_normal_web@2x.png');
-      background-size: contain;
-      display: inline-block;
-      vertical-align: middle;
-      width: 191px;
-      height: 41px;
-    }
-
   </style>
 
   {% block css %}{% endblock %}
 
-  {# Google Platform Library for OAuth #}
-  <script src="https://apis.google.com/js/platform.js?onload=onLoad"
-          async defer nonce="{{nonce}}"></script>
+  {# Google Identity Services library for OAuth #}
+  <script src="https://accounts.google.com/gsi/client" async defer nonce="{{nonce}}"></script>
 
   <script nonce="{{nonce}}">
-    function onSignIn(googleUser) {
-        csClient.signIn(googleUser)
+    function handleCredentialResponse(credentialResponse) {
+        csClient.signIn(credentialResponse)
             .then(responseJson => {
                 console.log('Signed in:');
                 console.log(responseJson);
@@ -111,70 +76,16 @@ limitations under the License.
     }
 
     function signOut() {
-        let auth2 = gapi.auth2.getAuthInstance();
-        csClient.signOut(auth2).then(responseJson => {
+        csClient.signOut().then(responseJson => {
             console.log('Signed out:');
             console.log(responseJson);
             window.location.reload();
         });
     }
 
-    function refreshSession() {
-        console.log('refreshing google sigin-in session');
-        let cu = auth2.currentUser.get();
-        cu.reloadAuthResponse().then(function(unused_auth_response) {
-            // Calling this sets the flask session cookie.
-            csClient.signIn(auth2.currentUser.get());
-        }).catch(() => {
-            console.error('Refreshing session failed.');
-            let ar = cu.getAuthResponse();
-            let expires_at = ar.expires_at;
-            if (expires_at < Number(new Date())) {
-                signOut();
-                console.log('Explicitly signing out because session expired.');
-            }
-        });
-
-    }
-
-    var googleUser = {};
-    function startApp() {
-        gapi.load('auth2', function(){
-          auth2 = gapi.auth2.init({
-              client_id: '{{google_sign_in_client_id}}',
-              cookiepolicy: 'single_host_origin',
-              scope: 'profile email'
-          });
-          if (document.getElementById('gSignInCustomBtn')) {
-            attachSignin(document.getElementById('gSignInCustomBtn'));
-          } else {
-            // Google Sign-In sessions only last 1-hour.  Refresh the
-            // session immediately after each page naviagation
-            // and once every 10 minutes the user sits on a page.
-            refreshSession();
-            window.setInterval(refreshSession, 10 * 60 * 1000);
-          }
-        });
-    }
-
-    function attachSignin(element) {
-      auth2.attachClickHandler(element, {},
-          function(googleUser) {
-            onSignIn(googleUser);
-          }, function(error) {
-              console.log(error);
-          });
-    }
-
-    function onLoad() {
-      startApp();
-    }
-
     function promptSignIn(e) {
       e.preventDefault();
       e.stopPropagation();
-      let auth2 = gapi.auth2.getAuthInstance();
-      auth2.signIn().then(onSignIn);
     }
 
 

templates/header.html

@@ -38,12 +38,10 @@
           </ul>
         </div>
       {% else %}
-        <!-- <div class="g-signin2" data-onsuccess="onSignIn"></div> -->
-        <div id="gSignInWrapper">
-          <div id="gSignInCustomBtn" class="customGPlusSignIn">
-              <span class="gSignInIcon"></span>
-          </div>
+        <div id="g_id_onload" data-client_id="{{google_sign_in_client_id}}"
+          data-callback="handleCredentialResponse">
         </div>
+        <div class="g_id_signin" data-type="standard"></div>
       {% endif %}
       </div>
     </div>