在 React-app 前端使用 Google 日歷

Question

我知道這個問題與現有代碼並不完全相關，但我希望能夠在我的 React 項目中集成 Google Calendar API。 我想知道是否可以在沒有后端的情況下直接在 React 應用程序中集成這個谷歌日歷？ 例如，我希望能夠讓人們有機會從網站預訂會議。 當他們預訂會議時，我希望能夠在我的 Google 帳戶日歷中看到它。 這是可能的還是他們必須使用他們的帳戶登錄並在我的日歷中預訂或它是如何工作的？ 我找到了關於這個的谷歌文檔：

https://developers.google.com/calendar/quickstart/js

但我不確定我想要的是否可能。 我還注冊了我的 API 密鑰並獲得了我的客戶 ID：

const CALENDAR_ID ="XXXXXXXXXXXXXXXX.apps.googleusercontent.com";
const API_KEY = "XXXXXXXXXXXXXXXXX";
let url = `https://www.googleapis.com/calendar/v3/calendars/${CALENDAR_ID}/events?key=${API_KEY}`;

但是當我嘗試在 POSTMAN 中執行調用時，我得到：

{
    "error": {
        "code": 401,
        "message": "Request is missing required authentication credential. Expected OAuth 2 access token, login cookie or other valid authentication credential. See https://developers.google.com/identity/sign-in/web/devconsole-project.",
        "errors": [
            {
                "message": "Login Required.",
                "domain": "global",
                "reason": "required",
                "location": "Authorization",
                "locationType": "header"
            }
        ],
        "status": "UNAUTHENTICATED"
    }
}

所以也許我做錯了。 所以有人做過這樣的事情並且可以幫助我嗎？ 我真的很感激，謝謝！

Answer 1

您的 API 密鑰或客戶端 ID 將允許您的應用程序征求用戶同意以獲取訪問令牌並能夠使用請求的 API。 在您的情況下，由於您想將人員（受邀者）添加到您的日歷中，因此應該征求您的同意。

您可以看到，允許您的應用程序代表您向日歷 API 發出請求的唯一方法是讓應用程序訪問您的訪問或刷新令牌，這在前端是不安全的。