Fix React Strict Mode double-call issue in Google Calendar integration
- Add state-based lock (isTestRunning) to prevent duplicate API calls - Update error handling in edge function for body consumption - Add OAuth2 token generation helper tool (get-google-token-local.html) 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
This commit is contained in:
dwindown
320
get-google-token-local.html
Normal file
320
get-google-token-local.html
Normal file
@@ -0,0 +1,320 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Google OAuth - Get Refresh Token</title>
|
||||
<style>
|
||||
* { box-sizing: border-box; }
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||||
max-width: 900px;
|
||||
margin: 0 auto;
|
||||
padding: 20px;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
min-height: 100vh;
|
||||
}
|
||||
.container {
|
||||
background: white;
|
||||
padding: 40px;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 10px 40px rgba(0,0,0,0.2);
|
||||
}
|
||||
h1 {
|
||||
color: #333;
|
||||
margin-top: 0;
|
||||
border-bottom: 3px solid #4285f4;
|
||||
padding-bottom: 15px;
|
||||
}
|
||||
.step {
|
||||
margin: 25px 0;
|
||||
padding: 20px;
|
||||
background: #f8f9fa;
|
||||
border-left: 5px solid #4285f4;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.step h3 {
|
||||
margin-top: 0;
|
||||
color: #4285f4;
|
||||
}
|
||||
code {
|
||||
background: #f1f1f1;
|
||||
padding: 2px 8px;
|
||||
border-radius: 4px;
|
||||
font-family: 'Courier New', monospace;
|
||||
font-size: 0.9em;
|
||||
color: #d63384;
|
||||
}
|
||||
.input-group {
|
||||
margin: 20px 0;
|
||||
}
|
||||
label {
|
||||
display: block;
|
||||
font-weight: 600;
|
||||
margin-bottom: 8px;
|
||||
color: #555;
|
||||
}
|
||||
input {
|
||||
width: 100%;
|
||||
padding: 12px;
|
||||
border: 2px solid #ddd;
|
||||
border-radius: 6px;
|
||||
font-size: 14px;
|
||||
transition: border-color 0.3s;
|
||||
}
|
||||
input:focus {
|
||||
outline: none;
|
||||
border-color: #4285f4;
|
||||
}
|
||||
button {
|
||||
background: #4285f4;
|
||||
color: white;
|
||||
padding: 14px 28px;
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
margin-top: 15px;
|
||||
transition: background 0.3s;
|
||||
}
|
||||
button:hover {
|
||||
background: #3367d6;
|
||||
}
|
||||
button:disabled {
|
||||
background: #ccc;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
#result {
|
||||
margin-top: 25px;
|
||||
padding: 20px;
|
||||
background: #e8f5e9;
|
||||
border: 2px solid #4caf50;
|
||||
border-radius: 6px;
|
||||
display: none;
|
||||
}
|
||||
.error {
|
||||
background: #ffebee;
|
||||
border-color: #f44336;
|
||||
}
|
||||
textarea {
|
||||
width: 100%;
|
||||
padding: 15px;
|
||||
border: 2px solid #ddd;
|
||||
border-radius: 6px;
|
||||
font-family: 'Courier New', monospace;
|
||||
min-height: 120px;
|
||||
font-size: 13px;
|
||||
resize: vertical;
|
||||
}
|
||||
.warning {
|
||||
background: #fff3cd;
|
||||
border: 2px solid #ffc107;
|
||||
padding: 15px;
|
||||
border-radius: 6px;
|
||||
margin: 20px 0;
|
||||
}
|
||||
.warning strong {
|
||||
color: #856404;
|
||||
}
|
||||
.auth-button {
|
||||
background: #34a853;
|
||||
font-size: 18px;
|
||||
padding: 16px 32px;
|
||||
display: block;
|
||||
margin: 20px auto;
|
||||
}
|
||||
.auth-button:hover {
|
||||
background: #2d9247;
|
||||
}
|
||||
.hidden {
|
||||
display: none;
|
||||
}
|
||||
pre {
|
||||
white-space: pre-wrap;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<h1>🔑 Google OAuth Setup for Personal Gmail</h1>
|
||||
|
||||
<div class="warning">
|
||||
<strong>⚠️ Important:</strong> This tool runs entirely in your browser. No data is sent to any server - it goes directly to Google's OAuth servers.
|
||||
</div>
|
||||
|
||||
<div class="step">
|
||||
<h3>Step 1: Create Google Cloud Project</h3>
|
||||
<ol>
|
||||
<li>Go to <a href="https://console.cloud.google.com/" target="_blank">Google Cloud Console</a></li>
|
||||
<li>Create a new project (or select existing)</li>
|
||||
<li>Navigate to <strong>APIs & Services > Library</strong></li>
|
||||
<li>Search for and enable <strong>Google Calendar API</strong></li>
|
||||
<li>Go to <strong>APIs & Services > Credentials</strong></li>
|
||||
<li>Click <strong>+ Create Credentials</strong> → <strong>OAuth client ID</strong></li>
|
||||
<li>Application type: <strong>Web application</strong></li>
|
||||
<li>Add <strong>Authorized redirect URI</strong>: <code id="redirectUri"></code></li>
|
||||
<li>Click <strong>Create</strong> and copy the <strong>Client ID</strong></li>
|
||||
<li>Copy the <strong>Client Secret</strong> from the credentials page</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<div class="step">
|
||||
<h3>Step 2: Enter Your Credentials</h3>
|
||||
<div class="input-group">
|
||||
<label for="clientId">Client ID:</label>
|
||||
<input type="text" id="clientId" placeholder="Enter your Google OAuth Client ID">
|
||||
</div>
|
||||
<div class="input-group">
|
||||
<label for="clientSecret">Client Secret:</label>
|
||||
<input type="text" id="clientSecret" placeholder="Enter your Google OAuth Client Secret">
|
||||
</div>
|
||||
<button onclick="showAuthUrl()">Generate Authorization URL</button>
|
||||
</div>
|
||||
|
||||
<div id="authUrlStep" class="step hidden">
|
||||
<h3>Step 3: Authorize Your Google Account</h3>
|
||||
<p>Click the button below and sign in with the Google account that owns the calendar you want to use:</p>
|
||||
<button class="auth-button" onclick="openGoogleAuth()">🔐 Authorize with Google</button>
|
||||
<p><strong>Important:</strong> After authorization, you'll be redirected back. Copy the authorization code from the URL.</p>
|
||||
<input type="text" id="authCode" placeholder="Paste authorization code from redirect URL here" style="margin-top: 15px;">
|
||||
<button onclick="exchangeCodeForTokens()">Get Refresh Token</button>
|
||||
</div>
|
||||
|
||||
<div id="result"></div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// Show current URL as redirect URI hint
|
||||
document.getElementById('redirectUri').textContent = window.location.origin + window.location.pathname;
|
||||
|
||||
function showAuthUrl() {
|
||||
const clientId = document.getElementById('clientId').value.trim();
|
||||
const clientSecret = document.getElementById('clientSecret').value.trim();
|
||||
|
||||
if (!clientId || !clientSecret) {
|
||||
alert('Please enter both Client ID and Client Secret');
|
||||
return;
|
||||
}
|
||||
|
||||
// Store credentials in sessionStorage
|
||||
sessionStorage.setItem('google_client_id', clientId);
|
||||
sessionStorage.setItem('google_client_secret', clientSecret);
|
||||
|
||||
// Generate authorization URL
|
||||
const redirectUri = window.location.origin + window.location.pathname;
|
||||
const authUrl = `https://accounts.google.com/o/oauth2/v2/auth?` +
|
||||
`client_id=${encodeURIComponent(clientId)}&` +
|
||||
`redirect_uri=${encodeURIComponent(redirectUri)}&` +
|
||||
`response_type=code&` +
|
||||
`scope=${encodeURIComponent('https://www.googleapis.com/auth/calendar')}&` +
|
||||
`access_type=offline&` +
|
||||
`prompt=consent`;
|
||||
|
||||
document.getElementById('authUrlStep').classList.remove('hidden');
|
||||
|
||||
// Store auth URL for the button
|
||||
window.openAuthUrl = authUrl;
|
||||
}
|
||||
|
||||
function openGoogleAuth() {
|
||||
if (window.openAuthUrl) {
|
||||
window.open(window.openAuthUrl, '_blank');
|
||||
}
|
||||
}
|
||||
|
||||
// Check if we have an auth code in the URL (from redirect)
|
||||
window.onload = function() {
|
||||
const urlParams = new URLSearchParams(window.location.search);
|
||||
const code = urlParams.get('code');
|
||||
|
||||
if (code) {
|
||||
document.getElementById('authCode').value = code;
|
||||
// Clear the code from URL
|
||||
window.history.replaceState({}, document.title, window.location.pathname);
|
||||
}
|
||||
|
||||
// Restore credentials if they exist
|
||||
const clientId = sessionStorage.getItem('google_client_id');
|
||||
const clientSecret = sessionStorage.getItem('google_client_secret');
|
||||
if (clientId) document.getElementById('clientId').value = clientId;
|
||||
if (clientSecret) document.getElementById('clientSecret').value = clientSecret;
|
||||
};
|
||||
|
||||
async function exchangeCodeForTokens() {
|
||||
const clientId = document.getElementById('clientId').value.trim();
|
||||
const clientSecret = document.getElementById('clientSecret').value.trim();
|
||||
const authCode = document.getElementById('authCode').value.trim();
|
||||
|
||||
if (!clientId || !clientSecret || !authCode) {
|
||||
alert('Please fill in all fields');
|
||||
return;
|
||||
}
|
||||
|
||||
const redirectUri = window.location.origin + window.location.pathname;
|
||||
|
||||
try {
|
||||
const response = await fetch('https://oauth2.googleapis.com/token', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/x-www-form-urlencoded',
|
||||
},
|
||||
body: new URLSearchParams({
|
||||
code: authCode,
|
||||
client_id: clientId,
|
||||
client_secret: clientSecret,
|
||||
redirect_uri: redirectUri,
|
||||
grant_type: 'authorization_code',
|
||||
}),
|
||||
});
|
||||
|
||||
const data = await response.json();
|
||||
|
||||
if (data.error) {
|
||||
throw new Error(data.error_description || data.error);
|
||||
}
|
||||
|
||||
if (!data.refresh_token) {
|
||||
throw new Error('No refresh token received. Make sure you used "prompt=consent" in the authorization URL.');
|
||||
}
|
||||
|
||||
const config = {
|
||||
client_id: clientId,
|
||||
client_secret: clientSecret,
|
||||
refresh_token: data.refresh_token
|
||||
};
|
||||
|
||||
const configJson = JSON.stringify(config, null, 2);
|
||||
|
||||
const resultDiv = document.getElementById('result');
|
||||
resultDiv.style.display = 'block';
|
||||
resultDiv.className = '';
|
||||
resultDiv.innerHTML = `
|
||||
<h4>✅ Success! Here's your OAuth Config:</h4>
|
||||
<p>Copy this JSON and paste it into the <strong>Google OAuth Config</strong> field in your admin panel:</p>
|
||||
<textarea readonly onclick="this.select()">${configJson}</textarea>
|
||||
<p><strong>Access Token (for testing):</strong></p>
|
||||
<code><pre>${data.access_token}</pre></code>
|
||||
<p><strong>Important:</strong></p>
|
||||
<ul>
|
||||
<li>Save this config securely - you'll need it to generate meet links</li>
|
||||
<li>The refresh token is long-lasting and won't expire unless you revoke access</li>
|
||||
<li>Keep your Client Secret safe!</li>
|
||||
</ul>
|
||||
`;
|
||||
|
||||
// Clear stored credentials
|
||||
sessionStorage.removeItem('google_client_id');
|
||||
sessionStorage.removeItem('google_client_secret');
|
||||
|
||||
} catch (error) {
|
||||
const resultDiv = document.getElementById('result');
|
||||
resultDiv.style.display = 'block';
|
||||
resultDiv.className = 'error';
|
||||
resultDiv.innerHTML = `<strong>Error:</strong> ${error.message}`;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user