{"id":2393,"date":"2024-01-26T12:37:43","date_gmt":"2024-01-26T09:37:43","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/?p=2393"},"modified":"2024-01-26T12:44:26","modified_gmt":"2024-01-26T09:44:26","slug":"webapi-react-login-uygulamasi-yapalim","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/webapi-react-login-uygulamasi-yapalim\/","title":{"rendered":"WebAPI &#8211; React Login Uygulamas\u0131 Yapal\u0131m"},"content":{"rendered":"\n<p>Merhaba, bu yaz\u0131mda basit bir uygulama ile react i\u00e7erisinde login mant\u0131\u011f\u0131 nas\u0131l kurgulan\u0131r, bunu anlataca\u011f\u0131m.<\/p>\n\n\n\n<p>Oturum a\u00e7ma ve Kullan\u0131c\u0131 Profili ekranlar\u0131 olu\u015fturaca\u011f\u0131z.&nbsp; \u00d6rnek bir webapi \u00fczerinden i\u015flemlerimizi ger\u00e7ekle\u015ftirece\u011fiz.<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Method: POST<\/li><li>URL:&nbsp;<a href=\"https:\/\/www.mecallapi.com\/api\/login\" rel=\"noreferrer noopener\" target=\"_blank\">https:\/\/www.fatihsoysal.com\/api\/login<\/a> (Dikkat: URL \u00f6rnek i\u00e7in verilmi\u015ftir.)<\/li><li>Body (JSON):<\/li><\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>{\n    \"username\": \"info@fatihsoysal.com\",\n    \"password\": \"testpass\"\n}<\/code><\/pre>\n\n\n\n<p>Geri d\u00f6n\u00fc\u015f(response) ise \u015fu \u015fekilde oldu\u011funu d\u00fc\u015f\u00fcnelim:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>{\n    \"status\": \"ok\",\n    \"message\": \"Logged in\",\n    \"accessToken\": \"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...\",\n    \"user\": {\n        \"id\": 1,\n        \"fname\": \"Fatih\",\n        \"lname\": \"Soysal\",\n        \"username\": \"info@fatihsoysal.com\",\n        \"email\": \"info@fatihsoysal.com\",\n        \"avatar\": \"https:\/\/www.fatihsoysal.com\/users\/1.png\"\n    }\n}<\/code><\/pre>\n\n\n\n<p>Gereklilikler:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>Node.js<\/strong>&nbsp;<a href=\"https:\/\/nodejs.org\/\" rel=\"noreferrer noopener\" target=\"_blank\">https:\/\/nodejs.org<\/a><\/li><li><strong>Yarn<\/strong><\/li><\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>npm install --global yarn\n<\/code><\/pre>\n\n\n\n<p><strong>Kurulum i\u00e7in bir test react projesi olu\u015ftural\u0131m:<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>npx create-react-app react-basic-login\n<\/code><\/pre>\n\n\n\n<p>Kurulum ger\u00e7ekle\u015ftirdik, \u015fimdi \u00e7al\u0131\u015fma klas\u00f6r\u00fcn\u00fc a\u00e7al\u0131m:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>cd react-basic-login\n<\/code><\/pre>\n\n\n\n<p>Kullanaca\u011f\u0131m\u0131z paket kurulumlar\u0131n\u0131 ger\u00e7ekle\u015ftirelim:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>Material UI<\/strong><\/li><li><strong>react-router-dom<\/strong><\/li><li><strong>Sweetalert<\/strong><\/li><\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>yarn add @material-ui\/core @material-ui\/icons react-router-dom sweetalert\n<\/code><\/pre>\n\n\n\n<h1 class=\"wp-block-heading\" id=\"4fd8\">Oturum A\u00e7ma ve Profil i\u00e7in ekranlar olu\u015ftural\u0131m<\/h1>\n\n\n\n<p id=\"a547\">2 ekran olu\u015fturaca\u011f\u0131z:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>Oturum a\u00e7ma&nbsp;API&#8217;sinin<\/strong>&nbsp;kullan\u0131ld\u0131\u011f\u0131 oturum a\u00e7ma sayfas\u0131 i\u00e7in&nbsp;<strong>Sigin.js<\/strong><\/li><li><strong>Kullan\u0131c\u0131 profilini g\u00f6r\u00fcnt\u00fclemek i\u00e7in Profile.js<\/strong>&nbsp;(bu ekrana gitmeden \u00f6nce oturum a\u00e7m\u0131\u015f olman\u0131z gerekecek)<\/li><\/ul>\n\n\n\n<p><strong>SignIn.js<\/strong>:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import React, { useState } from 'react';\nimport Avatar from '@material-ui\/core\/Avatar';\nimport Button from '@material-ui\/core\/Button';\nimport CssBaseline from '@material-ui\/core\/CssBaseline';\nimport TextField from '@material-ui\/core\/TextField';\nimport Paper from '@material-ui\/core\/Paper';\nimport Grid from '@material-ui\/core\/Grid';\nimport LockOutlinedIcon from '@material-ui\/icons\/LockOutlined';\nimport Typography from '@material-ui\/core\/Typography';\nimport { makeStyles } from '@material-ui\/core\/styles';\nimport swal from 'sweetalert';\n\nconst useStyles = makeStyles((theme) =&gt; ({\n  root: {\n    height: '100vh',\n  },\n  image: {\n    backgroundImage: 'url(https:\/\/source.unsplash.com\/random)',\n    backgroundSize: 'cover',\n  },\n  paper: {\n    margin: theme.spacing(8, 4),\n    display: 'flex',\n    flexDirection: 'column',\n    alignItems: 'center',\n  },\n  avatar: {\n    margin: theme.spacing(1),\n    backgroundColor: theme.palette.secondary.main,\n  },\n  form: {\n    width: '100%',\n    marginTop: theme.spacing(1),\n  },\n  submit: {\n    margin: theme.spacing(3, 0, 2),\n  },\n}));\n\nasync function loginUser(credentials) {\n  return fetch('https:\/\/www.mecallapi.com\/api\/login', {\n    method: 'POST',\n    headers: {\n      'Content-Type': 'application\/json'\n    },\n    body: JSON.stringify(credentials)\n  })\n    .then(data =&gt; data.json())\n }\n\nexport default function Signin() {\n  const classes = useStyles();\n  const &#91;username, setUserName] = useState();\n  const &#91;password, setPassword] = useState();\n\n  const handleSubmit = async e =&gt; {\n    e.preventDefault();\n    const response = await loginUser({\n      username,\n      password\n    });\n    if ('accessToken' in response) {\n      swal(\"Success\", response.message, \"success\", {\n        buttons: false,\n        timer: 2000,\n      })\n      .then((value) =&gt; {\n        localStorage.setItem('accessToken', response&#91;'accessToken']);\n        localStorage.setItem('user', JSON.stringify(response&#91;'user']));\n        window.location.href = \"\/profile\";\n      });\n    } else {\n      swal(\"Failed\", response.message, \"error\");\n    }\n  }\n\n  return (\n    &lt;Grid container className={classes.root}&gt;\n      &lt;CssBaseline \/&gt;\n      &lt;Grid item xs={false} md={7} className={classes.image} \/&gt;\n      &lt;Grid item xs={12} md={5} component={Paper} elevation={6} square&gt;\n        &lt;div className={classes.paper}&gt;\n          &lt;Avatar className={classes.avatar}&gt;\n            &lt;LockOutlinedIcon \/&gt;\n          &lt;\/Avatar&gt;\n          &lt;Typography component=\"h1\" variant=\"h5\"&gt;\n            Sign in\n          &lt;\/Typography&gt;\n          &lt;form className={classes.form} noValidate onSubmit={handleSubmit}&gt;\n            &lt;TextField\n              variant=\"outlined\"\n              margin=\"normal\"\n              required\n              fullWidth\n              id=\"email\"\n              name=\"email\"\n              label=\"Email Address\"\n              onChange={e =&gt; setUserName(e.target.value)}\n            \/&gt;\n            &lt;TextField\n              variant=\"outlined\"\n              margin=\"normal\"\n              required\n              fullWidth\n              id=\"password\"\n              name=\"password\"\n              label=\"Password\"\n              type=\"password\"\n              onChange={e =&gt; setPassword(e.target.value)}\n            \/&gt;\n            &lt;Button\n              type=\"submit\"\n              fullWidth\n              variant=\"contained\"\n              color=\"primary\"\n              className={classes.submit}\n            &gt;\n              Sign In\n            &lt;\/Button&gt;\n          &lt;\/form&gt;\n        &lt;\/div&gt;\n      &lt;\/Grid&gt;\n    &lt;\/Grid&gt;\n  );\n}<\/code><\/pre>\n\n\n\n<p><strong>Profile.js<\/strong>:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import React from 'react';\nimport { makeStyles } from '@material-ui\/core\/styles';\nimport AppBar from '@material-ui\/core\/AppBar';\nimport Toolbar from '@material-ui\/core\/Toolbar';\nimport Typography from '@material-ui\/core\/Typography';\nimport IconButton from '@material-ui\/core\/IconButton';\nimport MenuItem from '@material-ui\/core\/MenuItem';\nimport Menu from '@material-ui\/core\/Menu';\nimport Avatar from '@material-ui\/core\/Avatar';\nimport Card from '@material-ui\/core\/Card';\nimport CardContent from '@material-ui\/core\/CardContent';\n\nconst useStyles = makeStyles((theme) =&gt; ({\n  root: {\n    flexGrow: 1,\n  },\n  menuButton: {\n    marginRight: theme.spacing(2),\n  },\n  title: {\n    flexGrow: 1,\n  },\n  large: {\n    width: theme.spacing(20),\n    height: theme.spacing(20),\n  },\n}));\n\nexport default function Profile() {\n  const classes = useStyles();\n  const &#91;anchorEl, setAnchorEl] = React.useState(null);\n  const open = Boolean(anchorEl);\n  const user = JSON.parse(localStorage.getItem('user'));\n\n  const handleMenu = (event) =&gt; {\n    setAnchorEl(event.currentTarget);\n  };\n\n  const handleClose = () =&gt; {\n    setAnchorEl(null);\n  };\n\n  const handleLogout = () =&gt; {\n    localStorage.removeItem(\"accessToken\");\n    localStorage.removeItem(\"user\");\n    window.location.href = \"\/\";\n  };\n\n  return (\n    &lt;div className={classes.root}&gt;\n      &lt;AppBar position=\"static\"&gt;\n        &lt;Toolbar&gt;\n          &lt;Typography variant=\"h6\" className={classes.title}&gt;\n            Profile\n          &lt;\/Typography&gt;\n            &lt;div&gt;\n            &lt;IconButton onClick={handleMenu} color=\"inherit\"&gt;\n              &lt;Avatar src={user.avatar} \/&gt;\n            &lt;\/IconButton&gt;\n            &lt;Menu id=\"menu-appbar\" \n              anchorEl={anchorEl} \n              open={open}\n              onClose={handleClose}\n            &gt;\n              &lt;MenuItem onClick={handleLogout}&gt;Logout&lt;\/MenuItem&gt;\n            &lt;\/Menu&gt;\n          &lt;\/div&gt;\n        &lt;\/Toolbar&gt;\n      &lt;\/AppBar&gt;\n      &lt;Card className={classes.root} variant=\"outlined\"&gt;\n        &lt;CardContent&gt;\n          &lt;Avatar src={user.avatar} className={classes.large} \/&gt;\n          &lt;Typography variant=\"h5\"&gt;\n          Welcome {user.fname} {user.lname}\n          &lt;\/Typography&gt;\n        &lt;\/CardContent&gt;\n      &lt;\/Card&gt;\n    &lt;\/div&gt;\n  );\n}<\/code><\/pre>\n\n\n\n<p><strong>Son olarak, Oturum A\u00e7ma<\/strong>&nbsp;ve&nbsp;<strong>Profil<\/strong>&nbsp;ekranlar\u0131 aras\u0131ndaki y\u00f6nlendirme i\u00e7in&nbsp;<strong>App.js&#8217;yi<\/strong>&nbsp;d\u00fczenleyin&nbsp;.&nbsp;<strong>Oturum a\u00e7ma API&#8217;sinin<\/strong>&nbsp;\u00e7a\u011fr\u0131lmas\u0131nda eri\u015fim belirteci yoksa kullan\u0131c\u0131 yaln\u0131zca&nbsp;<strong>Oturum a\u00e7ma<\/strong>&nbsp;ekran\u0131na eri\u015febilecektir&nbsp;.<\/p>\n\n\n\n<p><strong>app.js:<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import React from 'react';\r\nimport '.\/App.css';\r\nimport { BrowserRouter, Route, Switch } from 'react-router-dom';\r\nimport Signin from '.\/Signin';\r\nimport Profile from '.\/Profile';\r\n\r\nfunction App() {\r\n  const token = localStorage.getItem('accessToken');\r\n\r\n  if(!token) {\r\n    return &lt;Signin \/>\r\n  }\r\n\r\n  return (\r\n    &lt;div className=\"wrapper\">\r\n      &lt;BrowserRouter>\r\n        &lt;Switch>\r\n          &lt;Route path=\"\/profile\">\r\n            &lt;Profile \/>\r\n          &lt;\/Route>\r\n          &lt;Route path=\"\/\">\r\n            &lt;Profile \/>\r\n          &lt;\/Route>\r\n        &lt;\/Switch>\r\n      &lt;\/BrowserRouter>\r\n    &lt;\/div>\r\n  );\r\n}\r\n\r\nexport default App;<\/code><\/pre>\n\n\n\n<p>\u0130\u015flemler bu kadar, \u015fimdi uygulamay\u0131 ba\u015flatal\u0131m:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>yarn start\n<\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/01\/1_Ce8w96bwj_ExA2_A-HmH6w.gif\"><img fetchpriority=\"high\" decoding=\"async\" width=\"800\" height=\"450\" src=\"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/01\/1_Ce8w96bwj_ExA2_A-HmH6w.gif\" alt=\"\" class=\"wp-image-2394\"\/><\/a><\/figure>\n\n\n\n<p>\u0130\u015flem ba\u015far\u0131l\u0131 g\u00f6r\u00fcn\u00fcyor! Bu makalemizde react \u00fczerinde basit bir login i\u015flemi ve session kontrol\u00fc nas\u0131l yap\u0131l\u0131r, bunu inceledik, bir sonraki makalede g\u00f6r\u00fc\u015fmek \u00fczere, kendinize iyi bak\u0131n.<\/p>\n","protected":false},"excerpt":{"rendered":"Merhaba, bu yaz\u0131mda basit bir uygulama ile react i\u00e7erisinde login mant\u0131\u011f\u0131 nas\u0131l kurgulan\u0131r, bunu anlataca\u011f\u0131m. Oturum a\u00e7ma ve&hellip;","protected":false},"author":1,"featured_media":2395,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"csco_page_header_type":"","csco_page_load_nextpost":"","csco_page_subscribe_form":"","csco_page_contact_form":"","footnotes":""},"categories":[128],"tags":[781,783,782],"class_list":{"0":"post-2393","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-react","8":"tag-react-js-login","9":"tag-react-kullanici-girisi","10":"tag-react-login","11":"cs-entry","12":"cs-video-wrap"},"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v20.5 (Yoast SEO v25.3.1) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>WebAPI - React Login Uygulamas\u0131 Yapal\u0131m - Kodlar\u0131n Gizemli D\u00fcnyas\u0131<\/title>\n<meta name=\"description\" content=\"Merhaba, bu yaz\u0131mda basit bir uygulama ile react i\u00e7erisinde login mant\u0131\u011f\u0131 nas\u0131l kurgulan\u0131r, bunu anlataca\u011f\u0131m.Oturum a\u00e7ma ve Kullan\u0131c\u0131 Profili ekranlar\u0131 olu\u015fturaca\u011f\u0131z.\u00a0 \u00d6rnek bir webapi \u00fczerinden i\u015flemlerimizi ger\u00e7ekle\u015ftirece\u011fiz.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/fatihsoysal.com\/blog\/webapi-react-login-uygulamasi-yapalim\/\" \/>\n<meta property=\"og:locale\" content=\"tr_TR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"WebAPI - React Login Uygulamas\u0131 Yapal\u0131m\" \/>\n<meta property=\"og:description\" content=\"Merhaba, bu yaz\u0131mda basit bir uygulama ile react i\u00e7erisinde login mant\u0131\u011f\u0131 nas\u0131l kurgulan\u0131r, bunu anlataca\u011f\u0131m.Oturum a\u00e7ma ve Kullan\u0131c\u0131 Profili ekranlar\u0131 olu\u015fturaca\u011f\u0131z.\u00a0 \u00d6rnek bir webapi \u00fczerinden i\u015flemlerimizi ger\u00e7ekle\u015ftirece\u011fiz.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/fatihsoysal.com\/blog\/webapi-react-login-uygulamasi-yapalim\/\" \/>\n<meta property=\"og:site_name\" content=\"Kodlar\u0131n Gizemli D\u00fcnyas\u0131\" \/>\n<meta property=\"article:published_time\" content=\"2024-01-26T09:37:43+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-01-26T09:44:26+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/01\/11-Actionable-Tips-to-Design-the-Best-Login-Page.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1280\" \/>\n\t<meta property=\"og:image:height\" content=\"851\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Fatih Soysal\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Yazan:\" \/>\n\t<meta name=\"twitter:data1\" content=\"Fatih Soysal\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tahmini okuma s\u00fcresi\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 dakika\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/webapi-react-login-uygulamasi-yapalim\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/webapi-react-login-uygulamasi-yapalim\/\"},\"author\":{\"name\":\"Fatih Soysal\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"headline\":\"WebAPI &#8211; React Login Uygulamas\u0131 Yapal\u0131m\",\"datePublished\":\"2024-01-26T09:37:43+00:00\",\"dateModified\":\"2024-01-26T09:44:26+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/webapi-react-login-uygulamasi-yapalim\/\"},\"wordCount\":284,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"image\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/webapi-react-login-uygulamasi-yapalim\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/01\/11-Actionable-Tips-to-Design-the-Best-Login-Page.png\",\"keywords\":[\"react js login\",\"react kullan\u0131c\u0131 giri\u015fi\",\"react login\"],\"articleSection\":[\"React\"],\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/webapi-react-login-uygulamasi-yapalim\/#respond\"]}],\"copyrightYear\":\"2024\",\"copyrightHolder\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/webapi-react-login-uygulamasi-yapalim\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/webapi-react-login-uygulamasi-yapalim\/\",\"name\":\"WebAPI - React Login Uygulamas\u0131 Yapal\u0131m - Kodlar\u0131n Gizemli D\u00fcnyas\u0131\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/webapi-react-login-uygulamasi-yapalim\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/webapi-react-login-uygulamasi-yapalim\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/01\/11-Actionable-Tips-to-Design-the-Best-Login-Page.png\",\"datePublished\":\"2024-01-26T09:37:43+00:00\",\"dateModified\":\"2024-01-26T09:44:26+00:00\",\"description\":\"Merhaba, bu yaz\u0131mda basit bir uygulama ile react i\u00e7erisinde login mant\u0131\u011f\u0131 nas\u0131l kurgulan\u0131r, bunu anlataca\u011f\u0131m.Oturum a\u00e7ma ve Kullan\u0131c\u0131 Profili ekranlar\u0131 olu\u015fturaca\u011f\u0131z.\u00a0 \u00d6rnek bir webapi \u00fczerinden i\u015flemlerimizi ger\u00e7ekle\u015ftirece\u011fiz.\",\"breadcrumb\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/webapi-react-login-uygulamasi-yapalim\/#breadcrumb\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/webapi-react-login-uygulamasi-yapalim\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"tr\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/webapi-react-login-uygulamasi-yapalim\/#primaryimage\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/01\/11-Actionable-Tips-to-Design-the-Best-Login-Page.png\",\"contentUrl\":\"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/01\/11-Actionable-Tips-to-Design-the-Best-Login-Page.png\",\"width\":1280,\"height\":851},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/webapi-react-login-uygulamasi-yapalim\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Anasayfa\",\"item\":\"https:\/\/fatihsoysal.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"WebAPI &#8211; React Login Uygulamas\u0131 Yapal\u0131m\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/\",\"name\":\"Fatihsoysal.com\",\"description\":\"Blog - Yaz\u0131l\u0131m D\u00fcnyas\u0131 Tecr\u00fcbelerim\",\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/fatihsoysal.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"tr\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\",\"name\":\"Fatih Soysal\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"tr\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png\",\"contentUrl\":\"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png\",\"width\":512,\"height\":512,\"caption\":\"Fatih Soysal\"},\"logo\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/\"},\"description\":\"Kullan\u0131m ve kodlama m\u00fckemmeliyetini odak alan uygulamalar olu\u015fturma deneyimine sahip, profesyonel olarak 15+ y\u0131l \u00fczeri deneyime sahip bir yaz\u0131l\u0131m m\u00fchendisi.\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/author\/fatihsoysal\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"WebAPI - React Login Uygulamas\u0131 Yapal\u0131m - Kodlar\u0131n Gizemli D\u00fcnyas\u0131","description":"Merhaba, bu yaz\u0131mda basit bir uygulama ile react i\u00e7erisinde login mant\u0131\u011f\u0131 nas\u0131l kurgulan\u0131r, bunu anlataca\u011f\u0131m.Oturum a\u00e7ma ve Kullan\u0131c\u0131 Profili ekranlar\u0131 olu\u015fturaca\u011f\u0131z.\u00a0 \u00d6rnek bir webapi \u00fczerinden i\u015flemlerimizi ger\u00e7ekle\u015ftirece\u011fiz.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/fatihsoysal.com\/blog\/webapi-react-login-uygulamasi-yapalim\/","og_locale":"tr_TR","og_type":"article","og_title":"WebAPI - React Login Uygulamas\u0131 Yapal\u0131m","og_description":"Merhaba, bu yaz\u0131mda basit bir uygulama ile react i\u00e7erisinde login mant\u0131\u011f\u0131 nas\u0131l kurgulan\u0131r, bunu anlataca\u011f\u0131m.Oturum a\u00e7ma ve Kullan\u0131c\u0131 Profili ekranlar\u0131 olu\u015fturaca\u011f\u0131z.\u00a0 \u00d6rnek bir webapi \u00fczerinden i\u015flemlerimizi ger\u00e7ekle\u015ftirece\u011fiz.","og_url":"https:\/\/fatihsoysal.com\/blog\/webapi-react-login-uygulamasi-yapalim\/","og_site_name":"Kodlar\u0131n Gizemli D\u00fcnyas\u0131","article_published_time":"2024-01-26T09:37:43+00:00","article_modified_time":"2024-01-26T09:44:26+00:00","og_image":[{"width":1280,"height":851,"url":"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/01\/11-Actionable-Tips-to-Design-the-Best-Login-Page.png","type":"image\/png"}],"author":"Fatih Soysal","twitter_card":"summary_large_image","twitter_misc":{"Yazan:":"Fatih Soysal","Tahmini okuma s\u00fcresi":"4 dakika"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/fatihsoysal.com\/blog\/webapi-react-login-uygulamasi-yapalim\/#article","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/webapi-react-login-uygulamasi-yapalim\/"},"author":{"name":"Fatih Soysal","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"headline":"WebAPI &#8211; React Login Uygulamas\u0131 Yapal\u0131m","datePublished":"2024-01-26T09:37:43+00:00","dateModified":"2024-01-26T09:44:26+00:00","mainEntityOfPage":{"@id":"https:\/\/fatihsoysal.com\/blog\/webapi-react-login-uygulamasi-yapalim\/"},"wordCount":284,"commentCount":0,"publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"image":{"@id":"https:\/\/fatihsoysal.com\/blog\/webapi-react-login-uygulamasi-yapalim\/#primaryimage"},"thumbnailUrl":"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/01\/11-Actionable-Tips-to-Design-the-Best-Login-Page.png","keywords":["react js login","react kullan\u0131c\u0131 giri\u015fi","react login"],"articleSection":["React"],"inLanguage":"tr","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/fatihsoysal.com\/blog\/webapi-react-login-uygulamasi-yapalim\/#respond"]}],"copyrightYear":"2024","copyrightHolder":{"@id":"https:\/\/fatihsoysal.com\/blog\/#organization"}},{"@type":"WebPage","@id":"https:\/\/fatihsoysal.com\/blog\/webapi-react-login-uygulamasi-yapalim\/","url":"https:\/\/fatihsoysal.com\/blog\/webapi-react-login-uygulamasi-yapalim\/","name":"WebAPI - React Login Uygulamas\u0131 Yapal\u0131m - Kodlar\u0131n Gizemli D\u00fcnyas\u0131","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/fatihsoysal.com\/blog\/webapi-react-login-uygulamasi-yapalim\/#primaryimage"},"image":{"@id":"https:\/\/fatihsoysal.com\/blog\/webapi-react-login-uygulamasi-yapalim\/#primaryimage"},"thumbnailUrl":"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/01\/11-Actionable-Tips-to-Design-the-Best-Login-Page.png","datePublished":"2024-01-26T09:37:43+00:00","dateModified":"2024-01-26T09:44:26+00:00","description":"Merhaba, bu yaz\u0131mda basit bir uygulama ile react i\u00e7erisinde login mant\u0131\u011f\u0131 nas\u0131l kurgulan\u0131r, bunu anlataca\u011f\u0131m.Oturum a\u00e7ma ve Kullan\u0131c\u0131 Profili ekranlar\u0131 olu\u015fturaca\u011f\u0131z.\u00a0 \u00d6rnek bir webapi \u00fczerinden i\u015flemlerimizi ger\u00e7ekle\u015ftirece\u011fiz.","breadcrumb":{"@id":"https:\/\/fatihsoysal.com\/blog\/webapi-react-login-uygulamasi-yapalim\/#breadcrumb"},"inLanguage":"tr","potentialAction":[{"@type":"ReadAction","target":["https:\/\/fatihsoysal.com\/blog\/webapi-react-login-uygulamasi-yapalim\/"]}]},{"@type":"ImageObject","inLanguage":"tr","@id":"https:\/\/fatihsoysal.com\/blog\/webapi-react-login-uygulamasi-yapalim\/#primaryimage","url":"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/01\/11-Actionable-Tips-to-Design-the-Best-Login-Page.png","contentUrl":"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/01\/11-Actionable-Tips-to-Design-the-Best-Login-Page.png","width":1280,"height":851},{"@type":"BreadcrumbList","@id":"https:\/\/fatihsoysal.com\/blog\/webapi-react-login-uygulamasi-yapalim\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Anasayfa","item":"https:\/\/fatihsoysal.com\/blog\/"},{"@type":"ListItem","position":2,"name":"WebAPI &#8211; React Login Uygulamas\u0131 Yapal\u0131m"}]},{"@type":"WebSite","@id":"https:\/\/fatihsoysal.com\/blog\/#website","url":"https:\/\/fatihsoysal.com\/blog\/","name":"Fatihsoysal.com","description":"Blog - Yaz\u0131l\u0131m D\u00fcnyas\u0131 Tecr\u00fcbelerim","publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/fatihsoysal.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"tr"},{"@type":["Person","Organization"],"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1","name":"Fatih Soysal","image":{"@type":"ImageObject","inLanguage":"tr","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png","contentUrl":"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png","width":512,"height":512,"caption":"Fatih Soysal"},"logo":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/"},"description":"Kullan\u0131m ve kodlama m\u00fckemmeliyetini odak alan uygulamalar olu\u015fturma deneyimine sahip, profesyonel olarak 15+ y\u0131l \u00fczeri deneyime sahip bir yaz\u0131l\u0131m m\u00fchendisi.","url":"https:\/\/fatihsoysal.com\/blog\/author\/fatihsoysal\/"}]}},"yoast_meta":{"yoast_wpseo_title":"","yoast_wpseo_metadesc":"","yoast_wpseo_canonical":""},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/2393","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/comments?post=2393"}],"version-history":[{"count":2,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/2393\/revisions"}],"predecessor-version":[{"id":2398,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/2393\/revisions\/2398"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/media\/2395"}],"wp:attachment":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/media?parent=2393"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/categories?post=2393"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/tags?post=2393"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}