Switch from Service Account to OAuth2 for Google Calendar (Personal Gmail)
- Replace JWT service account authentication with OAuth2 refresh token flow
- Service accounts cannot create Google Meet links for personal Gmail accounts
- Update edge function to use OAuth2 token exchange
- Change database column from google_service_account_json to google_oauth_config
- Add helper tool (get-google-refresh-token.html) to generate OAuth credentials
- Update IntegrasiTab UI to show OAuth config instead of service account
- Add SQL migration file for new google_oauth_config column
OAuth2 Config format:
{
"client_id": "...",
"client_secret": "...",
"refresh_token": "..."
}
This approach works with personal @gmail.com accounts without requiring
Google Workspace or Domain-Wide Delegation.
This commit is contained in:
dwindown
11
add-google-oauth-config.sql
Normal file
11
add-google-oauth-config.sql
Normal file
@@ -0,0 +1,11 @@
|
||||
-- Add google_oauth_config column to platform_settings table
|
||||
-- This replaces google_service_account_json for personal Gmail accounts
|
||||
|
||||
ALTER TABLE platform_settings
|
||||
ADD COLUMN IF NOT EXISTS google_oauth_config jsonb;
|
||||
|
||||
-- Add comment
|
||||
COMMENT ON COLUMN platform_settings.google_oauth_config IS 'OAuth2 configuration for Google Calendar API (for personal Gmail accounts). Format: {"client_id": "...", "client_secret": "...", "refresh_token": "..."}';
|
||||
|
||||
-- Note: The old google_service_account_json column can be dropped later if no longer needed
|
||||
-- ALTER TABLE platform_settings DROP COLUMN IF EXISTS google_service_account_json;
|
||||
187
get-google-refresh-token.html
Normal file
187
get-google-refresh-token.html
Normal file
@@ -0,0 +1,187 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Get Google OAuth Refresh Token</title>
|
||||
<style>
|
||||
body {
|
||||
font-family: Arial, sans-serif;
|
||||
max-width: 800px;
|
||||
margin: 50px auto;
|
||||
padding: 20px;
|
||||
background: #f5f5f5;
|
||||
}
|
||||
.container {
|
||||
background: white;
|
||||
padding: 30px;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
|
||||
}
|
||||
h1 {
|
||||
color: #333;
|
||||
border-bottom: 2px solid #4285f4;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
.step {
|
||||
margin: 20px 0;
|
||||
padding: 15px;
|
||||
background: #f8f9fa;
|
||||
border-left: 4px solid #4285f4;
|
||||
}
|
||||
code {
|
||||
background: #f1f1f1;
|
||||
padding: 2px 6px;
|
||||
border-radius: 3px;
|
||||
font-family: 'Courier New', monospace;
|
||||
}
|
||||
.input-group {
|
||||
margin: 15px 0;
|
||||
}
|
||||
label {
|
||||
display: block;
|
||||
font-weight: bold;
|
||||
margin-bottom: 5px;
|
||||
color: #555;
|
||||
}
|
||||
input {
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 4px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
button {
|
||||
background: #4285f4;
|
||||
color: white;
|
||||
padding: 12px 24px;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
font-size: 16px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
button:hover {
|
||||
background: #3367d6;
|
||||
}
|
||||
#result {
|
||||
margin-top: 20px;
|
||||
padding: 15px;
|
||||
background: #e8f5e9;
|
||||
border: 1px solid #4caf50;
|
||||
border-radius: 4px;
|
||||
display: none;
|
||||
}
|
||||
.error {
|
||||
background: #ffebee;
|
||||
border-color: #f44336;
|
||||
}
|
||||
textarea {
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 4px;
|
||||
font-family: 'Courier New', monospace;
|
||||
min-height: 100px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<h1>🔑 Generate Google OAuth Refresh Token</h1>
|
||||
|
||||
<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 one</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 authorized redirect URI: <code>https://developers.google.com/oauthplayground</code></li>
|
||||
<li>Copy the <strong>Client ID</strong> and <strong>Client Secret</strong></li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<div class="step">
|
||||
<h3>Step 2: Configure OAuth Playground</h3>
|
||||
<ol>
|
||||
<li>Go to <a href="https://developers.google.com/oauthplayground/" target="_blank">OAuth 2.0 Playground</a></li>
|
||||
<li>Click the gear icon (⚙️) in the top right</li>
|
||||
<li>Check <strong>Use your own OAuth credentials</strong></li>
|
||||
<li>Enter your <strong>Client ID</strong> and <strong>Client Secret</strong> from Step 1</li>
|
||||
<li>Click <strong>Close</strong></li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<div class="step">
|
||||
<h3>Step 3: Get Refresh Token</h3>
|
||||
<ol>
|
||||
<li>In the left panel, select:
|
||||
<ul>
|
||||
<li>☑️ Google Calendar API v3</li>
|
||||
<li>Click <strong>Authorize APIs</strong></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>Sign in with your Google account and grant permissions</li>
|
||||
<li>Click <strong>Exchange authorization code for tokens</strong></li>
|
||||
<li>Copy the <strong>Refresh Token</strong> from the right panel</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<div class="step">
|
||||
<h3>Step 4: Generate Configuration</h3>
|
||||
<div class="input-group">
|
||||
<label for="clientId">Client ID:</label>
|
||||
<input type="text" id="clientId" placeholder="Enter your Client ID">
|
||||
</div>
|
||||
<div class="input-group">
|
||||
<label for="clientSecret">Client Secret:</label>
|
||||
<input type="text" id="clientSecret" placeholder="Enter your Client Secret">
|
||||
</div>
|
||||
<div class="input-group">
|
||||
<label for="refreshToken">Refresh Token:</label>
|
||||
<input type="text" id="refreshToken" placeholder="Enter your Refresh Token">
|
||||
</div>
|
||||
<button onclick="generateConfig()">Generate Configuration</button>
|
||||
</div>
|
||||
|
||||
<div id="result"></div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function generateConfig() {
|
||||
const clientId = document.getElementById('clientId').value.trim();
|
||||
const clientSecret = document.getElementById('clientSecret').value.trim();
|
||||
const refreshToken = document.getElementById('refreshToken').value.trim();
|
||||
|
||||
if (!clientId || !clientSecret || !refreshToken) {
|
||||
const resultDiv = document.getElementById('result');
|
||||
resultDiv.style.display = 'block';
|
||||
resultDiv.className = 'error';
|
||||
resultDiv.innerHTML = '<strong>Error:</strong> Please fill in all fields.';
|
||||
return;
|
||||
}
|
||||
|
||||
const config = {
|
||||
client_id: clientId,
|
||||
client_secret: clientSecret,
|
||||
refresh_token: refreshToken
|
||||
};
|
||||
|
||||
const configJson = JSON.stringify(config, null, 2);
|
||||
|
||||
const resultDiv = document.getElementById('result');
|
||||
resultDiv.style.display = 'block';
|
||||
resultDiv.className = '';
|
||||
resultDiv.innerHTML = `
|
||||
<h4>✅ Configuration Generated!</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>Important:</strong> Keep these credentials secure. Never share them publicly!</p>
|
||||
`;
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -17,7 +17,7 @@ interface IntegrationSettings {
|
||||
integration_whatsapp_number: string;
|
||||
integration_whatsapp_url: string;
|
||||
integration_google_calendar_id: string;
|
||||
google_service_account_json?: string;
|
||||
google_oauth_config?: string;
|
||||
integration_email_provider: string;
|
||||
integration_email_api_base_url: string;
|
||||
integration_privacy_url: string;
|
||||
@@ -76,7 +76,7 @@ export function IntegrasiTab() {
|
||||
integration_whatsapp_number: platformData.integration_whatsapp_number || '',
|
||||
integration_whatsapp_url: platformData.integration_whatsapp_url || '',
|
||||
integration_google_calendar_id: platformData.integration_google_calendar_id || '',
|
||||
google_service_account_json: platformData.google_service_account_json || '',
|
||||
google_oauth_config: platformData.google_oauth_config || '',
|
||||
integration_email_provider: platformData.integration_email_provider || 'mailketing',
|
||||
integration_email_api_base_url: platformData.integration_email_api_base_url || '',
|
||||
integration_privacy_url: platformData.integration_privacy_url || '/privacy',
|
||||
@@ -102,7 +102,7 @@ export function IntegrasiTab() {
|
||||
integration_whatsapp_number: settings.integration_whatsapp_number,
|
||||
integration_whatsapp_url: settings.integration_whatsapp_url,
|
||||
integration_google_calendar_id: settings.integration_google_calendar_id,
|
||||
google_service_account_json: settings.google_service_account_json,
|
||||
google_oauth_config: settings.google_oauth_config,
|
||||
integration_email_provider: settings.integration_email_provider,
|
||||
integration_email_api_base_url: settings.integration_email_api_base_url,
|
||||
integration_privacy_url: settings.integration_privacy_url,
|
||||
@@ -117,11 +117,11 @@ export function IntegrasiTab() {
|
||||
.eq('id', settings.id);
|
||||
|
||||
if (platformError) {
|
||||
// If schema cache error, try saving service account JSON separately via raw SQL
|
||||
if (platformError.code === 'PGRST204' && settings.google_service_account_json) {
|
||||
// If schema cache error, try saving OAuth config separately via raw SQL
|
||||
if (platformError.code === 'PGRST204' && settings.google_oauth_config) {
|
||||
console.log('Schema cache error, using fallback RPC method');
|
||||
const { error: rpcError } = await supabase.rpc('exec_sql', {
|
||||
sql: `UPDATE platform_settings SET google_service_account_json = '${settings.google_service_account_json.replace(/'/g, "''")}'::jsonb WHERE id = '${settings.id}'`
|
||||
sql: `UPDATE platform_settings SET google_oauth_config = '${settings.google_oauth_config.replace(/'/g, "''")}'::jsonb WHERE id = '${settings.id}'`
|
||||
});
|
||||
|
||||
if (rpcError) {
|
||||
@@ -349,22 +349,24 @@ export function IntegrasiTab() {
|
||||
<div className="space-y-2">
|
||||
<Label className="flex items-center gap-2">
|
||||
<Key className="w-4 h-4" />
|
||||
Google Service Account JSON
|
||||
Google OAuth Config
|
||||
</Label>
|
||||
<Textarea
|
||||
value={settings.google_service_account_json || ''}
|
||||
onChange={(e) => setSettings({ ...settings, google_service_account_json: e.target.value })}
|
||||
placeholder='{"type": "service_account", "project_id": "...", "private_key": "...", "client_email": "..."}'
|
||||
value={settings.google_oauth_config || ''}
|
||||
onChange={(e) => setSettings({ ...settings, google_oauth_config: e.target.value })}
|
||||
placeholder='{"client_id": "...", "client_secret": "...", "refresh_token": "..."}'
|
||||
className="min-h-[120px] font-mono text-sm border-2"
|
||||
/>
|
||||
<div className="space-y-1">
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Paste entire service account JSON from Google Cloud Console. Calendar must be shared with the service account email.
|
||||
OAuth2 credentials untuk personal Gmail account. Gunakan <a href="/get-google-refresh-token.html" target="_blank" className="text-blue-600 underline">tool ini</a> untuk generate refresh token.
|
||||
</p>
|
||||
{settings.google_service_account_json && (
|
||||
</div>
|
||||
{settings.google_oauth_config && (
|
||||
<Alert>
|
||||
<AlertTriangle className="w-4 h-4" />
|
||||
<AlertDescription>
|
||||
Service account configured. Calendar ID: {settings.integration_google_calendar_id || 'Not set'}
|
||||
OAuth configured. Calendar ID: {settings.integration_google_calendar_id || 'Not set'}
|
||||
</AlertDescription>
|
||||
</Alert>
|
||||
)}
|
||||
@@ -373,8 +375,8 @@ export function IntegrasiTab() {
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={async () => {
|
||||
if (!settings.integration_google_calendar_id || !settings.google_service_account_json) {
|
||||
toast({ title: "Error", description: "Lengkapi Calendar ID dan Service Account JSON", variant: "destructive" });
|
||||
if (!settings.integration_google_calendar_id || !settings.google_oauth_config) {
|
||||
toast({ title: "Error", description: "Lengkapi Calendar ID dan OAuth Config", variant: "destructive" });
|
||||
return;
|
||||
}
|
||||
|
||||
|
||||
@@ -6,14 +6,10 @@ const corsHeaders = {
|
||||
"Access-Control-Allow-Headers": "authorization, x-client-info, apikey, content-type",
|
||||
};
|
||||
|
||||
interface GoogleServiceAccount {
|
||||
type: string;
|
||||
project_id: string;
|
||||
private_key_id: string;
|
||||
private_key: string;
|
||||
client_email: string;
|
||||
interface GoogleOAuthConfig {
|
||||
client_id: string;
|
||||
token_uri: string;
|
||||
client_secret: string;
|
||||
refresh_token: string;
|
||||
}
|
||||
|
||||
interface CreateMeetRequest {
|
||||
@@ -27,80 +23,17 @@ interface CreateMeetRequest {
|
||||
notes?: string;
|
||||
}
|
||||
|
||||
// Function to create JWT and get access token using native Web Crypto API
|
||||
async function getGoogleAccessToken(serviceAccount: GoogleServiceAccount): Promise<string> {
|
||||
// Function to get access token from refresh token (OAuth2)
|
||||
async function getGoogleAccessToken(oauthConfig: GoogleOAuthConfig): Promise<string> {
|
||||
try {
|
||||
const now = Math.floor(Date.now() / 1000);
|
||||
|
||||
// Build JWT header and payload manually
|
||||
const header = {
|
||||
alg: "RS256",
|
||||
typ: "JWT",
|
||||
};
|
||||
|
||||
const payload = {
|
||||
iss: serviceAccount.client_email,
|
||||
scope: "https://www.googleapis.com/auth/calendar",
|
||||
aud: serviceAccount.token_uri,
|
||||
exp: now + 3600,
|
||||
iat: now,
|
||||
};
|
||||
|
||||
// Encode header and payload (base64url)
|
||||
const base64UrlEncode = (str: string) => {
|
||||
return btoa(str)
|
||||
.replace(/\+/g, "-")
|
||||
.replace(/\//g, "_")
|
||||
.replace(/=/g, "");
|
||||
};
|
||||
|
||||
const encodedHeader = base64UrlEncode(JSON.stringify(header));
|
||||
const encodedPayload = base64UrlEncode(JSON.stringify(payload));
|
||||
const signatureInput = `${encodedHeader}.${encodedPayload}`;
|
||||
|
||||
// Convert PEM to binary
|
||||
const keyData = serviceAccount.private_key
|
||||
.replace(/-----BEGIN PRIVATE KEY-----/g, "")
|
||||
.replace(/-----END PRIVATE KEY-----/g, "")
|
||||
.replace(/\s/g, "");
|
||||
|
||||
const binaryKey = Uint8Array.from(atob(keyData), c => c.charCodeAt(0));
|
||||
|
||||
// Import private key using native Web Crypto API
|
||||
const privateKey = await crypto.subtle.importKey(
|
||||
"pkcs8",
|
||||
binaryKey,
|
||||
{
|
||||
name: "RSASSA-PKCS1-v1_5",
|
||||
hash: "SHA-256",
|
||||
},
|
||||
false,
|
||||
["sign"]
|
||||
);
|
||||
|
||||
// Sign the JWT
|
||||
const signature = await crypto.subtle.sign(
|
||||
"RSASSA-PKCS1-v1_5",
|
||||
privateKey,
|
||||
new TextEncoder().encode(signatureInput)
|
||||
);
|
||||
|
||||
// Encode signature
|
||||
const encodedSignature = btoa(String.fromCharCode(...new Uint8Array(signature)))
|
||||
.replace(/\+/g, "-")
|
||||
.replace(/\//g, "_")
|
||||
.replace(/=/g, "");
|
||||
|
||||
const token = `${signatureInput}.${encodedSignature}`;
|
||||
console.log("Generated JWT (first 100 chars):", token.substring(0, 100));
|
||||
|
||||
// Exchange JWT for access token
|
||||
const response = await fetch(serviceAccount.token_uri, {
|
||||
const response = await fetch("https://oauth2.googleapis.com/token", {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/x-www-form-urlencoded" },
|
||||
body: new URLSearchParams({
|
||||
grant_type: "urn:ietf:params:oauth:grant-type:jwt-bearer",
|
||||
assertion: token,
|
||||
client_id: oauthConfig.client_id,
|
||||
client_secret: oauthConfig.client_secret,
|
||||
refresh_token: oauthConfig.refresh_token,
|
||||
grant_type: "refresh_token",
|
||||
}),
|
||||
});
|
||||
|
||||
@@ -138,7 +71,7 @@ serve(async (req: Request): Promise<Response> => {
|
||||
// Get platform settings
|
||||
const { data: settings, error: settingsError } = await supabase
|
||||
.from("platform_settings")
|
||||
.select("integration_google_calendar_id, google_service_account_json")
|
||||
.select("integration_google_calendar_id, google_oauth_config")
|
||||
.single();
|
||||
|
||||
if (settingsError) {
|
||||
@@ -158,36 +91,36 @@ serve(async (req: Request): Promise<Response> => {
|
||||
);
|
||||
}
|
||||
|
||||
// Get service account from settings
|
||||
const serviceAccountJson = settings?.google_service_account_json;
|
||||
// Get OAuth config from settings
|
||||
const oauthConfigJson = settings?.google_oauth_config;
|
||||
|
||||
if (!serviceAccountJson) {
|
||||
if (!oauthConfigJson) {
|
||||
return new Response(
|
||||
JSON.stringify({
|
||||
success: false,
|
||||
message: "Google Service Account JSON belum dikonfigurasi. Tambahkan di Pengaturan > Integrasi."
|
||||
message: "Google OAuth Config belum dikonfigurasi. Tambahkan di Pengaturan > Integrasi. Format: {\"client_id\":\"...\",\"client_secret\":\"...\",\"refresh_token\":\"...\"}"
|
||||
}),
|
||||
{ status: 400, headers: { ...corsHeaders, "Content-Type": "application/json" } }
|
||||
);
|
||||
}
|
||||
|
||||
// Parse service account JSON
|
||||
let serviceAccount: GoogleServiceAccount;
|
||||
// Parse OAuth config JSON
|
||||
let oauthConfig: GoogleOAuthConfig;
|
||||
try {
|
||||
serviceAccount = JSON.parse(serviceAccountJson);
|
||||
oauthConfig = JSON.parse(oauthConfigJson);
|
||||
} catch (error: any) {
|
||||
console.error("Failed to parse service account JSON:", error);
|
||||
console.error("Failed to parse OAuth config JSON:", error);
|
||||
return new Response(
|
||||
JSON.stringify({
|
||||
success: false,
|
||||
message: "Format Google Service Account JSON tidak valid: " + error.message
|
||||
message: "Format Google OAuth Config tidak valid: " + error.message
|
||||
}),
|
||||
{ status: 400, headers: { ...corsHeaders, "Content-Type": "application/json" } }
|
||||
);
|
||||
}
|
||||
|
||||
// Get access token
|
||||
const accessToken = await getGoogleAccessToken(serviceAccount);
|
||||
// Get access token using OAuth2 refresh token
|
||||
const accessToken = await getGoogleAccessToken(oauthConfig);
|
||||
console.log("Got access token");
|
||||
|
||||
// Build event data
|
||||
@@ -205,8 +138,6 @@ serve(async (req: Request): Promise<Response> => {
|
||||
dateTime: endDate.toISOString(),
|
||||
timeZone: "Asia/Jakarta",
|
||||
},
|
||||
// Note: attendees removed because service accounts need Domain-Wide Delegation
|
||||
// Client email is included in description instead
|
||||
conferenceData: {
|
||||
createRequest: {
|
||||
requestId: body.slot_id,
|
||||
|
||||
Reference in New Issue
Block a user