CODEWITHSUNDEEP
google-apps-scriptoauth-2.0single-sign-ongoogle-signinhttp-status-code-400
Namita Tare
Namita Tare

Reputation: 153

Google Apps Script SSO Login with OAuth 2.0 Redirect Issue

I am developing a simple web application using Google Apps Script, where users log in via SSO (Google Sign-In) and, upon successful authentication, are redirected to the home page.

What I have done so far:

  1. Created a project in Google Cloud Console.

  2. Configured OAuth 2.0 Client ID under APIs & Services.

  3. Set the following:

    Authorized JavaScript Origins: https://script.google.com

    Authorized Redirect URIs: https://script.google.com/macros/s/AKfycbzvkNVrn3xfguC2dTSW9RNT65NbAGATKGPZ11rQS8C1adbvAkbL-9QaXjaSe-iaXjVQjA/usercallback

  4. Included the Google Sign-In script in my web application: <script src="https://accounts.google.com/gsi/client" async></script>

This is login page code:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Google SSO Login</title>
  <script src="https://accounts.google.com/gsi/client" async></script>
</head>
<body>
  <h2>Google SSO Login</h2>
  
  <div id="g_id_onload"
       data-client_id="208292407248-2g41mq1nu6munitpsrhev01b5kvfl5gv.apps.googleusercontent.com"
       data-context="signin"
       data-ux_mode="popup"
       data-callback="handleCredentialResponse"
       data-auto_prompt="false">
  </div>
  
  <div class="g_id_signin"
       data-type="standard"
       data-shape="rectangular"
       data-theme="outline"
       data-text="signin_with"
       data-size="large"
       data-logo_alignment="left">
  </div>

  <button id="logoutBtn" onclick="logout()" style="display: none;">Sign Out</button>

  <script>
    function decodeJwtResponse(token) {
      var base64Url = token.split(".")[1];
      var base64 = base64Url.replace(/-/g, "+").replace(/_/g, "/");
      var jsonPayload = decodeURIComponent(
        atob(base64).split("").map(c => "%" + ("00" + c.charCodeAt(0).toString(16)).slice(-2)).join("")
      );
      return JSON.parse(jsonPayload);
    }

    function handleCredentialResponse(response) {
      const userData = decodeJwtResponse(response.credential);
      console.log("User:", userData);

      google.script.run.withSuccessHandler(() => {
        document.getElementById('logoutBtn').style.display = "block";
      }).handleLogin(userData);
    }

    function logout() {
      google.accounts.id.disableAutoSelect();
      google.script.run.withSuccessHandler(() => {
        document.getElementById('logoutBtn').style.display = "none";
        console.log("User Logged Out");
      }).handleLogout();
    }
  </script>
</body>
</html>

This is code.gs file:

function doGet(e) {
  return HtmlService.createHtmlOutputFromFile("index").setTitle("Google SSO Login");
}

// Handle login response
function handleLogin(userData) {
  var scriptProperties = PropertiesService.getScriptProperties();
  scriptProperties.setProperty("userEmail", userData.email);
  return "Login Successful: " + userData.email;
}

// Handle logout
function handleLogout() {
  var scriptProperties = PropertiesService.getScriptProperties();
  scriptProperties.deleteProperty("userEmail");
  return "User Logged Out";
}

I want to ensure that after the user successfully logs in, they are properly redirected to the home page. However, I am facing issues with the redirection process.

Error 400: invalid_request
Request details: redirect_uri=https://n-eegz6qkhxofscrf6dbo55h5cggdgdxogbcfmbcq-0lu-script.googleusercontent.com flowName=GeneralOAuthFlow

Access blocked: Authorization Error

Any guidance or suggestions would be greatly appreciated!

Upvotes: 1

Views: 30

Answers (0)

Related Questions