123 lines
4.5 KiB
Markdown
123 lines
4.5 KiB
Markdown
 
|
# 🔗 Google Drive API Setup Guide
|
||
|
|
|
||
|
|
To enable **real file loading** in your Bible App's media tab, you need to set up Google Drive API credentials. This will allow the app to fetch and display your actual Google Drive files as thumbnails.
|
||
|
|
|
||
|
|
## 📋 Step-by-Step Setup
|
||
|
|
|
||
|
|
### 1. Create a Google Cloud Project
|
||
|
|
|
||
|
|
1. Go to [Google Cloud Console](https://console.cloud.google.com/)
|
||
|
|
2. Click **"New Project"** or select an existing project
|
||
|
|
3. Give your project a name (e.g., "Bible App Media Integration")
|
||
|
|
4. Click **"Create"**
|
||
|
|
|
||
|
|
### 2. Enable Google Drive API
|
||
|
|
|
||
|
|
1. In your Google Cloud Console, go to **APIs & Services > Library**
|
||
|
|
2. Search for **"Google Drive API"**
|
||
|
|
3. Click on it and press **"Enable"**
|
||
|
|
|
||
|
|
### 3. Create API Credentials
|
||
|
|
|
||
|
|
#### A. Create an API Key:
|
||
|
|
1. Go to **APIs & Services > Credentials**
|
||
|
|
2. Click **"+ CREATE CREDENTIALS"** → **"API key"**
|
||
|
|
3. Copy the generated API key
|
||
|
|
4. Click **"Restrict Key"** for security:
|
||
|
|
- Under **"API restrictions"**, select **"Restrict key"**
|
||
|
|
- Choose **"Google Drive API"**
|
||
|
|
- Under **"Website restrictions"**, add your domain (e.g., `192.168.1.126:8080` or your domain)
|
||
|
|
|
||
|
|
#### B. Create OAuth 2.0 Client ID:
|
||
|
|
1. Still in **Credentials**, click **"+ CREATE CREDENTIALS"** → **"OAuth client ID"**
|
||
|
|
2. If prompted, configure the **OAuth consent screen**:
|
||
|
|
- Choose **"External"** (unless you have a Google Workspace)
|
||
|
|
- Fill in required fields:
|
||
|
|
- App name: "Bible App Media"
|
||
|
|
- User support email: Your email
|
||
|
|
- Developer contact: Your email
|
||
|
|
- Add scopes: `https://www.googleapis.com/auth/drive.readonly`
|
||
|
|
3. Choose **"Web application"**
|
||
|
|
4. Add authorized origins: `http://192.168.1.126:8080` (your app's URL)
|
||
|
|
5. Copy the **Client ID**
|
||
|
|
|
||
|
|
### 4. Update Your App Code
|
||
|
|
|
||
|
|
Open `bible-app/app.js` and find this section around line 1140:
|
||
|
|
|
||
|
|
```javascript
|
||
|
|
await gapi.client.init({
|
||
|
|
apiKey: 'YOUR_API_KEY', // Replace with your actual API key
|
||
|
|
clientId: 'YOUR_CLIENT_ID.apps.googleusercontent.com', // Replace with your Client ID
|
||
|
|
discoveryDocs: ['https://www.googleapis.com/discovery/v1/apis/drive/v3/rest'],
|
||
|
|
scope: 'https://www.googleapis.com/auth/drive.readonly'
|
||
|
|
});
|
||
|
|
```
|
||
|
|
|
||
|
|
**Replace:**
|
||
|
|
- `YOUR_API_KEY` with your actual API key
|
||
|
|
- `YOUR_CLIENT_ID.apps.googleusercontent.com` with your actual Client ID
|
||
|
|
|
||
|
|
### 5. Set Folder Permissions
|
||
|
|
|
||
|
|
Make sure your Google Drive folder is accessible:
|
||
|
|
|
||
|
|
1. Right-click your Google Drive folder
|
||
|
|
2. Choose **"Share"**
|
||
|
|
3. Either:
|
||
|
|
- **Option A**: Make it **"Anyone with the link can view"** (easiest)
|
||
|
|
- **Option B**: Add your Google account email with **"Viewer"** permissions
|
||
|
|
|
||
|
|
### 6. Test the Integration
|
||
|
|
|
||
|
|
1. Save your changes to `app.js`
|
||
|
|
2. Refresh your Bible app
|
||
|
|
3. Switch to a media tab
|
||
|
|
4. Click the gear icon (⚙️) **"Media Source"** card
|
||
|
|
5. Paste your Google Drive folder link
|
||
|
|
6. Click **"Save & Load Media Thumbnails"**
|
||
|
|
|
||
|
|
The app should now:
|
||
|
|
- ✅ Prompt you to sign in to Google (if not already signed in)
|
||
|
|
- ✅ Load and display your real files as thumbnails
|
||
|
|
- ✅ Show file types, names, and sizes
|
||
|
|
- ✅ Allow drag-and-drop of real files to the canvas
|
||
|
|
|
||
|
|
## 🔧 Troubleshooting
|
||
|
|
|
||
|
|
### "Failed to initialize Google Drive API"
|
||
|
|
- Check that your API key and Client ID are correct
|
||
|
|
- Verify that Google Drive API is enabled in Google Cloud Console
|
||
|
|
- Make sure your domain is added to authorized origins
|
||
|
|
|
||
|
|
### "Authentication Required"
|
||
|
|
- Click the authentication card to sign in
|
||
|
|
- Make sure the OAuth consent screen is properly configured
|
||
|
|
- Check that the scope `https://www.googleapis.com/auth/drive.readonly` is added
|
||
|
|
|
||
|
|
### "Error Loading Files"
|
||
|
|
- Verify that the folder ID is correct
|
||
|
|
- Check folder permissions (make sure it's shared properly)
|
||
|
|
- Try refreshing the page and re-authenticating
|
||
|
|
|
||
|
|
### No Files Showing
|
||
|
|
- Make sure there are actually files in the folder
|
||
|
|
- Check that files aren't in the trash
|
||
|
|
- Verify folder permissions
|
||
|
|
|
||
|
|
## 🔐 Security Notes
|
||
|
|
|
||
|
|
- **Never commit your API credentials to version control**
|
||
|
|
- Consider using environment variables for production
|
||
|
|
- The `drive.readonly` scope only allows reading files, not modifying them
|
||
|
|
- API keys should be restricted to specific APIs and domains
|
||
|
|
|
||
|
|
## 🎉 Success!
|
||
|
|
|
||
|
|
Once set up correctly, your media tab will show **real thumbnails** of your Google Drive files, complete with:
|
||
|
|
- 🖼️ Actual image thumbnails
|
||
|
|
- 📁 Proper file type icons
|
||
|
|
- 📊 File sizes and names
|
||
|
|
- 🔄 Drag-and-drop functionality with real files
|
||
|
|
|
||
|
|
Your Bible app now has full Google Drive integration! 🎊
|