Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Angular 2+
Code

Angular Authentication Sa Pamamagitan ng JWT

by
Difficulty:IntermediateLength:MediumLanguages:

Tagalog (Wikang Tagalog) translation by Anna Nelson (you can also view the original English article)

Ang seguridad ay isang mahalagang parte ng bawat web app, at ang mga devs ay dapat siguruhin na dinisenyo nila ang mga apps nang may secure authentication. Sa pagtuturong ito, matutunan mo kung paano ipatupad ang JWT-based authentication sa Angular apps sa tulong ng isang simpleng Express server.

Ang buong code ay maaring makita sa aming GitHub repo. Ang app na aming bubuuin ay ganito ang magiging itsura:

Final Look

Ang konsepto ng JSON Web Tokens

Ang JSON Web Token (JWT) ay karaniwan isang bagay na kinakatawan ng tatlong mga string na ginagamit upang maghatid ng impormasyon ng user.Ang tatlong mga string, kung saan ay pinaghihiwalay ng mga tuldok, ay ang mga:

  • header
  • payload
  • pirma

Kapag ang user ay nag-log in sa kahit anong pahina ng web nang may username at password nila, ang authenticating server sa kadalasan ay lumilikha at nagpapadala pabalik ng JWT. Ang JWT na ito ay idadaan sa susunod na API calls sa server. Ang JWT ay nananatiling may bisa maliban lang kung ito ay lipas na o ang user ay nag-sign out na sa aplikasyon.

Ang prosesong ito ay maaring isalarawan sa diagram na nasa ibaba.

JWT authorization flow

Cookies vs. Local Storage

Gagamit tayo ng local storage upang itago ang mga token.Ang local storage ay isang paraan kung saan ang datos ay nakaimbak locally at maari lamang matanggal sa pamamagitan ng JavaScript o sa pag-clear ng cache sa browser. Ang mga datos na nakaimbak sa local storage ay maaring magtagal sa napakahabang panahon. Ang Cookies, sa kabilang banda, ay mga mensahe na naipadala mula sa server patungo sa browser at naghahandog ng limitadong storage lamang.

Pagbuo ng Express Server

Ating sisimulan sa pamamagitan ng pagbuo ng back-end server na magtatampok ng mga sumusunod na endpoints:

  • POST <webservice>/login
  • POST <webservice>/profile

Magsimula tayo sa pamamagitan ng paglikha ng direktoryo para sa aplikasyon ng Express at pagkatapos ay i-run ang utos na npm init dito upang i-ayos ang kinakailangan mga files para sa proyekto.

Sunod, lumikha ng isang file server.js at mag-install ng mga module: express, jsonwebtoken, cors, at bodyParser.

Ngayon ay buksan ang server.js at simulan sa pamamagitan ng pag-import ng mga module.

Pagkatapos ay lumikha ng Express app at tukuyin ang sikretong susi na gagamitin para mag-encode at decode ng detalye ng user.

Hindi tayo gagamit ng database para sa halimbawang ito. Gayunpaman, ang mga konsepto ay magiging katulad kung ikaw ay lilikha ng isang wastong database-backed server.

Para sa aming halimbawa,gagamit lamang kami ng isang variable upang tukuyin ang isang test user gaya ng ipinapakita sa ibaba.

Ang pinakahuling hakbang ay ang lumikha ng mga ruta para sa pag-authenticate ng user.

Ating himayin ang code para sa ruta na nasa itaas.

Atin munang tignan kung mayroon kahit anong datos sa lupon ng kahilingan. Kung walang datos na nakita, ating diniktahan ang user na magpasok ng ilan datos. Sa pagkakataon na ang user ay nagbigay ng tamang datos, atin inihambing ito sa datos na mula sa testUser at, kung ito ay magtugma,gagamitin natin ang user id upang bumuo ng isang natatanging token at ipadala pabalik ang kasagutan sa user.

Sa wakas, lumikha tayo ng endpoint para sa pagpapatakbo ng app.

Ang ating back-end ay kumpleto na, at maari mo na itong subukan sa pamamagitan ng Postman r CURL at tignan kung anong klaseng datos ang ibabalik sa user.

Bumuo ng Angular Application

Ang ating Angular application ay magtatampok ng mga sumusunod na pahina:

  • Home—Ang pahinang ito ay maglalaman ng mga link para sa pag-login at pahina ng mga profile.
  • Login—Sa pahinang ito, ang user ay itatala ang kanilang email at password, kung saan ay ipapadala sa server para sa authentication.Kung ang mga kredensyal ay tama, kung gayon ay isang JWT token ang babalik at ang user ay ma-redirect sa pahina ng profile.
  • Profile—Ang pahinang ito ay protektado na maari lamang mabuksan ng user na may wastong token.

Lumikha ng Angular application at lumikha ng Login and Profile mga bahagi gaya ng ipinapakita sa ibaba:

Sunod, idagdag ang code para sa mga home page sa app.component.html.

Sunod, i-import ang RouterModule at tukuyin ang ruta sa app.module.ts.

Lumikha ng Pahina ng Login

Ang pahina ng login ay maglalaman ng 2 input fields para sa email at password, at isang submit button gaya ng ipinapakita sa ibaba:

Lumikha ng Pahina ng Profile

Ang pahina ng profile ay magiging isang karaniwan mensahe lamang gaya ng ipinapakita sa ibaba:

Auth sa Pamamagitan ng JWT sa Angular

Sisimulan natin sa pamamagitan ng Auth Service na pangangasiwaan ang pagpapatunay ng user input at komunikasyon sa server.

Ito ay lumikha ng dalawang files, ngunit higit sa lahat ay magiging interesado tayo sa auth.service.ts file kung saan ay isusulat natin ang lahat ng code na nakikipag-ugnayan sa server.Tayo ay magsisimula sa pamamagitan ng pagtukoy sa REST API at ang token gaya ng ipinapakita sa ibaba:

Sunod, isusulat natin ang code na nagsasagawa ng POST request sa server sa pamamagitan ng kredensyal ng user. Dito, gagawa tayo ng kahilingan sa API—kung ito’y matagumpay atin iimbak ang token sa localStorage at i-redirect ang user sa pahina ng profile.

Atin din tutukuyin ang login at logout functions gaya ng ipinapakita sa ibaba.

  • logout—iniaalis ang token mula sa local storage
  • login—nagbabalik ng Boolean property na tumutukoy kung ang isang user ay authenticated

Ating ini-update ang logIn property sa home page gaya ng ipinapakita.

Pagtugon sa User Events

Ngayong tapos na tayo sa code na nakikipag-ugnayan sa server, tayo’y tutungo naman sa paghawak ng user-generated events para sa front-end.

Ating isusulat ang function kung saan ay makikinig sa click events mula sa pahina ng login at pagkatapos ay ipapasa ang values sa AuthService para i-authenticate ang user. I-update ang iyong login.component.ts file para magmukhang ganito:

Ngayon kung iyong i-run ng serve at mag-navigate sa http://localhost:4200, maari mong subukan ang iyong app.

Mag-click sa login link at ilagay ang mga kredensyal ng user—tandaan, ang wastong kredensyal ay nakatukoy sa Express app. Kapag nag-click ka sa login button, ikaw ay ma-redirect sa pahina ng profile.

Konklusyon

Sa pagtuturong ito, natutunan mo kung paano makapagsimula sa pamamagitan ng JWT authentication sa Angular. Ngayon maari ka nang mag-authenticate at mag-authorize sa pamamagitan ng JWT sa iyong Angular applications. Maraming aspeto ang JWT na hindi natalakay sa pagtuturong ito—tignan kung kaya mong saliksikin ang iba pa!

Tandaan na ang pagtuturong ito ay isinulat para Angular 6, ngunit ang kaparehas na konsepto ay gagana sa pamamagitan ng Angular 2 o Angular 4.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.