Как импортировать в React проект фото с гугл диска?

Для импорта фото с Google Диска в React проект вам понадобится использовать API Google Диска и функциональность React.

1. Создайте проект React, если у вас его еще нет, с помощью команды npx create-react-app my-app. Затем перейдите в папку проекта с помощью команды cd my-app.

2. Установите необходимые зависимости для работы с Google API с помощью команды npm install googleapis.

3. Вам необходимо создать OAuth 2.0 клиентский ключ в Google Cloud Console. Создайте проект (если его нет) и перейдите на страницу "APIs & Services" -> "Credentials". Нажмите на кнопку "Create credentials" и выберите "OAuth client ID". Затем выберите тип "Web application" и введите имя вашего проекта. В поле "Authorized JavaScript origins" укажите URL вашего локального сервера разработки React (например, http://localhost:3000) и нажмите "Create".

4. После создания клиентского ключа вы получите Client ID и Client Secret.

5. Создайте файл googleAPI.js и добавьте в него следующий код:

import { google } from 'googleapis';

const googleAPI = async (photoId) => {
  const oauth2Client = new google.auth.OAuth2(
    'YOUR_CLIENT_ID',
    'YOUR_CLIENT_SECRET',
    'YOUR_REDIRECT_URI'
  );

  oauth2Client.setCredentials({
    access_token: 'YOUR_ACCESS_TOKEN',
    refresh_token: 'YOUR_REFRESH_TOKEN',
    scope: 'https://www.googleapis.com/auth/drive.readonly',
    token_type: 'Bearer',
    expiry_date: 'EXPIRY_DATE',
  });

  const drive = google.drive({ version: 'v3', auth: oauth2Client });

  try {
    const response = await drive.files.get({
      fileId: photoId,
      alt: 'media',
    });

    const photoUrl = response.config.url;

    return photoUrl;
  } catch (error) {
    console.error('Error retrieving photo URL from Google Drive:', error);
  }
};

export default googleAPI;

6. Подставьте значения для YOUR_CLIENT_ID, YOUR_CLIENT_SECRET, YOUR_REDIRECT_URI, YOUR_ACCESS_TOKEN, YOUR_REFRESH_TOKEN и EXPIRY_DATE (если у вас нет access token и refresh token, вам необходимо получить их через аутентификацию OAuth 2.0).

7. В вашем компоненте React, где вы хотите импортировать фото с Google Диска, добавьте следующий код:

import React, { useEffect, useState } from 'react';
import googleAPI from './googleAPI';

const PhotoComponent = () => {
  const [photoUrl, setPhotoUrl] = useState('');

  useEffect(() => {
    const fetchPhotoUrl = async () => {
      const photoId = 'YOUR_PHOTO_ID'; // замените на id вашего фото на Google Диске
      const url = await googleAPI(photoId);
      setPhotoUrl(url);
    };

    fetchPhotoUrl();
  }, []);

  return (
    <div>
      {photoUrl && <img src={photoUrl} alt="Google Drive Photo" />}
    </div>
  );
};

export default PhotoComponent;

8. Замените YOUR_PHOTO_ID на ID вашего фото на Google Диске.

Теперь, когда вы запустите свой React проект, фото с Google Диска будет отображаться на странице компонента PhotoComponent. Обратите внимание, что получение access_token и refresh_token требует аутентификации пользователя, которую вы должны прописать в вашем коде до вызова googleAPI(photoId) или использовать другие способы получения доступа к Google Диску.