Teilen Sie:
){kind=small}
Als ausgebildeter Schauspieler mit einer Dissertation in Standup-Comedy bin ich über die Meetup-Szene zur PHP-Entwicklung gekommen. Man findet mich, wenn ich über Technik spreche oder schreibe, oder wenn ich seltsame Platten aus meiner Vinylsammlung spiele oder kaufe.
Integration der stillen Authentifizierung von Vonage in Laravel
Lesedauer: 6 Minuten
Die stille Authentifizierung macht ein Einmalpasswort (One-Time Password, OTP) bei der Zwei-Faktor-Authentifizierung überflüssig, indem sie eine Telefonnummer des Geräts sendet und deren Echtheit überprüft (wenn Sie wissen wollen, wie", lautet die einfache Antwort Magie", und die eigentliche Antwort finden Sie in dieser Aufschlüsselung der Funktionsweise von Netzwerk-APIs).
So, unsere Demo-App wird Laravel verwenden, um eine Anmeldung für einen realen Benutzer Ihrer Anwendung mit der stillen Authentifizierung von Vonage in Verify zu versuchen. Befindet sich die Telefonnummer nicht in einem unterstützten Gebiet oder in einem nicht unterstützten Netz, wird standardmäßig auf SMS zurückgegriffen.
Die Geschwindigkeit, mit der Laravel-Code geschrieben wird, macht das Framework zu einer idealen Wahl, um zu zeigen, wie dieses Autorisierungssystem in der Praxis funktioniert. Es ist keine Überraschung, dass Laravel, als Unternehmen, gerade 57 Millionen Dollar an Series-A-Finanzierung bekannt gegeben hat zur gleichen Zeit, in der Laravel's Cloud SaaS Profil angekündigt wurde.
Ein großes Problem bei Frameworks für Webanwendungsentwickler in allen Sprachen und Geschmacksrichtungen ist, was als Boilerplate enthalten ist. Bei Node beispielsweise gibt es Tausende von Frameworks und Bibliotheken - und deshalb besteht die De-facto-Methode für die Erstellung einer Anwendung darin, jedes einzelne Element Ihrer Anwendung auszuwählen und miteinander zu verkabeln. Während viele Node-Entwickler nicken werden, dass das ist die Art, wie wir es machengibt es einige (Disclaimer: ich), die nicht an diese Arbeitsweise gewöhnt sind, weil wir Dinge haben wie...
...die Ihnen alles bietet, was Sie für den Einstieg in ein Autorisierungssystem benötigen. Hier sind einige Funktionen:
Migrationen für die Tabelle der Benutzer, die für die Datenbank ausgeführt werden sollen
Vorlagen für die Registrierung eines neuen Benutzers in Ihrer Anwendung, die als offene Route beginnen, die Sie aber später bei Bedarf schützen können
Ein für Sie vorgefertigtes Auslösesystem für vergessene Passwörter
Vorgefertigte Login-Formulare
Eine Vielzahl von CLI-Optionen, wie dieses Front-End funktionieren soll. Blade Vorlagen mit Alpine.js, Livewire, oder einer SPA wie Vue.js oder React
Der Zweck dieses Artikels ist es nicht, Ihnen zu zeigen, wie man es installiert oder die Teile zu erklären, die es miteinander verdrahtet, sondern das anzupassen, was Breeze tut. Ein Argument gegen diese Art von Rapid Prototyping lautet: "Aber das, was herauskommt, ist doch alles im Laravel-Styling". Aber es ist die Boilerplate, auf die es ankommt: Um diesen Code zu Ihrem eigenen zu machen, müssen Sie nur ändern, wie die Controller arbeiten und welche Vorlagen/Routen sie ausgeben. Abgesehen davon, wenn Sie Tailwind wirklich hassenhassen, können Sie es in etwa 30 Sekunden loswerden.
Warum also nicht die Silent Authentication API in den Anmeldemechanismus integrieren, wenn all dies bereits im Lieferumfang enthalten ist? Und genau das, lieber Leser, habe ich getan.
Um dies zu testen, benötigen Sie Folgendes:
PHP 8.1 oder höher (bitte, Leute, stellt sicher, dass ihr auf dem neuesten Stand seid!)
Docker und Docker-Compose
Komponist
Ein Localhost-Proxy, wie ngrok oder Expose
Um mit dem Code loszulegen, klonen Sie das Repository:
git clone https://github.com/Vonage-Community/sample-verify2_sms_silent_auth-laravelUnd installieren Sie dann die Abhängigkeiten des Projekts:
composer installSie benötigen eine Umgebungsdatei, also kopieren Sie das mitgelieferte Beispiel (mit dem Befehl, der Ihrem Betriebssystem entspricht), mit dem Sail eine neue SQLite-Datenbankdatei erstellen wird.
cp .env.example .env // Unix-like OS
copy .env.example .env // WindowsFür die nächsten Installationsschritte muss Ihre Anwendung in Docker hochgefahren werden - diese Anwendung wurde mit Laravel Sailerstellt. Wenn also die Installation der Abhängigkeiten funktioniert hat, können Sie die Container der Anwendung ziehen und ausführen:
./vendor/bin/sail up -dDie -d lässt Docker als Daemon laufen, anstatt die Protokolle zu verfolgen. Sie werden bemerken, dass die Umgebungsvariablendatei SQLite als Datenbank verwendet - als ich diese Anwendung schrieb, verwendete ich ursprünglich MySQL, aber für Demozwecke ist SQLite ein vollkommen akzeptabler Ersatz (außerdem ist die Navigation in der Datenbank mit einer IDE wie VSCode oder PHPStorm ist unkomplizierter).
Mit der Binärdatei von Sail können wir nun die Installation der Datenbank und der Frontend-Assets abschließen:
./vendor/bin/sail artisan migrate
./vendor/bin/sail artisan db:seed
./vendor/bin/sail yarn installDie Anwendung erfordert einen Frontend-Asset-Server oder Build. Der schnellste Weg ist hier, einen Frontend Dev Server zu betreiben:
./vendor/bin/sail yarn run devDies wird ausgeführt Vite als Prozess in Ihrem Terminal-Fenster ausgeführt, so dass Sie eine neue Registerkarte oder ein Terminal-Fenster öffnen müssen.
Schließlich müssen Sie einen Anwendungsschlüssel erstellen:
./vendor/bin/sail artisan keyDie Anwendung erfordert ein gültiges Vonage Entwickler-Konto und ein JWT, um API-Aufrufe zu tätigenDie JWTs werden vom Vonage PHP SDK automatisch unter Verwendung Ihres privaten Schlüssels, den Sie aus dem Applications Dashboard heruntergeladen haben, und der eindeutigen App-ID Ihrer Anwendung erstellt. Sobald Sie diese haben, laden Sie den privaten Schlüssel in das Stammverzeichnis Ihrer Anwendung herunter und fügen Sie ./private.key als Umgebungsvariable VONAGE_PRIVATE_KEY_PATHund die App-ID als VONAGE_ANWENDUNG_ID in Ihrer .env Datei. Möglicherweise müssen Sie Sail neu starten, sobald diese Variablen gesetzt sind.
Wenn Sail hochgefahren ist, sollten Sie einen Splash-Screen erhalten, wenn Sie auf localhost:80.
Laravel Silent Auth Spash Screen
Wir sind dran! Jetzt ist es an der Zeit, sich zu registrieren. Gehen Sie in die obere rechte Ecke und klicken Sie auf Registrieren. Sie sehen dann die meisten der Laravel Breeze's mit Ausnahme eines zusätzlichen Feldes "Telefonnummer". Dieser Teil ist der Schlüssel - er speichert Ihre Nummer in der Datenbank und versucht dann, die stille Authentifizierung zu verwenden, um sie zu vervollständigen.
Eine Sache, die Sie vielleicht bemerkt haben, dass ich nicht erklärt habe, was die stille Authentifizierung ist. In diesem Artikel geht es um die Demoanwendung, wenn Sie also mehr darüber lesen möchten, lesen Sie diesen Artikel in unserem Blog, sehen Sie sich diesen Artikel aus unserem Blog an.
Die TLDR; hier ist: Sie werden nur in der Lage sein, mit einem mobilen Gerät auf eine Mobilfunkverbindung anmelden. Das bedeutet, dass wir unsere App der Außenwelt aussetzen müssen. Um dies zu tun, würde ich empfehlen, entweder mit ngrok zu verwenden, oder eine logischere Wahl wäre vielleicht Expose das verwendet ReactPHP verwendet und von der Laravel-Community stammt. Sobald Sie eine externe URL haben, ist es an der Zeit, diese von Ihrem Gerät aus aufzurufen.
Was passiert also, wenn Sie versuchen, sich anzumelden? Nun, zunächst einmal prüft der Code, ob Sie sich zum ersten Mal anmelden oder ob Ihre letzte Anmeldung mehr als 4 Tage zurückliegt. Wenn diese Bedingungen erfüllt sind, wird der Mechanismus der Zwei-Faktor-Authentifizierung (2FA) automatisch aktiviert.
Start Silent Auth Process
Wenn Sie auf die Schaltfläche klicken, um die Authentifizierung zu starten, stellt die Anwendung automatisch fest, ob Sie den Vorgang über Silent Auth abschließen können:
SMS Fallback Option
Um also zum Dashboard zu gelangen, werden Sie entweder automatisch eingeloggt, indem Sie auf die Schaltfläche Silent Auth start klicken, oder Sie können sich anmelden, indem Sie den an Ihr Gerät gesendeten Code eingeben. Damit die Silent-Author-Anfrage funktioniert, muss Ihre WiFi-Verbindung deaktiviert sein und Sie müssen sich im Mobilfunknetz befinden. Der Grund dafür ist, dass Vonage unter der Haube das Gerät und den Standort validiert.
Im Wesentlichen musste ich die bestehende Breeze Autorisierungsablaufs. Also habe ich eine neue Middleware erstellt -VonageSilentAuthMiddlewaredie auf der Login-Route läuft. Diese Middleware wird ausgeführt nach einer erfolgreichen Anmeldung mit einem KennwortDie Middleware wird nach einer erfolgreichen Anmeldung mit einem Passwort ausgeführt, so dass sie den Authentifizierungsfluss nur dann abschließen kann, wenn entweder der Silent Authentication Controller oder der SMS Controller erfolgreich ist. Hier ist ein Teil der Logik in der Middleware:
// is this the first time logging in?
if (empty($user->last_login)) {
$request->session()->put('email', $user->email);
$request->session()->put('phone_number', $user->phone_number);
Auth::logout();
return redirect()->route('silent');
}
// was the last login over 4 days ago?
$lastLogin = Carbon::make($user->last_login);
if ($lastLogin->diffInDays(Carbon::now()) > 4) {
$request->session()->put('email', $user->email);
$request->session()->put('phone_number', $user->phone_number);
Auth::logout();
return redirect()->route('silent');
}Sie werden feststellen, dass die E-Mail und die Telefonnummer des Benutzers in die Sitzung aufgenommen werden. Dies teilt den anderen Controllern nach der Umleitung mit, welchen Benutzer sie aus der Benutzertabelle ziehen müssen, um ihn zu autorisieren sobald ein Autorisierungsmechanismus in einem Controller abgeschlossen ist.
Dies ist ein ziemlich komplexer Teil des Codes, den es zu erklären gilt. Der Nachteil der stummen Authentifizierung besteht darin, dass sie für den Endnutzer eine nahezu reibungslose Erfahrung darstellt, für die Entwickler jedoch komplexer zu integrieren ist. Diese Laravel-Anwendung folgt im Wesentlichen demselben Prozess wie das Express.js-Web-Tutorial aber mit einem funktionierenden Dashboard und einer Benutzertabelle. Eine detailliertere Erklärung, wie der Frontend-Code funktioniert, um die Silent-Authentication-Anfrage zu lösen, finden Sie im Tutorial.
Sie werden feststellen, dass es sich um webbasiert Stille Authentifizierung. Hier gibt es einige Dinge zu beachten:
Die beste Erfahrung mit der Stillen Authentifizierung ist die iOS und Android native SDKs für mobile Anwendungen. Dies liegt daran, dass diese SDKs die Anforderung der stillen Authentifizierung über die Mobilfunkverbindung des Geräts erzwingen können.
JedochObwohl es im Browser keine Web-APIs für diese Art von Funktionalität gibt, haben wir eine Ausweichmöglichkeit, wie in dieser Demo gezeigt. Aus diesem Grund: warum nicht Silent Auth als Option haben trotzdemund wenn das nicht funktioniert, einen anderen Kanal für die 2FA verwenden?
Silent Auth über unsere Verify API ist ein Angebot in dieser neuen Ära der Netzwerk-APIs. Weitere Informationen finden Sie in anderen neuen APIs, die wir veröffentlicht haben, wie zum Beispiel die SIM-Tausch-API. Weitere Informationen über unser Angebot und die Funktionsweise dieser APIs finden Sie in unserer Entwickler-Community Slack oder folgen Sie uns auf X.
Teilen Sie:
Als ausgebildeter Schauspieler mit einer Dissertation in Standup-Comedy bin ich über die Meetup-Szene zur PHP-Entwicklung gekommen. Man findet mich, wenn ich über Technik spreche oder schreibe, oder wenn ich seltsame Platten aus meiner Vinylsammlung spiele oder kaufe.