{"id":16537,"date":"2025-03-29T01:15:15","date_gmt":"2025-03-28T22:15:15","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/react-uygulamaniza-frontegg-ile-kimlik-dogrulama-ekleme\/"},"modified":"2025-03-29T01:15:15","modified_gmt":"2025-03-28T22:15:15","slug":"react-uygulamaniza-frontegg-ile-kimlik-dogrulama-ekleme","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/react-uygulamaniza-frontegg-ile-kimlik-dogrulama-ekleme\/","title":{"rendered":"React Uygulaman\u0131za Frontegg ile Kimlik Do\u011frulama Ekleme"},"content":{"rendered":"

<\/p>\n

React Uygulaman\u0131za Frontegg ile Kimlik Do\u011frulama Ekleme<\/p>\n

Merhaba! Bu yaz\u0131da, React uygulamalar\u0131n\u0131za Frontegg kullanarak kimlik do\u011frulama eklemeyi ad\u0131m ad\u0131m a\u00e7\u0131klayaca\u011f\u0131m. Frontegg, geli\u015ftirme s\u00fcrecinizi h\u0131zland\u0131ran ve g\u00fcvenli\u011fi sa\u011flayan g\u00fc\u00e7l\u00fc bir kimlik do\u011frulama hizmetidir. Bu sayede, kimlik do\u011frulama altyap\u0131s\u0131n\u0131 s\u0131f\u0131rdan olu\u015fturmak zorunda kalmaz ve zamandan tasarruf edersiniz. Ayr\u0131ca, geli\u015fmi\u015f g\u00fcvenlik \u00f6zellikleri ile uygulaman\u0131z\u0131n g\u00fcvenli\u011fini de sa\u011flars\u0131n\u0131z.<\/p>\n

Neden Frontegg Kullanmal\u0131s\u0131n\u0131z?<\/h2>\n

\u00d6ncelikle, Frontegg’in sundu\u011fu avantajlar\u0131 g\u00f6zden ge\u00e7irelim. Geli\u015ftirme s\u00fcrecini \u00f6nemli \u00f6l\u00e7\u00fcde h\u0131zland\u0131ran Frontegg, karma\u015f\u0131k kimlik do\u011frulama s\u00fcre\u00e7lerini kolayla\u015ft\u0131r\u0131r. Kullan\u0131m\u0131 kolay aray\u00fcz\u00fc ve kapsaml\u0131 dok\u00fcmanlar\u0131 sayesinde, h\u0131zl\u0131 bir \u015fekilde entegre edebilirsiniz. Ayr\u0131ca, JWT (JSON Web Token) kullan\u0131m\u0131yla g\u00fcvenli ve standartlara uygun bir kimlik do\u011frulama sistemi sa\u011flar. Bunun yan\u0131 s\u0131ra, kay\u0131t olma, oturum a\u00e7ma ve \u015fifre s\u0131f\u0131rlama gibi temel fonksiyonlar\u0131 haz\u0131r olarak sunar. Sonu\u00e7 olarak, daha az kod yazarak daha fazla i\u015flevsellik elde edersiniz.<\/p>\n

Ad\u0131m Ad\u0131m Entegrasyon<\/h2>\n

\u015eimdi, React uygulaman\u0131za Frontegg’i entegre etmenin ad\u0131mlar\u0131n\u0131 inceleyelim. \u00d6ncelikle, Frontegg hesab\u0131n\u0131z\u0131 olu\u015fturman\u0131z ve bir uygulama olu\u015fturman\u0131z gerekmektedir. Ard\u0131ndan, Frontegg’in sa\u011flad\u0131\u011f\u0131 JavaScript SDK’s\u0131n\u0131 projenize eklemelisiniz. Bu i\u015flem, npm install @frontegg\/react komutu ile ger\u00e7ekle\u015ftirilebilir. Daha sonra, Frontegg’in dok\u00fcmanlar\u0131nda verilen \u00f6rneklere bakarak, uygulaman\u0131zda gerekli bile\u015fenleri olu\u015fturman\u0131z gerekecektir. \u00d6rne\u011fin, oturum a\u00e7ma ve kay\u0131t olma sayfalar\u0131 i\u00e7in \u00f6zel bile\u015fenler olu\u015fturabilirsiniz. Bu bile\u015fenler, Frontegg SDK’s\u0131 ile etkile\u015fime ge\u00e7erek kullan\u0131c\u0131 kimlik do\u011frulamas\u0131n\u0131 y\u00f6netecektir.<\/p>\n

\n\/\/ \u00d6rnek kod (Detayl\u0131 kod \u00f6rne\u011fi i\u00e7in Frontegg dok\u00fcmanlar\u0131na bak\u0131n\u0131z)\nimport { FronteggProvider, useUser } from '@frontegg\/react';\n\nfunction App() {\n  const user = useUser();\n\n  return (\n    <div>\n      {user.isAuthenticated ? (\n        <p>Ho\u015fgeldiniz, {user.email}!<\/p>\n      ) : (\n        <p>L\u00fctfen giri\u015f yap\u0131n.<\/p>\n      )}\n    <\/div>\n  );\n}\n\n<FronteggProvider>\n  <App \/>\n<\/FronteggProvider>\n\n<\/code><\/pre>\n
Bu kod \u00f6rne\u011fi, kullan\u0131c\u0131n\u0131n oturum a\u00e7\u0131p a\u00e7mad\u0131\u011f\u0131n\u0131 kontrol eder ve buna g\u00f6re farkl\u0131 i\u00e7erik g\u00f6r\u00fcnt\u00fcler.  Daha detayl\u0131 bilgi i\u00e7in Frontegg\u2019in resmi dok\u00fcmanlar\u0131na g\u00f6z atman\u0131z faydal\u0131 olacakt\u0131r.  Ayr\u0131ca,  uygulaman\u0131z\u0131 g\u00fcvenli bir \u015fekilde yap\u0131land\u0131rmak i\u00e7in Frontegg’in  \u00f6nerilerini ve g\u00fcvenlik en iyi uygulamalar\u0131n\u0131 dikkate almal\u0131s\u0131n\u0131z.  Bu sayede,  uygulaman\u0131z\u0131n g\u00fcvenli\u011fini en \u00fcst d\u00fczeye \u00e7\u0131karabilirsiniz.<\/p>\n
Sonu\u00e7<\/h2>\n
Frontegg, React uygulamalar\u0131na kimlik do\u011frulama eklemek i\u00e7in h\u0131zl\u0131, g\u00fcvenli ve kullan\u0131m\u0131 kolay bir \u00e7\u00f6z\u00fcmd\u00fcr.  Bu makalede,  Frontegg’i entegre etmenin temel ad\u0131mlar\u0131n\u0131 ve baz\u0131 \u00f6nemli noktalar\u0131 ele ald\u0131k.  Daha fazla bilgi ve geli\u015fmi\u015f kullan\u0131m senaryolar\u0131 i\u00e7in  Frontegg’in resmi dok\u00fcmanlar\u0131n\u0131 incelemenizi \u00f6neririm. Unutmay\u0131n ki,  g\u00fcvenlik uygulaman\u0131z\u0131n temel ta\u015f\u0131d\u0131r ve bu konuda gereken \u00f6zeni g\u00f6stermelisiniz. <\/p>\n
Umar\u0131m bu makale size yard\u0131mc\u0131 olmu\u015ftur.  Daha fazla web geli\u015ftirme i\u00e7eri\u011fi i\u00e7in  fatihsoysal.com<\/a> adresini ziyaret edebilirsiniz.<\/p>\n
Faydal\u0131 bulabilece\u011finiz di\u011fer kaynaklar:<\/p>\n