Jednoduché API ve frameworku Slim 4 – č. 14 Úpravy API pro přístup z Vue aplikace preflight request a token v hlavičce
- Jednoduché API ve frameworku Slim 4 – č. 1 Instalace
- Jednoduché API ve frameworku Slim 4 – č. 2 Základní CRUD
- Jednoduché API ve frameworku Slim 4 – č. 3 Struktura API a připojení k databázi
- Jednoduché API ve frameworku Slim 4 – č. 4 Testování funkcionality našeho malého API
- Jednoduché API ve frameworku Slim 4 – č. 5 Vylepšení UserControlleru
- Jednoduché API ve frameworku Slim 4 – č. 6 Přidání Model a Repositories
- Jednoduché API ve frameworku Slim 4 – č. 7 Validace dat
- Jednoduché API ve frameworku Slim 4 – č. 8 Přidáme si do datbáze produkty
- Jednoduché API ve frameworku Slim 4 – č. 9 Přidání zboží uživatelům
- Jednoduché API ve frameworku Slim 4 – č. 10 Autentizace uživatele
- Jednoduché API ve frameworku Slim 4 – č. 11 Endpointy pouze pro přihlášené uživatele
- Jednoduché API ve frameworku Slim 4 – č. 12 Testování našeho API
- Jednoduché API ve frameworku Slim 4 – č. 13 Úpravy API pro přístup z Vue aplikace
- Jednoduché API ve frameworku Slim 4 – č. 14 Úpravy API pro přístup z Vue aplikace preflight request a token v hlavičce
V minulém díle jsme si do našeho API přidali CORS pro přístup k našemu API z jiné domény. Ale protože budu chtít naše APi používat z jiné domény v aplikaci běžící na Vue je je ětě potřeba vyřešit tzv. předběžné požadavaky (preflight request) kdy naše Vue aplikace bude zjišťovat OPTIONS požadavkem, zda jsou povoeleny speciální akce. Další věc, kterou si zároveň upravím bude kontrola autentizace nejem pomocí cookie , ale také pomocí speciální hlavičky AUTHTOKEN, aby se mi s tím lépe pracovalo ve Vue.Takže upravíme si config/cors.php
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<?php return [ 'settings' => [ 'origin' => ['http://localhost:5173'], // URL vaší Vue aplikace 'methods' => ['GET', 'POST', 'PUT', 'DELETE', 'PATCH', 'OPTIONS'], 'headers' => [ 'Content-Type', 'Accept', 'Origin', 'Authorization', 'X-Requested-With', 'Access-Control-Request-Method', 'Access-Control-Request-Headers' ] ] ]; |
a CorsMiddleware na
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 |
<?php namespace App\Middleware; use Psr\Http\Message\ResponseInterface as Response; use Psr\Http\Message\ServerRequestInterface as Request; use Psr\Http\Server\MiddlewareInterface; use Psr\Http\Server\RequestHandlerInterface as RequestHandler; use Slim\Psr7\Response as Psr7Response; class CorsMiddleware implements MiddlewareInterface { private array $settings; public function __construct(array $settings) { $this->settings = $settings; } public function process(Request $request, RequestHandler $handler): Response { // Předběžné zpracování OPTIONS požadavku if ($request->getMethod() === 'OPTIONS') { $response = new Psr7Response(); } else { $response = $handler->handle($request); } $origin = $request->getHeaderLine('Origin'); if (empty($origin)) { $origin = $this->settings['origin'][0]; } return $response ->withHeader('Access-Control-Allow-Origin', $origin) ->withHeader('Access-Control-Allow-Methods', implode(', ', $this->settings['methods'])) ->withHeader('Access-Control-Allow-Headers', implode(', ', $this->settings['headers'])) ->withHeader('Access-Control-Allow-Credentials', 'true') ->withHeader('Access-Control-Max-Age', '86400'); // 24 hodin cache pro preflight } } |
Do AuthMiddleware si přidáme funkci
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
private function getTokenFromRequest(Request $request): ?string { $serverParams = $request->getServerParams(); if (isset($serverParams['HTTP_AUTHTOKEN']) && strlen($serverParams['HTTP_AUTHTOKEN']) > 0) { return $serverParams['HTTP_AUTHTOKEN']; } if (isset($request->getCookieParams()['auth_token']) && strlen($request->getCookieParams()['auth_token']) > 0) { return $request->getCookieParams()['auth_token']; } return null; } |
a v ve funkci process si upravíme získání tokebu na
|
1 |
$authToken = $this->getTokenFromRequest($request); |