React JS 애플리케이션에서 Google 캘린더 이벤트를 만들고 싶습니다. 저는 Google API를 처음 접했고 이 작업을 수행하는 방법을 배우거나 알아내려고 노력하고 있습니다.
아래는 "Google 로그인" 버튼과 "캘린더에 추가" 버튼이 있는 빈 화면을 표시하는 반응 테스트 구성 요소입니다.
이 예에서는 TEST_EVENT 상수를 만들었습니다.
사용자는 먼저 로그인한 후 "캘린더에 추가" 버튼을 클릭해야 합니다. 액세스 토큰을 얻었습니다. 다음 단계는 이벤트를 생성하는 것입니다. 제 질문은 access_token이 있는 경우 fetch API를 사용하여 캘린더 이벤트를 어떻게 만들 수 있느냐는 것입니다.
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
P粉4706452222024-03-28 00:54:40
Coopercodes에서 제작한 YouTube 동영상 3개 덕분에 아래에 실제 예제가 있습니다. 이 예에서는 암시적 흐름을 사용하여 Google 캘린더에 이벤트를 만듭니다. 작동시키는 데 며칠이 걸렸습니다. 이것이 다른 사람들에게 도움이 되기를 바랍니다:
으아악