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

# Google Drive API 凭证
GOOGLE_DRIVE_API_KEY=YOUR_GOOGLE_DRIVE_API_KEY
GOOGLE_DRIVE_API_CLIENT_ID=YOUR_GOOGLE_DRIVE_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

def get_google_drive_credentials(request):
    """
    从环境变量中加载Google Drive API凭证并以JSON格式返回。
    """
    # 确保在视图函数中或应用启动时加载.env文件
    # 对于生产环境，建议在WSGI/ASGI入口点加载一次
    load_dotenv()  

    # 从环境变量中获取值
    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')

    # 构建包含凭证的字典
    data = {
        'api_key': google_drive_api_key,
        'client_id': google_drive_api_client_id,
        'app_id': google_drive_app_id,
    }

    # 返回JSON响应
    return JsonResponse(data)

# 在您的urls.py文件中
from django.urls import path
from . import views # 假设views.py在当前应用目录下

urlpatterns = [
    # ... 其他URL模式 ...
    path('get-google-drive-credentials/', views.get_google_drive_credentials, name='google_drive_credentials'),
]

<script>
    // 使用XMLHttpRequest发起AJAX请求获取环境变量值
    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function () {
        // 检查请求是否完成且成功
        if (xhr.readyState === XMLHttpRequest.DONE) {
            if (xhr.status === 200) {
                // 解析JSON响应
                var response = JSON.parse(xhr.responseText);

                // 从响应中提取凭证
                var API_KEY = response.api_key;
                var CLIENT_ID = response.client_id;
                var APP_ID = response.app_id;

                // 现在可以使用这些凭证来初始化Google Drive File Picker或其他服务
                console.log('API Key:', API_KEY);
                console.log('Client ID:', CLIENT_ID);
                console.log('App ID:', APP_ID);

                // 例如，初始化Google Drive File Picker
                var SCOPES = 'https://www.googleapis.com/auth/drive';
                // gapi.load('picker', { 'callback': onPickerApiLoad });
                // ... 其他Google API初始化代码 ...

            } else {
                // 处理请求失败的情况
                console.error('Failed to retrieve Google Drive credentials. Status:', xhr.status);
            }
        }
    };
    // 发起GET请求到定义的URL
    xhr.open('GET', '/get-google-drive-credentials/');
    xhr.send();
</script>

<script>
    fetch('/get-google-drive-credentials/')
        .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;

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

            var SCOPES = 'https://www.googleapis.com/auth/drive';
            // ... 使用凭证初始化API ...
        })
        .catch(error => {
            console.error('Failed to retrieve Google Drive credentials:', error);
        });
</script>