PHP Framework
Laravel
Laravel development: How to implement SPA and API authentication using Laravel Sanctum?
Laravel development: How to implement SPA and API authentication using Laravel Sanctum?
Laravel Sanctum is a lightweight authentication package that allows you to easily implement API authentication and SPA (Single Page Application) authentication in Laravel applications. In this article, we will explore how to use Laravel Sanctum to implement SPA and API authentication.
First, let’s take a look at what SPA and API authentication are.
SPA certification refers to a single-page application that does not reload the entire page, but uses AJAX to request information from the web server to update partial content. When using SPA, APIs need to be authenticated to ensure that only authenticated users can access them.
API authentication refers to the API request authentication process. When a client sends a request, the API needs to verify that the request is from the expected user, thereby ensuring that the API endpoint is only used by authenticated users.
Here are the steps on how to use Laravel Sanctum to implement SPA and API authentication:
1. Install Laravel Sanctum
We can use the composer package manager to install Laravel Sanctum. Run the following command in the Laravel project:
composer require laravel/sanctum
2. Run the Laravel Sanctum installer
Laravel Sanctum provides an installer that can automatically configure our application during installation. We can run this installer using the following command:
php artisan vendor:publish --provider="LaravelSanctumSanctumServiceProvider"
3. Run migration
We need to run Sanctum migration to create the necessary database tables to support Sanctum operations. Run the following command:
php artisan migrate
4. Configure the application
We need to add Laravel Sanctum to our middleware stack:
'api' => [
'middleware' => ['auth:sanctum'],
'throttle:60,1',
'prefix' => 'api',
'namespace' => 'AppHttpControllersAPI',
],5. Issue authentication tokens to users
In Laravel Sanctum, we can use the tokenCan method to check whether a token has specific API permissions. We can issue an authentication token to the user using the createToken method:
use IlluminateHttpRequest;
/**
* Store a newly created resource in storage.
*
* @param IlluminateHttpRequest $request
* @return IlluminateHttpResponse
*/
public function store(Request $request)
{
$user = User::find(1);
$token = $user->createToken('token-name', ['server:update'])->plainTextToken;
return response()->json([
'access_token' => $token,
'token_type' => 'Bearer',
]);
}This will create a token named 'token-name' for the user, which has server:update permissions.
6. Protect API endpoints
In our controller, we can use the "middleware" method to protect API endpoints:
public function update(Request $request, $id)
{
if (!$request->user()->tokenCan('server:update')) {
abort(403, 'Unauthorized');
}
// Update the server
}In this example, we only allow those with Users with server:update permissions access the update method.
7. Using authentication tokens in SPA
In our SPA, we can use Sanctum’s @auth and @csrf Blade instructions to obtain the authentication token:
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Laravel</title>
<!-- Fonts -->
<link href="https://fonts.googleapis.com/css?family=Nunito:200,600" rel="stylesheet">
<script src="{{ asset('js/app.js') }}" defer></script>
<!-- Styles -->
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
<!-- Meta -->
<meta name="csrf-token" content="{{ csrf_token() }}">
</head>
<body>
<div id="app">
<nav class="navbar navbar-expand-md navbar-light bg-white shadow-sm">
<div class="container-fluid">
<a class="navbar-brand" href="{{ url('/') }}">
{{ config('app.name', 'Laravel') }}
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="{{ __('Toggle navigation') }}">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<!-- Left Side Of Navbar -->
<ul class="navbar-nav mr-auto">
</ul>
<!-- Right Side Of Navbar -->
<ul class="navbar-nav ml-auto">
<!-- Authentication Links -->
@guest
<li class="nav-item">
<a class="nav-link" href="{{ route('login') }}">{{ __('Login') }}</a>
</li>
@if (Route::has('register'))
<li class="nav-item">
<a class="nav-link" href="{{ route('register') }}">{{ __('Register') }}</a>
</li>
@endif
@else
<li class="nav-item dropdown">
<a id="navbarDropdown" class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" v-pre>
{{ Auth::user()->name }}
</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="{{ route('logout') }}"
onclick="event.preventDefault();
document.getElementById('logout-form').submit();">
{{ __('Logout') }}
</a>
<form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;">
@csrf
</form>
</div>
</li>
@endguest
</ul>
</div>
</div>
</nav>
<main class="py-4">
@yield('content')
</main>
</div>
@auth
<script>
window.Laravel = {!! json_encode([
'csrf_token' => csrf_token(),
'api_token' => Auth::user()->api_token
]) !!};
</script>
@endauth
</body>In this example, we use Sanctum's @auth and @csrf Blade directives to obtain user authentication tokens and CSRF tokens.
That’s all about how to implement SPA and API authentication using Laravel Sanctum. Using Laravel Sanctum makes it easy to secure our API endpoints and SPA applications and helps us implement best security practices.
The above is the detailed content of Laravel development: How to implement SPA and API authentication using Laravel Sanctum?. For more information, please follow other related articles on the PHP Chinese website!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
1386
52
Laravel - Artisan Commands
Aug 27, 2024 am 10:51 AM
Laravel - Artisan Commands - Laravel 5.7 comes with new way of treating and testing new commands. It includes a new feature of testing artisan commands and the demonstration is mentioned below ?
Laravel - Pagination Customizations
Aug 27, 2024 am 10:51 AM
Laravel - Pagination Customizations - Laravel includes a feature of pagination which helps a user or a developer to include a pagination feature. Laravel paginator is integrated with the query builder and Eloquent ORM. The paginate method automatical
How to get the return code when email sending fails in Laravel?
Apr 01, 2025 pm 02:45 PM
Method for obtaining the return code when Laravel email sending fails. When using Laravel to develop applications, you often encounter situations where you need to send verification codes. And in reality...
Laravel schedule task is not executed: What should I do if the task is not running after schedule: run command?
Mar 31, 2025 pm 11:24 PM
Laravel schedule task run unresponsive troubleshooting When using Laravel's schedule task scheduling, many developers will encounter this problem: schedule:run...
In Laravel, how to deal with the situation where verification codes are failed to be sent by email?
Mar 31, 2025 pm 11:48 PM
The method of handling Laravel's email failure to send verification code is to use Laravel...
How to implement the custom table function of clicking to add data in dcat admin?
Apr 01, 2025 am 07:09 AM
How to implement the table function of custom click to add data in dcatadmin (laravel-admin) When using dcat...
Laravel - Dump Server
Aug 27, 2024 am 10:51 AM
Laravel - Dump Server - Laravel dump server comes with the version of Laravel 5.7. The previous versions do not include any dump server. Dump server will be a development dependency in laravel/laravel composer file.
Laravel Redis connection sharing: Why does the select method affect other connections?
Apr 01, 2025 am 07:45 AM
The impact of sharing of Redis connections in Laravel framework and select methods When using Laravel framework and Redis, developers may encounter a problem: through configuration...
