Refactor Google API auth to use GIS client

PeterMaZep · PeterMaZep · commit ee8d6fafa372 · 2025-12-03T22:16:57.000+08:00
Replaces deprecated gapi.auth2 authentication with Google Identity Services (GIS) for OAuth. Updates script loading, authorization flow, and error handling to improve reliability and future compatibility.
diff --git a/SearchConsoleMonitor.html b/SearchConsoleMonitor.html
@@ -7,49 +7,75 @@
 <head>
   <div class="spacing-start"></div>
   <title>Indexed Pages Monitor</title>
-  <script src="https://apis.google.com/js/api.js"></script>
+  <!-- Load Google APIs client -->
+  <script src="https://apis.google.com/js/api.js" onload="gapiLoaded()"></script>
+  <!-- Load Google Identity Services -->
+  <script src="https://accounts.google.com/gsi/client" async defer onload="gisLoaded()"></script>
 </head>
 <body>
   <h1>Indexed Pages Count</h1>
-  <button onclick="initClient()">Authorize & Fetch</button>
+  <button onclick="authorizeAndFetch()">Authorize & Fetch</button>
   <div id="output"></div>
 
   <script>
-    function initClient() {
-  gapi.load('client:auth2', () => {
-    gapi.auth2.init({
-      client_id: '830015351192-38tmspassocrp65dok2mo83d54g9gtav.apps.googleusercontent.com',
-      scope: 'https://www.googleapis.com/auth/webmasters.readonly'
-    }).then(() => {
-      gapi.auth2.getAuthInstance().signIn()
-        .then(() => {
-          gapi.client.load('searchconsole', 'v1').then(fetchSitemaps)
-            .catch(err => showError('API load error', err));
-        })
-        .catch(err => showError('Sign-in error', err));
-    }).catch(err => showError('Init error', err));
-  });
-}
+    let tokenClient;
+    let gapiInited = false;
 
-function fetchSitemaps() {
-  gapi.client.searchconsole.sitemaps.list({
-    siteUrl: 'https://pwindows.qzz.io/'
-  }).then(response => {
-    if (response.result.sitemap && response.result.sitemap.length > 0) {
-      const data = response.result.sitemap[0].contents[0];
-      document.getElementById('output').innerText =
-        `Submitted: ${data.submitted}, Indexed: ${data.indexed}`;
-    } else {
-      document.getElementById('output').innerText = 'No sitemap data found.';
+    // Load GAPI client
+    function gapiLoaded() {
+      gapi.load('client', initializeGapiClient);
+    }
+
+    async function initializeGapiClient() {
+      await gapi.client.init({
+        discoveryDocs: ['https://www.googleapis.com/discovery/v1/apis/searchconsole/v1/rest'],
+      });
+      gapiInited = true;
+    }
+
+    // Load GIS client
+    function gisLoaded() {
+      tokenClient = google.accounts.oauth2.initTokenClient({
+        client_id: '830015351192-38tmspassocrp65dok2mo83d54g9gtav.apps.googleusercontent.com',
+        scope: 'https://www.googleapis.com/auth/webmasters.readonly',
+        callback: (tokenResponse) => {
+          if (tokenResponse.access_token) {
+            fetchSitemaps();
+          } else {
+            showError('Token error', tokenResponse);
+          }
+        },
+      });
+    }
+
+    // Trigger authorization
+    function authorizeAndFetch() {
+      if (!gapiInited) {
+        showError('Init error', {message: 'GAPI not initialized yet'});
+        return;
+      }
+      tokenClient.requestAccessToken();
+    }
+
+    // Fetch sitemap data
+    async function fetchSitemaps() {
+      try {
+        const response = await gapi.client.searchconsole.sitemaps.list({
+          siteUrl: 'https://www.pwindows.qzz.io/',
+        });
+        if (response.result.sitemap && response.result.sitemap.length > 0) {
+          const data = response.result.sitemap[0].contents[0];
+          document.getElementById('output').innerText =
+            `Submitted: ${data.submitted}, Indexed: ${data.indexed}`;
+        } else {
+          document.getElementById('output').innerText = 'No sitemap data found.';
+        }
+      } catch (err) {
+        showError('Fetch error', err);
+      }
     }
-  }).catch(err => showError('Fetch error', err));
-}
 
-function showError(label, err) {
-  console.error(label, err);
-  document.getElementById('output').innerText =
-    `${label}: ${JSON.stringify(err, null, 2)}`;
-}
+    // Error handler
     function showError(label, err) {
       console.error(label, err);
       document.getElementById('output').innerText =
