Файловый менеджер в Laravel на Dropbox ч.1

Я начинаю цикл статей, в которых буду с нуля, создавать Dropbox файловый менеджер на Laravel. В первой части я начну создание проекта и добавлю первый функционал — чтение/запись файлов в Dropbox…

Вместо вступления

Чтобы не пропустить все важные статьи, советую подписаться на мой блог (форма справа в сайдбаре или после статьи). Также, я рассчитываю на ваши донаты в конце публикации. Поскольку этот цикл статей я пишу на чистом энтузиазме, ради идеи и помощи другим людям. Также, эти статьи (как в принципе и другие, связанные с Laravel тут, тут и тут) не рассчитаны на новичков, поэтому я позволяю себе очень свободно выражаться тех. языком и оборотами. Однако, со всеми вопросами, прошу в комментарии, если таковые возникнут у вас. Буду стараться всем помочь по возможности. Также не забываем делиться записью в соц. сетях. Итак, теперь приступаем.

Регистрация приложения

Прежде чем писать код, мы должны зарегистрировать наше приложение в Dropbox по этому адресу. Переходим и выполняем следующие действия:

  1. Выбираем Dropbox API;
  2. Для типа доступа выбираем «Полноценное приложение» (Full App);
  3. Вводим имя приложения;
  4. Выбираем аккаунт для создания приложения (вы можете выбрать только одну опцию);
  5. Кликаем по кнопке «Создать приложение» (Create App).

Теперь, вы имеете зарегистрированное приложение, но есть еще несколько обязательных настроек. Пожалуйста обратите внимание на:

  1. Публичный ключ приложения (App key);
  2. Секретный ключ (App secret)

Эти два ключа обязательно будут нужны в Laravel. Существует два варианта для нашей интеграции: либо использовать приложение вместе с вашим публичным аккаунтом или предоставить пользователям доступ к своей учетной записи Dropbox. Ниже, я разберу два варианта:

Используете только свой публичный аккаунт (вариант 1)

Это более простой вариант, т.к все что вам нужно сделать, это нажать «Создать токен доступа» (Generate Access Token), скопировать и вставить код в файл .env:

DROPBOX_ACCESS_TOKEN=

Это означает, что вы сможете использовать только свою учетную запись для интеграции.

Разрешить пользователям доступ к своей учетной записи (вариант 2)

Этот способ подразумевает, что вы должны позволить пользователям подключаться к своей учетной записи с помощью Oauth2. Это означает, что пользователь переходит на URL-адрес, а затем перенаправляется в Dropbox, чтобы подтвердить подключение после завершения получения токена доступа для сохранения авторизации пользователя. Токен может быть отклонен в любое время напрямую из Dropbox.

Установка пакета Dropbox Laravel

Откройте проект Laravel (новый или существующий), и давайте установим пакет Dropbox Laravel, который можно скачать по ссылке. Устанавливаем его через composer:

composer require daveismyname/laravel-dropbox

В Laravel 5.5 версиях providers будут автоматически регистрироваться. В более ранних версиях фреймворка просто добавьте провайдер в config/app.php файл:

'providers' => [
    // ...
    Daveismyname\Dropbox\DropboxServiceProvider::class,
];

Вы можете объявить config файл через следующую команду:

php artisan vendor:publish --provider="Daveismyname\Dropbox\DropboxServiceProvider" --tag="config"

Объявить миграцию через команду (это необходимо для хранения токена доступа):

php artisan vendor:publish --provider="Daveismyname\Dropbox\DropboxServiceProvider" --tag="migrations"

После миграции, можно создать таблицы токенов запустив собственно саму миграцию:

php artisan migrate

Также, убедитесь, что в файле .env объявлен следующий код:

DROPBOX_CLIENT_ID=
DROPBOX_SECRET_ID=
DROPBOX_OAUTH_URL=https://domain.com/filemanager/oauth
DROPBOX_LANDING_URL=https://domain.com/filemanager

При необходимости измените приведенные выше URL-адреса. Я предпочитаю использовать domain.com/filemanager в качестве URL-адреса моего проекта. Вам также советую использовать его, чтобы в дальнейшем не возникло ошибок и расхождения с моим кодом.

Используем Oauth2 для подключения к учетной записи пользователя в Dropbox

Обратите внимание, что у вас уже должна быть настройка аутентификации в Laravel и вы должны войти в систему см. https://laravel.com/docs/5.8/authentication

