Merge pull request #8 from rhelmer/google-auth-web-sample

pull in sample google auth integration code
mozilla-rally · Jun 17, 2021 · 07a0771 · 07a0771
2 parents 6ea5ef6 + cf19f6a
commit 07a0771
Show file tree

Hide file tree

Showing 3 changed files with 62 additions and 25 deletions.
diff --git a/public/index.html b/public/index.html
@@ -1,24 +1,54 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width,initial-scale=1" />
 
-    <title>Rally: Put your data to work for a better internet</title>
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width,initial-scale=1" />
+  <meta name="google-signin-scope" content="profile email">
+  <meta name="google-signin-client_id"
+    content="872283440703-nakr30t7ro2da7do976tkfm19v63mfn8.apps.googleusercontent.com">
+  <script src="https://apis.google.com/js/platform.js" async defer></script>
 
-    <link rel="icon" href="img/rally-favicon.svg" />
-    <link rel="stylesheet" href="build/protocol.css" />
-    <link rel="stylesheet" href="build/protocol-extra.css" />
-    <link rel="stylesheet" href="rally.css" />
-    <link rel="stylesheet" href="tokens.css" />
-    <link rel="stylesheet" href="build/bundle.css" />
+  <title>Rally: Put your data to work for a better internet</title>
 
-    <script src="https://www.gstatic.com/firebasejs/8.6.7/firebase-app.js"></script>
-    <script src="https://www.gstatic.com/firebasejs/8.6.7/firebase-firestore.js"></script>
-    <script src="https://www.gstatic.com/firebasejs/8.6.7/firebase-auth.js"></script>
+  <link rel="icon" href="img/rally-favicon.svg" />
+  <link rel="stylesheet" href="build/protocol.css" />
+  <link rel="stylesheet" href="build/protocol-extra.css" />
+  <link rel="stylesheet" href="rally.css" />
+  <link rel="stylesheet" href="tokens.css" />
+  <link rel="stylesheet" href="build/bundle.css" />
 
-    <script defer src="build/bundle.js"></script>
-  </head>
+  <script src="https://www.gstatic.com/firebasejs/8.6.7/firebase-app.js"></script>
+  <script src="https://www.gstatic.com/firebasejs/8.6.7/firebase-firestore.js"></script>
+  <script src="https://www.gstatic.com/firebasejs/8.6.7/firebase-auth.js"></script>
 
-  <body></body>
-</html>
+  <script defer src="build/bundle.js"></script>
+
+  <div class="g-signin2 social_signin" data-onsuccess="onSignIn"></div>
+
+
+  <script>
+    function onSignIn(googleUser) {
+      // Useful data for your client-side scripts:
+      var profile = googleUser.getBasicProfile();
+      console.log("ID: " + profile.getId()); // Don't send this directly to your server!
+      console.log('Full Name: ' + profile.getName());
+      console.log('Given Name: ' + profile.getGivenName());
+      console.log('Family Name: ' + profile.getFamilyName());
+      console.log("Image URL: " + profile.getImageUrl());
+      console.log("Email: " + profile.getEmail());
+
+      // The ID token you need to pass to your backend:
+      var id_token = googleUser.getAuthResponse().id_token;
+      console.log("ID Token: " + id_token);
+
+      for (const studyId of ["maoohlacnogbjgacnnoajgljfcdbdocb"]) {
+        chrome.runtime.sendMessage(studyId, id_token);
+      }
+    }
+  </script>
+</head>
+
+<body></body>
+
+</html>
diff --git a/public/rally.css b/public/rally.css
@@ -332,3 +332,8 @@ src/components/icons/ExternalLink.svelte:
   grid-auto-flow: column;
   grid-column-gap: var(--gap, 12px);
 }
+
+/* hide the google sign-in widget */
+.social_signin {
+  display: none;
+}
diff --git a/website/web-site-api.js b/website/web-site-api.js
@@ -77,13 +77,7 @@ export default {
     // create a new user.
     user.initialize(userCredential.user.uid, { createUser: true });
     listenForUserChanges(userCredential.user);
-
-    // Attempt to automatically log-in any valid study extensions, by passing them the ID token.
-    // TODO only supports Chrome auth provider
-    // TODO pull study IDs from metadata
-    for (const studyId of ["maoohlacnogbjgacnnoajgljfcdbdocb"]) {
-      chrome.runtime.sendMessage(studyId, userCredential.credential.idToken);
-    }
+    await this.notifyStudies(userCredential.credential.idToken);
   },
   async loginWithEmailAndPassword(email, password) {
     let userCredential;
@@ -134,7 +128,6 @@ export default {
       userState = await user.get(authenticatedUser.uid);
       userState = userState.data();
       listenForUserChanges(authenticatedUser);
-
     } else {
       initialState._isLoggedIn = false;
     }
@@ -158,6 +151,15 @@ export default {
 
   },
 
+  async notifyStudies(idToken) {
+    // Attempt to automatically log-in any valid study extensions, by passing them the ID token.
+    // TODO only supports Chrome auth provider
+    // TODO pull study IDs from metadata
+    for (const studyId of ["maoohlacnogbjgacnnoajgljfcdbdocb"]) {
+      chrome.runtime.sendMessage(studyId, idToken);
+    }
+  },
+
   async updateStudyEnrollment(studyID, enroll) {
     const enrolledStudies = { ...(state.user.enrolledStudies || {}) };
     if (!(studyID in enrolledStudies)) { enrolledStudies[studyID] = {}; }