logo

Jak implementovat Magic Link Authentication s Next.js a Allogic

Jak implementovat Magic Link Authentication s Next.js a Allogic

Úvod

Tento článek se bude zabývat ověřením pomocí magického odkazu základy využívající Next.js a Allogic, platformu backend-as-a-service využívající svou klientskou knihovnu. Tato metoda ověřování umožňuje uživatelům přihlásit se do aplikace bez zapamatování jejich hesla.

Aby se snížilo tření uživatelského prostředí a zabránilo se zapamatování více hesel, některé malé/střední a dokonce i velké organizace přecházejí od autentizace založeného na heslech na magickou autentizaci v závislosti na jejich ochotě riskovat.

Můžete se podívat na zdrojový kód a ukázkovou aplikaci.

Výhody

S metodou autentizace magickým odkazem si uživatel nemusí pamatovat další heslo ani je zadávat pro přístup ke svému účtu. Můžeme tedy jasně pochopit, že autentizace pomocí magických odkazů značně zjednodušuje uživatelům přihlašování a poskytuje lepší uživatelský zážitek.

Nevýhody

Pro tuto metodu autentizace je primární podmínkou, že odkaz musí být bezpečný a nelze s ním manipulovat zvenčí aplikace. A odkazy by měly být použity jen na několik minut a pouze jednou. Takže kromě těchto podmínek se autentizace bez hesla zdá bezpečnější než autentizace s heslem.

Jak probíhá autentizace magického odkazu v Allogic?

  1. Uživatelé, kteří již mají účet, zadají svůj e-mail a kliknou na „Odeslat magický odkaz “.

  2. E-mail s magickým odkazem odešle na zadanou e-mailovou adresu Altogic .

  3. Uživatelé kliknou na odkaz v zaslaném e-mailu.

  4. Allogic přesměrovává uživatele na zadanou „Adresu URL přesměrování ” s přístupovým tokenem v parametru řetězce dotazu.

  5. Tento přístupový token se používá k získání tokenu relace a uživatelé jsou přesměrováni na stránku svého profilu.

Propagační video YouTube

Můžete se podívat na video níže, abyste viděli živou ukázku naší aplikace.

Nastavte projekt

Tento projekt staví na kompletní aplikaci pro ověřování e-mailů, kterou jsme vytvořili dříve. Můžete se řídit výukovým programem a vytvořit stejnou aplikaci nebo odtud naklonovat projekt a pokračovat ve zbytku výukového programu.

Začněme kódovat!

Backend již máme a frontend z teď ověření e-mailu . Můžeme začít implementovat funkci magického odkazu .

Nastavte stránku magického odkazu

Potřebujeme stránku, kam dostaneme e-mail vstup od uživatele.

Pomocí „altogic.auth.sendMagicLinkEmail(email)“ můžeme poslat magický odkaz na zadaný e-mail.

Zde je zdrojový kód /auth/send-magic-link stránka:


Nakonec by vaše obrazovka měla vypadat takto:

E-mail s magickým odkazem

Můžete také změnit všechny šablony zpráv v části Nastavení aplikace → Ověření → Šablony zpráv pohled na Altogic Designer a použijte libovolnou HTML šablonu chcete.

Zde je návod, jak to udělat:

Nyní, když jsme odeslali e-mail, uživatelé se musí přihlásit kliknutím na odkaz.

Cesta přesměrované adresy URL

Když uživatelé kliknou na odkaz, Altogic přesměruje na naši zadanou adresu URL přesměrování, což je /auth-redirect v tomto případě.

Zde v getServerSideProps kontrolujeme parametry řetězce dotazu a podle každé akce provádíme nějaké akce. Zde je důležité část!

Funkce getAuthGrant() buď vezme token relace jako parametr nebo používá ten v URL.

Zde tento kód spouštíme pouze na straně serveru takže musíme dávat token relace jako parametr.

Co se stane, když na odkaz znovu klikneme?

Magické odkazy jsou jednorázové odkazy. Pokud uživatelé kliknou na odkaz podruhé nebo po vypršení jeho platnosti, zobrazí se jim chyba. Tato funkce činí metodu ověřování magickým odkazem bezpečnější.

Jak můžeme vidět z URL , přístupový token je již použit nebo je neplatný.

Závěr

Tento článek přidal metodu ověřování magickým odkazem do naší aplikace pro ověřování e-mailů pomocí Next.js a Altogic Client Library . Díky Altogic , můžeme tuto funkci sestavit pomocí několika řádků kódu.

Můžete se podívat na úložiště GitHub pro další funkce a zbytek kódu. Můžete jej také naklonovat a vytvořit na něm svou aplikaci.