JavaScript-Methode zum Erstellen von Kalenderereignissen in React JS mithilfe von Fetch

Question

In einer React JS-Anwendung möchte ich ein Google Kalender-Ereignis erstellen. Ich bin völlig neu in der Google-API und versuche herauszufinden, wie das geht.

Unten finden Sie eine Reaktionstestkomponente, die einen leeren Bildschirm mit einer Schaltfläche „Google-Anmeldung“ und einer Schaltfläche „Zum Kalender hinzufügen“ anzeigt.

Für dieses Beispiel habe ich eine TEST_EVENT-Konstante erstellt.

Benutzer müssen sich zuerst anmelden und dann auf die Schaltfläche „Zum Kalender hinzufügen“ klicken. Ich habe das Zugriffstoken erhalten. Der nächste Schritt besteht darin, das Ereignis zu erstellen. Meine Frage ist: Wie kann ich mit der Fetch-API ein Kalenderereignis erstellen, wenn ich ein access_token habe?

import React, { useEffect, useState } from 'react'
import jwt_decode from "jwt-decode";

const CLIENT_ID = '25262567698-tsaoo718sc35n3k25os074b17jklc5rm.apps.googleusercontent.com';
const SCOPES = 'https://www.googleapis.com/auth/calendar';

const TEST_EVENT = {
    'summary': 'Example Event',
    'location': 'New York, NY',
    'description': 'a description for this',
    'start': {
        'dateTime': '2023-03-26T10:00:00-04:00',
        'timeZone': 'America/New_York',
    },
    'end': {
        'dateTime': '2023-03-26T11:00:00-04:00',
        'timeZone': 'America/New_York',
    },
};

const TestGIS = (props) => {


    const [user, setUser] = useState({});
    const [tokenClient, setTokenClient] = useState({});

    function handleCallbackResponse(response) {
        console.log('encoded JWT ID token:' + response.credential);
        var userObject = jwt_decode(response.credential);
        console.log(userObject)
        setUser(userObject);
        document.getElementById('signInDiv').hidden = true;
    }

    function handleSignOut(event) {
        setUser({});
        document.getElementById('signInDiv').hidden = false;
    }



    useEffect(() => {

        /* global google */
        const google = window.google;
        google.accounts.id.initialize({
            client_id: CLIENT_ID,
            callback: handleCallbackResponse
        })
        google.accounts.id.renderButton(
            document.getElementById('signInDiv'),
            { theme: 'outline', size: 'large' }
        );

        // google.accounts.id.prompt(); // this is added to popup the login dialog when page is first loaded - didn't work

        // Get Access Token
        // create something called a tokenClient
        setTokenClient(
            google.accounts.oauth2.initTokenClient({
                client_id: CLIENT_ID,
                scope: SCOPES,
                callback: (tokenResponse) => {
                    console.log('tokenResponse=', tokenResponse);
                    // we now have access to a live token to use for ANY google API
                    if (tokenResponse && tokenResponse.access_token) {
                        // create the calendar event here

                    }
                }
            })
        );



    }, []);


    function createCalendarEvent() {
        tokenClient.requestAccessToken();
    }




    
    //-----------------------------------------------------------------
    return (

        <div className='main-cover' style={{ backgroundColor: 'lightblue', width: '100%', height: '100%', zIndex: '10000' }}   >

            <div id="signInDiv"></div>
            {Object.keys(user).length != 0 &&
                <button onClick={(e) => handleSignOut(e)}>Sign Out</button>
            }

            {user &&
                <div>
                    <img src={user['picture']}></img>
                    <h3>{user.name}</h3>
                    <button onClick={() => createCalendarEvent()}>Create calendar event</button>
                </div>
            }

        </div>


    )
}
export default TestGIS

Answer 1

感谢我在 youtube 上观看的 3 个由 Coopercodes 制作的视频，我在下面有了一个工作示例。此示例使用隐式流在 Google 日历上创建一个事件。我花了几天时间才让它发挥作用。我希望这对其他人有帮助：

import React, { useEffect, useState } from 'react'
import jwt_decode from "jwt-decode";

const CLIENT_ID = '25262567698-tsaoo718sc35n3k25os074b17jklc5rm.apps.googleusercontent.com';
const SCOPES = 'https://www.googleapis.com/auth/calendar';

const TEST_EVENT = {
    'summary': 'Example Event',
    'location': 'New York, NY',
    'description': 'a description for this',
    'start': {
        'dateTime': '2023-03-26T10:00:00-04:00',
        'timeZone': 'America/New_York',
    },
    'end': {
        'dateTime': '2023-03-26T11:00:00-04:00',
        'timeZone': 'America/New_York',
    },
};

const TestGIS = (props) => {


    const [user, setUser] = useState({});
    const [tokenClient, setTokenClient] = useState({});

    function handleCallbackResponse(response) {
        console.log('encoded JWT ID token:' + response.credential);
        var userObject = jwt_decode(response.credential);
        console.log(userObject)
        setUser(userObject);
        document.getElementById('signInDiv').hidden = true;
    }

    function handleSignOut(event) {
        setUser({});
        document.getElementById('signInDiv').hidden = false;
    }

    useEffect(() => {

        /* global google */
        const google = window.google;
        google.accounts.id.initialize({
            client_id: CLIENT_ID,
            callback: handleCallbackResponse
        })
        google.accounts.id.renderButton(
            document.getElementById('signInDiv'),
            { theme: 'outline', size: 'large' }
        );


        // Get Access Token
        // create something called a tokenClient
        setTokenClient(
            google.accounts.oauth2.initTokenClient({
                client_id: CLIENT_ID,
                scope: SCOPES,
                callback: (tokenResponse) => {
                    console.log('tokenResponse=', tokenResponse);
                    // we now have access to a live token to use for ANY google API
                    if (tokenResponse && tokenResponse.access_token) {
                        // create the calendar event here

                        fetch ('https://www.googleapis.com/calendar/v3/calendars/primary/events',{
                            method: 'POST',
                            headers: {
                                'Authorization':'Bearer '+tokenResponse.access_token
                            },
                            body:JSON.stringify(TEST_EVENT)
                        }).then((data) => {
                            return data.json();
                        }).then((data) => {
                            console.log(data);
                            alert('event created check google calendar')
                        })  

                    }
                }
            })
        );



    }, []);


    function createCalendarEvent() {
        tokenClient.requestAccessToken();
    }




    //---------------------------------------------------------

   
    return (

        


            

            {Object.keys(user).length != 0 &&
                 handleSignOut(e)}>Sign Out
            }

            {user &&
                

                    
                    
{user.name}
                     createCalendarEvent()}>Create calendar event
                
            }

        


    )
}
export default TestGIS