How can i use, if my laravel project is an RestAPI

[thamibn]

I have a SPA in vuejs on another server which has ckeditor and ckfinder hook up together for frontend users to upload images. and i also have a RestAPI in laravel how can i use the RestAPI as connector only no frontend nothing with this package.

looking for something like this when user upload images domain.com/api/ckfinder/upload...... how can i achieve this with this package?

[tarzanking]

Does anyone have a solution? I am looking for this also but face the cors problem even my cors has been set

[d4rkr3pt0r]

Yes. I'm already using this package with nuxt.js. You should make a middleware to attach Authorization parameter into laravel's headers. Save it as BodyAuthenticate.php inside app\Http\Middleware\ folder :

<?php

namespace App\Http\Middleware;

use Closure;
use Illuminate\Support\Facades\Auth;

class BodyAuthenticate
{
    /**
     * Handle an incoming request.
     *
     * @param  \Illuminate\Http\Request $request
     * @param  \Closure                 $next
     * @param  string|null              $guard
     *
     * @return mixed
     */
    public function handle($request, Closure $next, $guard = null)
    {
        if (!Auth::guard($guard)->check()) {
            $request->headers->add([
                'Authorization' => $request->Authorization
            ]);
        }

        return $next($request);
    }
}

In the next step add it to $routeMiddleware inside app\Http\Kernel.php :

    protected $routeMiddleware = [
        'auth.body' => \App\Http\Middleware\BodyAuthenticate::class,
        // The rest ...
    ];

Now you should register your CKFinder API routes and assign the middlewares:

Route::group(['middleware' => 'auth.body', 'auth:api'], function () { // here we are using both `auth:api` and `auth.body` because we need to authenticate user as well
    Route::any('/ckfinder/connector', '\CKSource\CKFinderBridge\Controller\CKFinderController@requestAction')
    ->name('ckfinder_connector');
    Route::any('/ckfinder/browser', '\CKSource\CKFinderBridge\Controller\CKFinderController@browserAction')
    ->name('ckfinder_browser');
});

That was all we need in our backend. In your vuejs app add the Authorization parameter inside editorConfig:

            editorConfig: {
                toolbar: [
                    'ckfinder', '|', 'heading', '|', 'fontFamily', 'fontSize', '|', 'bold',
                    'italic',
                    'blockQuote', 'imageStyle:full', 'link',
                    'alignment', 'numberedList', 'bulletedList', 'insertTable',
                    'mergeTableCells', 'undo', 'redo'
                ],
                language: 'en',
                ckfinder: {
                    uploadUrl: 'api/ckfinder/connector?command=QuickUpload&type=Images&responseType=json',
                    options: {
                        resourceType: 'Images',
                        connectorPath:'http://localhost:8000/api/ckfinder/connector',
                        pass: 'Authorization', // Here we say pass 'Authorization' as a parameter which is assigned in the next line
                        Authorization: this.$auth.$storage._state['_token.password_grant'],
                    }
                },
            },

As you may use Modal mode somewhere, this would be the config again :

        openModal() {
            CKFinder.modal( {
                connectorPath:'http://localhost:8000/api/ckfinder/connector',
                pass: 'Authorization',
                language: 'fa',
                Authorization: this.$auth.$storage._state['_token.password_grant'],
                chooseFiles: true,
                width: 800,
                height: 600,
                onInit: ( finder ) => {
                    finder.on( 'files:choose',  ( evt ) => {
                        var file = evt.data.files.first();
                        this.post.thumbnail = file.getUrl();
                    } );

                    finder.on( 'file:choose:resizedImage', ( evt ) => {
                        this.post.thumbnail = evt.data.resizedUrl;
                    } );
                }
            } );
        },

Don't forget to change $config['authentication'] in CKFinder config file if you didn't yet : $config['authentication'] = '\App\Http\Middleware\CustomCKFinderAuth';

And finally here is CustomCKFinderAuth.php middleware :

<?php

namespace App\Http\Middleware;

use Closure;
use Illuminate\Http\Request;
use App\Models\User;
use Illuminate\Support\Facades\Auth;

class CustomCKFinderAuth
{
    /**
     * Handle an incoming request.
     *
     * @param  \Illuminate\Http\Request  $request
     * @param  \Closure  $next
     * @return mixed
     */
    public function handle(Request $request, Closure $next)
    {
        config(['ckfinder.authentication' => function() {
            if(auth('api')->user()) {
                return true;
            } else {
                return false;
            }
        }]);
        return $next($request);
    }
}