Created
September 30, 2024 15:45
-
-
Save bpwebs/d805cb90d3739f0e6959ed9ac4274d06 to your computer and use it in GitHub Desktop.
User authentication in Google Apps Script web apps
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| User authentication in Google Apps Script web apps |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /** | |
| * User authentication in Google Apps Script web apps | |
| * © bpwebs.com | |
| */ | |
| const SSID = "1Y8xalfh-wZkM06eYYN1OA_3Y3ZpxvbmaNDoXSagElag"; //ID of the Google Sheets with users table | |
| const SN_USERS = "Users"; //Name of the Google Sheet with user table | |
| const RNG_USER_EMAILS = "B2:B";//User email range | |
| function doGet() { | |
| let template = HtmlService.createTemplateFromFile('Index'); | |
| let html = template.evaluate().setTitle('Web App with Authentication'); | |
| html.setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL); | |
| html.addMetaTag('viewport', 'width=device-width, initial-scale=1'); | |
| return html; | |
| } | |
| function getLoginPage(){ | |
| return HtmlService.createHtmlOutputFromFile('Login').getContent(); | |
| } | |
| function getNotAuthorizedPage(){ | |
| return HtmlService.createHtmlOutputFromFile('NotAuthorized').getContent(); | |
| } | |
| function getDashboardPage(){ | |
| return HtmlService.createHtmlOutputFromFile('Dashboard').getContent(); | |
| } | |
| function checkUserAuthorization(userEmail){ | |
| let sheet = SpreadsheetApp.openById(SSID).getSheetByName(SN_USERS); //Open the spreadsheet and get the sheet | |
| let allowedEmails = sheet.getRange(RNG_USER_EMAILS).getValues().flat().filter(String); //Get all emails in the email column of the sheet | |
| return allowedEmails.includes(userEmail); // Check if the logged-in user's email exists in the allowed list | |
| } | |
| function getUserStatus() { | |
| var userEmail = Session.getActiveUser().getEmail(); | |
| if (!userEmail) { | |
| return { | |
| loggedIn: false, | |
| authorized: false | |
| }; | |
| } | |
| var isAuthorized = checkUserAuthorization(userEmail); | |
| return { | |
| loggedIn: true, | |
| authorized: isAuthorized, | |
| email: userEmail | |
| }; | |
| } | |
| function include(filename){ | |
| return HtmlService.createHtmlOutputFromFile(filename).getContent(); | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <style> | |
| body { | |
| margin: 40px; /* Adjust the value to your desired margin */ | |
| } | |
| </style> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div> | |
| <h1>Welcome to the Dashboard</h1> | |
| <p>Your email: <span id="userEmail"></span></p> | |
| <!-- Additional dashboard content goes here --> | |
| </div> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <base target="_top"> | |
| <?!= include('Css'); ?> | |
| </head> | |
| <body> | |
| <div id="appContent"> | |
| <!-- Content will be dynamically injected here --> | |
| <h1>Loading...</h1> | |
| </div> | |
| <?!= include('JavaScript'); ?> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <script> | |
| window.onload = function() { | |
| // Call the server-side function to get the user status | |
| google.script.run.withSuccessHandler(function(userStatus) { | |
| if (!userStatus.loggedIn) { | |
| // User is not logged in, load the login page | |
| google.script.run.withSuccessHandler(function(html) { | |
| document.getElementById('appContent').innerHTML = html; | |
| }).getLoginPage(); | |
| } else if (!userStatus.authorized) { | |
| // User is not authorized, load the not-authorized page | |
| google.script.run.withSuccessHandler(function(html) { | |
| document.getElementById('appContent').innerHTML = html; | |
| }).getNotAuthorizedPage(); | |
| } else { | |
| // User is logged in and authorized, load the dashboard page | |
| google.script.run.withSuccessHandler(function(html) { | |
| document.getElementById('appContent').innerHTML = html; | |
| // Insert the user's email into the dashboard | |
| document.getElementById('userEmail').textContent = userStatus.email; | |
| }).getDashboardPage(); | |
| } | |
| }).getUserStatus(); | |
| }; | |
| </script> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <h1>Please log in to your Google Account</h1><p>You need to log in to your Google Account to access this app.....</p> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Visit the blog post: https://www.bpwebs.com/user-authentication-in-google-apps-script-web-apps/ for more details