Überblick
In diesem Tutorial lernen Sie, wie Sie eine cookie-basierte Authentifizierung mit Rails 8 implementieren. Rails bietet viele Authentifizierungsmethoden, aber Cookies sind sicher, einfach zu bedienen und werden von Browsern automatisch verarbeitet.
Während viele Tutorials JWT verwenden, hat dies einen großen Nachteil: Wo speichert man es? Local Storage ist unsicher. Wenn Ihr primärer API-Konsument der Browser ist, ist die cookie-basierte Authentifizierung sicherer und einfacher.
Voraussetzungen
- Ruby (v3.1+)
- Rails 8
- PostgreSQL
- Node.js und npm/yarn
- React 18+
- Vite
Neue Rails-API-App mit PostgreSQL erstellen
rails new my-api --api -d=postgresql
PostgreSQL-Datenbankverbindung einrichten
config/database.yml bearbeiten:
development:
<<: *default
database: my_api_development
username: <%= ENV.fetch("DB_USER") %>
password: <%= ENV.fetch("DB_PASSWORD") %>
User-Modell und Controller generieren
rails generate model User username:string email:string password_digest:string
rails generate controller Users
has_secure_password zum User-Modell hinzufügen
class User < ApplicationRecord
has_secure_password
validates :email, presence: true, uniqueness: true
normalizes :email, with: -> e { e.strip.downcase }
end
Middleware-Setup für Session-Cookies
In config/application.rb:
config.middleware.use ActionController::Cookies
config.middleware.use ActionDispatch::Session::CookieStore, key: '_my_api_session', expire_after: 5.years
Authentifizierungs-Helper im ApplicationController
class ApplicationController < ActionController::API
before_action :authenticate_user
private
def authenticate_user
render json: { error: "Nicht autorisiert" }, status: :unauthorized unless current_user
end
def current_user
@current_user ||= User.find_by(id: session[:user_id])
end
end
Neues React-Projekt mit Vite einrichten
npm create vite@latest my-react-app -- --template react-ts
React Frontend Proxy Konfiguration
In vite.config.ts:
export default defineConfig({
plugins: [react()],
server: {
proxy: {
'/api': {
target: 'http://localhost:3000',
changeOrigin: true,
secure: false,
},
},
},
})
Fazit
Sie haben gelernt, wie man eine cookie-basierte Authentifizierung implementiert – die stabilste Methode für browserbasierte Apps. Aber die Sicherheit hört hier nicht auf: