Sprievodca tutoriálom autentifikácie s balíkom Express.js

Blog

Autentifikácia je dôležitým problémom pri vytváraní dynamickej webovej aplikácie. Tento článok by mal veci vyjasniť a poskytnúť návod na autentifikačný tutoriál s balíkom Express.js



Budova internetové stránky s užívateľom Overenie môže byť obrovská bolesť. Spravidla musíte nastaviť nejaký druh databázy na správu používateľov, aj keď nepoužívate databázy na čokoľvek iné. Potom ich budete musieť uložiť heslo hash a takmer potrebujete titul internetová bezpečnosť poznať najbezpečnejšie spôsoby, ako to urobiť.

Čo keby som vám povedal, že to nemusí byť také zložité? Použitím Octa a expresné „Ukážem vám, ako skutočne rýchlo vytvoriť webovú stránku, ktorá má zabezpečenú autentifikáciu používateľa, bez toho, aby ste ju museli zvlášť vytvárať databázy . Všetko, čo potrebujete, môžete nasadiť kdekoľvek, kde môžete bežať Uzol .



Vytvorte novú aplikáciu v programe Express

Vytváranie nová aplikácia v expresné nezaberie veľa kódu. Budete musieť nastaviť štruktúru projektu a Inštalácia niektoré závislosti, ktoré môžete vykonať iba pomocou niekoľkých príkazov:

problém s autentifikáciou amazon fire stick
mkdir new-project cd new-project npm init -y npm install express@4.16.4 hbs@4.0.1 npm install --save-dev nodemon@1.18.4 standard@12.0.1

Upraviť | _+_ | časť vašej | _+_ | vyzerať takto:



'scripts'

Teraz vytvorte nový súbor | _+_ | :

index . js

package.json

Vytvorte tiež niekoľko nových priečinkov:

'scripts': { 'start': 'nodemon .', 'test': 'standard' },

Vložte zábavný pozdravný obrázok do | _+_ | v koreňovom adresári vašej aplikácie. V ňom zadajte adresu URL svojej organizácie.

index.js

Budete tiež potrebovať náhodný reťazec, ktorý budete používať ako App Secret pre relácie. Môžete to vygenerovať pomocou nasledujúceho príkazu:

const express = require('express') const path = require('path') const app = express() app.set('views', path.join(__dirname, 'views')) app.set('view engine', 'hbs') app.use(express.urlencoded({ extended: true })) app.use('/static', express.static('public')) // @TODO add auth middleware // @TODO add registration page // @TODO add logout route app.use('/', require('./routes/index')) const port = process.env.PORT || 3000 app.listen(port, () => console.log(`App listening on port ${port}`))

Potom sa prihláste do vývojárskej konzoly Okta a prejdite na Aplikácie , potom kliknite na Pridať aplikáciu . Vyberte Web , potom kliknite na Ďalšie .

Sprievodca tutoriálom autentifikácie s balíkom Express.js

Stránka, na ktorú sa dostanete po vytvorení aplikácie, obsahuje ďalšie informácie, ktoré je potrebné uložiť do zariadenia | _+_ | súbor. Skopírujte ID klienta a tajomstvo klienta.

zavolajte rest api z javascriptu
mkdir -p public/images routes views

V čase tohto písania vám predvolená stránka na vytváranie aplikácií neumožňuje pridať identifikátor URI presmerovania na odhlásenie, ale môžete ho pridať po vytvorení aplikácie. Po vytvorení aplikácie kliknite na Upraviť , potom vedľa URI presmerovania odhlásenia kliknite Pridajte URI . Pridajte identifikátor URI presmerovania pri odhlásení | _+_ | a klikni Uložiť .

Posledná informácia, ktorú od Okty potrebujete, je API tokeny . V konzole pre vývojárov prejdite na POŽIAR -> Žetóny , potom kliknite na Vytvorte token . Môžete mať veľa tokenov, a preto mu dajte názov, ktorý vám pripomenie, na čo slúži, napríklad 15 -minútové overenie. Dostanete token, ktorý môžete vidieť iba teraz. Ak token stratíte, budete si musieť vytvoriť ďalší. Pridajte to do | _+_ | tiež.

public/images/greeting.jpg'>

Add Authentication to Your Express App

You now have a simple web server with a homepage and a lovely greeting image. The next step I promised to show you is to add secure user authentication. This is where Okta comes in to play. Okta is a cloud service that allows developers to create, edit, and securely store user accounts and user account data, and connect them with one or multiple applications. Our API enables you to:

  • Authenticate and authorize your users
  • Store data about your users
  • Perform password-based and social login
  • Secure your application with multi-factor authentication
  • And much more! Check out our product documentation

If you don’t already have one, sign up for a forever-free developer account.

čo je priemerný zámok aplikácie

You’re going to need to save some information to use in the app. Create a new file named .env

Pridajte autentifikačný middleware do svojej expresnej aplikácie

Okta poskytuje nejaký middleware, ktorý vám poskytne informácie o tom, či je používateľ zaregistrovaný alebo nie. Štandardne vám tiež poskytne prihlasovaciu stránku | _+_ | . Pridajte nasledujúce závislosti:

HOST_URL=http://localhost:3000 OKTA_ORG_URL=https://{yourOktaOrgUrl}

Vo vašom | _+_ | stránku, nahraďte | _+_ | komentujte pomocou nasledujúceho kódu:

npm install -g uuid-cli echo 'APP_SECRET=`uuid`' >> .env

Nezabudnite tiež pridať nasledujúce položky na úplný začiatok | _+_ | . Na načítanie premenných prostredia to musí byť uvedené pred akýmkoľvek iným kódom, takže by to mal byť prvý riadok súboru:

.env

Vytvorte registračnú stránku

Teraz by ste sa mali dať prihlásiť tak, že prejdete na | _+_ | . To vás presmeruje na vašu stránku vývojára Okta a po prihlásení budete presmerovaní späť na domovskú stránku.

Pre ľudí, ktorí ešte nie sú zaregistrovaní, budú potrebovať registračnú stránku. V čase písania tohto článku Okta neposkytuje registračnú stránku ihneď po vybalení, ale môžete si ju vytvoriť veľmi rýchlo. Vytvorte nové zobrazenie pre svoju trasu:

oficiálna stránka krvnej rovnováhy

views/register.hbs

OKTA_CLIENT_ID={yourClientId} OKTA_CLIENT_SECRET={yourClientSecret}

Budete tiež potrebovať novú trasu:

trasy/register.js

[http://localhost:3000](http://localhost:3000)

Aby ste to všetko spojili, vo svojom koreni | _+_ | nezabudnite nahradiť súbor | _+_ | komentujte nasledovne:

.env

Teraz môžete nechať používateľov zaregistrovať sa. Ak narazia na chybu, zobrazí sa s poľom, ktoré chybu spôsobilo.

Sprievodca tutoriálom autentifikácie s balíkom Express.js

Pridajte trasu odhlásenia

V čase písania tohto článku middleware spoločnosti Okta neposkytuje predvolené | _+_ | trasa. Našťastie je pridanie jedného celkom jednoduché. Vo vašom | _+_ | súbor, nahraďte | _+_ | komentovať s:

ako načítať odstránené správy twitter
OKTA_TOKEN={yourOktaAPIToken}

Ak ste prihlásení, token sa tým zruší a relácia používateľa sa odstráni. Potom vás presmeruje späť na domovskú stránku. Ak nie ste prihlásení, jednoducho sa dostanete späť na domovskú stránku.

Pridajte odkazy na nové trasy vo svojej aplikácii Express

Ak chcete jednoduchšie odhaliť tieto trasy používateľovi, môžete pridať niekoľko tlačidiel. Budete musieť používateľskému kontextu vystaviť zobrazenie, aby ste vedeli, či je používateľ prihlásený alebo nie, aby ste vedeli, ktoré tlačidlá sa majú zobraziť, a prípadne ho pozdraviť.

V | _+_ | nahraďte | _+_ | riadok s nasledujúcim:

trasy/index.js

/login

Kým ste pri tom, môžete tiež zabrániť používateľovi vidieť váš pozdrav, pokiaľ nie je prihlásený. Zmeňte svoje | _+_ | súbor na nasledujúce:

views/index.hbs

{{#if userContext}} # Ahoj {{userContext.userinfo.given_name}}! ! [] (/static/images/greeting.jpg '>

#node-js #express #vývoj webových aplikácií #bezpečnosť

developer.okta.com

Sprievodca tutoriálom autentifikácie s balíkom Express.js

Autentifikácia je dôležitým problémom pri vytváraní dynamickej webovej aplikácie. Tento článok by mal veci vyjasniť a poskytnúť návod na autentifikačný tutoriál s balíkom Express.js