Merge pull request #27 from rtCamp/feature/adding-gsi-demo

Implement Legacy GSI Demo

.env.example

@@ -6,3 +6,4 @@ domain-b-background=bg-blue-100
 domain-c=localhost # domain-ccc.com
 domain-c-background=bg-red-100
 port=8080 # port to listen on
+google-client-id= # google client id

app.js

@@ -33,6 +33,7 @@ app.use((req, res, next) => {
 	res.locals.domainA = process.env['domain-a'];
 	res.locals.domainB = process.env['domain-b'];
 	res.locals.domainC = process.env['domain-c'];
+	res.locals.googleClientId = process.env['google-client-id'];
 	res.locals.port = process.env.port;
 	res.locals.isPortPresent = req.get('host').includes(':');
 	res.locals.currentDomain = req.get( 'host' );
@@ -66,6 +67,7 @@ const scenarios = [
 	'analytics',
 	'embedded-video',
 	'payment-gateway',
+	'gsi'
 ];
 scenarios.forEach(scenario => {
 	const scenarioRoutes = require(`./src/scenarios/${scenario}/routes`);

public/assets/styles/style.css

@@ -670,6 +670,10 @@ video {
   display: grid;
 }
 
+.hidden {
+  display: none;
+}
+
 .aspect-square {
   aspect-ratio: 1 / 1;
 }

src/common/header.ejs

@@ -7,6 +7,7 @@
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&display=swap" rel="stylesheet">
+    <meta name="google-signin-client_id" content="<%= googleClientId %>">
 
     <link rel="stylesheet" href="/assets/styles/style.css">
     <script src="/assets/js/main.js"></script>

src/common/index.ejs

@@ -17,6 +17,7 @@
         <%= renderCard('Single Sign-On', '🔐', '/single-sign-on','Using third-party providers to creating a login session') %>
         <%= renderCard('Payment Gateway', '💳', '/payment-gateway','Payment flow simulation with credit card') %>
         <%= renderCard('CHIPS', '🍪', '/chips','Using CHIPS to solve tracking issues across third-party applications') %>
+        <%= renderCard('Legacy GSI', '🔐', '/gsi','Testing the Legacy GSI') %>
     </div>
 </div>
 

src/scenarios/gsi/index.ejs

@@ -0,0 +1,31 @@
+<%- include(commonPath + '/header.ejs') %>
+
+<div class="container mx-auto py-8">
+    <h1 class="text-3xl font-bold mb-4 text-center">Legacy Google Sign-in</h1>
+    <p class="text-lg font-bold mb-4 text-center">Please login to test this demo.</p>
+    <div class="flex justify-center">
+        <div class="g-signin2" data-onsuccess="onSignIn"></div>
+        <button id="signout-btn" class="hidden ml-4 bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded" onclick="signOut()">Sign Out</button>
+    </div>
+    <div id="status" class="text-center text-lg mt-4"></div>
+</div>
+
+<script>
+    const statusMessage = document.getElementById('status');
+    const signoutBtn = document.getElementById('signout-btn');
+
+    function onSignIn(googleUser) {
+        signoutBtn.classList.remove('hidden');
+        const profile = googleUser.getBasicProfile();
+        statusMessage.textContent = 'Hello ' + profile.getName() + '!';
+    }
+
+    function signOut() {
+        const auth2 = gapi.auth2.getAuthInstance();
+        auth2.signOut().then(function () {
+        statusMessage.textContent = '';
+        });
+    }
+</script>
+<script src="https://apis.google.com/js/platform.js" async defer></script>
+<%- include(commonPath + '/footer.ejs') %>

src/scenarios/gsi/routes.js

@@ -0,0 +1,12 @@
+const express = require('express');
+const path = require('path');
+const router = express.Router();
+
+router.get('/', (req, res) => {
+    // Send the default page
+    res.render(path.join(__dirname,'index'), {
+        title: 'Legacy GSI'
+    });
+});
+
+module.exports = router;