在Django模板中安全地在JavaScript中使用环境变量

# Google Drive API 凭证
GOOGLE_DRIVE_API_KEY=YOUR_GOOGLE_DRIVE_API_KEY
GOOGLE_DRIVE_API_CLIENT_ID=YOUR_GOOGLE_DRIVE_API_CLIENT_ID.apps.googleusercontent.com
GOOGLE_DRIVE_APP_ID=YOUR_GOOGLE_DRIVE_APP_ID

import os
from dotenv import load_dotenv
from django.http import JsonResponse

# 在应用启动时加载 .env 文件。
# 实际项目中，这通常在 settings.py 或 wsgi.py/asgi.py 中进行一次性加载。
# 这里为了演示方便，在视图中加载，但更好的实践是全局加载。
load_dotenv()  

def get_google_drive_credentials(request):
    """
    从环境变量中获取 Google Drive API 凭证并以 JSON 格式返回。
    """
    # 获取环境变量值
    google_drive_api_key = os.getenv('GOOGLE_DRIVE_API_KEY')
    google_drive_api_client_id = os.getenv('GOOGLE_DRIVE_API_CLIENT_ID')
    google_drive_app_id = os.getenv('GOOGLE_DRIVE_APP_ID')

    # 构建 JSON 响应数据
    data = {
        'api_key': google_drive_api_key,
        'client_id': google_drive_api_client_id,
        'app_id': google_drive_app_id,
    }

    # 返回 JSON 响应
    return JsonResponse(data)

from django.urls import path
from . import views

urlpatterns = [
    path('get-google-drive-credentials/', views.get_google_drive_credentials, name='google_drive_credentials'),
]

<script>
    // 使用 XMLHttpRequest 发起 AJAX 请求
    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function () {
        // 当请求完成且状态为 DONE (4) 时
        if (xhr.readyState === XMLHttpRequest.DONE) {
            // 如果 HTTP 状态码为 200 (OK)
            if (xhr.status === 200) {
                // 解析 JSON 响应
                var response = JSON.parse(xhr.responseText);

                // 将获取到的凭证赋值给 JavaScript 变量
                var API_KEY = response.api_key;
                var CLIENT_ID = response.client_id;
                var APP_ID = response.app_id;

                // 定义 Google Drive API 的作用域
                var SCOPES = 'https://www.googleapis.com/auth/drive';

                // 在此处使用 API_KEY, CLIENT_ID, APP_ID 和 SCOPES 初始化 Google Drive File Picker
                console.log('API Key:', API_KEY);
                console.log('Client ID:', CLIENT_ID);
                console.log('App ID:', APP_ID);
                console.log('Scopes:', SCOPES);

                // 例如，初始化 Google API 客户端
                // gapi.load('client:picker', function() {
                //     gapi.client.setApiKey(API_KEY);
                //     gapi.client.drive.apps.list().then(function() {
                //         // ... your picker logic here ...
                //     });
                // });

            } else {
                // 请求失败，打印错误信息
                console.error('Failed to retrieve Google Drive credentials. Status:', xhr.status);
            }
        }
    };
    // 配置 GET 请求到凭证获取端点
    xhr.open('GET', '/get-google-drive-credentials/'); // 确保路径与您的 urls.py 配置一致
    // 发送请求
    xhr.send();
</script>

<script>
    fetch('/get-google-drive-credentials/') // 确保路径与您的 urls.py 配置一致
        .then(response => {
            if (!response.ok) {
                throw new Error('Network response was not ok ' + response.statusText);
            }
            return response.json();
        })
        .then(data => {
            var API_KEY = data.api_key;
            var CLIENT_ID = data.client_id;
            var APP_ID = data.app_id;
            var SCOPES = 'https://www.googleapis.com/auth/drive';

            console.log('API Key (Fetch):', API_KEY);
            console.log('Client ID (Fetch):', CLIENT_ID);
            console.log('App ID (Fetch):', APP_ID);
            console.log('Scopes (Fetch):', SCOPES);

            // 在此处使用这些变量
        })
        .catch(error => {
            console.error('Failed to retrieve Google Drive credentials:', error);
        });
</script>