使用Backbone + Slim + Tuupola基本身份验证时未经授权的错误

Question

I’m trying to connect my Backbone app with my server api (using Slim) and I’m using Tuppola / Basic Auth Middleware.

The example is very simple, I’m just trying to get it work. I can achieve this in my server acting directly in the browser. I get the popup window, type the user and password and I get the data.

However when I try to do the same thing using my Backbone app I get all the time the same 401 Unauthorized error. This is my php code. As I said, works fine when using the browser directly.

My class Container

$container["auth"] = function ()
{
    return new \Slim\Middleware\HttpBasicAuthentication([
        "path" => "/app_rutas",
        "realm" => "Protected",
        "users" => [
            "test" => "123",
        ],
        "environment" => "REDIRECT_HTTP_AUTHORIZATION"
    ]);
};

My class Routes

class Routes
{
    public static function callbacks($app)
    {
        $app->add(                                       \Controller::class . ':middleware');
        $app->add('auth');
        $app->get('/app_rutas/clients',                  \ClientController::class . ':selectAllClients');
        $app->get('/app_rutas/client/{type}/{values}',   \ClientController::class . ':selectClient');
        $app->put('/app_rutas/client',                   \ClientController::class . ':newClient');
    }
}

And this is my js code where I suppose the problem is that I'm not being able to pass correctly the params to the middleware. I've tried many ways a none works. I thought this should be the one it isn't.

fetchData() {
    if (!_.isEmpty(this.clients_id)) {
        this.url = this.apiUrl('client', this.clients_id);

        this.fetch({ headers: {'Authorization':'Basic test:123'} });
    }
},

Thanks for all comments in advance.

Answer 1

This was the correct way to pass the username:password using Backbone:

this.fetch({ headers: {'Authorization':'Basic ' + btoa('test:123')} })

Needed a base64 encode function. Now it finally works.