Вернитесь в консоль Dropbox приложения

В ней необходимо настроить URL перенаправления. Просто перейдите в раздел Redirect URI и добавьте этот URL:

https://domain.com/filemanager/oauth

Это подскажет Dropbox, куда необходимо перенаправить.

Вернитесь обратно к Laravel

Чтобы начать интеграцию, нам нужен маршрут, который будет перенаправлять на Dropbox, чтобы запустить процесс Oauth2. В маршрутах /web.php просто добавьте:

Route::get('filemanager/oauth', function(){
    return Dropbox::connect();
});

Теперь переходим по пути /filemanager/ oauth в браузере и после перехода вас перенаправит в Dropbox.

Поскольку приложение на Dropbox еще не было опубликовано, вы увидите это предупреждение:

Нажимаем «Продолжить» и видим следующий экран:

Выберите учетную запись для подключения. Затем вы будете перенаправлены на URL, указанный в вашем файле .env:

DROPBOX_LANDING_URL=https://domain.com/filemanager

Этот маршрут еще не был настроен и все маршруты на этом этапе должны быть доступны только после проверки подлинности через Dropbox. Поэтому в пакете Laravel Dropbox есть простой способ позаботиться об этом:

Route::group(['middleware' => ['auth', 'DropboxAuthenticated']], function() {
    Route::get('filemanager/{path?}', 'FileManagerController@index')->where('path', '(.*)');
});

В этом замыкании используется промежуточное программное обеспечение DropboxAuthenticated, которое гарантирует, что вы подключены к Dropbox, в противном случае вы будете перенаправлены на авторизацию.

Далее определяется новый маршрут filemanager/{path?}. Это маршрут, означает, что он будет отвечать не только на «строгий» URL /filemanager, но и на пути, выходящие за пределы, например /filemanager/foldername

Создайте новый контроллер с именем FileManagerController:

<?php

namespace App\Http\Controllers;

use Daveismyname\Dropbox\Facades\Dropbox;
use Exception;

class FileManagerController extends Controller
{
    public function index($path = '')
    {
        $results = Dropbox::files()->listContents($path);

        return view('filemanager.index', compact('results'));
    }
}

Внутри контроллера мы можем получить доступ к списку папок и файлов по заданному пути, вызвав:

Dropbox::files()->listContents($path)

Переменная $path приходит непосредственно из маршрута.

Передайте это во view с именем filemanager/index.blade.php и добавьте:

@extends('layouts.app')

@section('content')

<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-8">

            <table class="table">
            @foreach($results['entries'] as $row)

                @php
                $type = $row['.tag'] == 'folder' ? 'folder' : 'file';
                $name = $row['name'];
                $pathLower = $row['path_lower'];
                @endphp

                <tr>
                    <td>
                    @if ($type == 'folder')
                        <a href='{{ url('filemanager'.$pathLower) }}'><i class="fa fa-folder"></i> {{ $name }}</a><br>
                    @else
                        {{ $name }}
                    @endif
                    </td>
                </tr>

            @endforeach
            </table>

        </div>
    </div>
</div>

@endsection

Этот код формирует скелет, который выведет файловый менеджер Laravel, поэтому давайте быстренько пройдемся по его коду.

Итак, мы перебираем файлы и папки, делая цикл foreach для $results ['records']

Внутри данных, есть атрибут с именем .tag, это будет файл или папка, который/-ую присваиваем к переменной $type

$type = $row['.tag'] == 'folder' ? 'folder' : 'file';

Мы также хотим получить имя файла/папки и его путь:

$name = $row['name'];
$pathLower = $row['path_lower'];

Выводим список файлов/папок. Если в ходе вывода попадается папка, то выводим ссылку на нее, в противном случае выводим просто имя.

@if ($type == 'folder')
    <a href='{{ url('filemanager'.$pathLower) }}'><i class="fa fa-folder"></i> {{ $name }}</a><br>
@else
    {{ $name }}
@endif

Благодаря маршруту для filemanager/{path?) мы можем получить доступ к любой папке, перейдя в /filemanager/foldername, пока путь к папке существует в учетной записи dropbox, и ее содержимое будет отображаться.

В следующей части, я добавлю возможность вывода хлебных крошек, чтобы можно было переходить по разным уровням вложенности.

Подписаться на новые статьи