<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>MySQL &#8211; Gökhan Doğru</title>
	<atom:link href="https://www.gokhandogru.net/category/mysql/feed/" rel="self" type="application/rss+xml" />
	<link>https://www.gokhandogru.net</link>
	<description>Sadece yazılımcıyım, format atmayı bilmiyorum.</description>
	<lastBuildDate>Mon, 25 Jan 2021 11:42:40 +0000</lastBuildDate>
	<language>tr</language>
	<sy:updatePeriod>
	hourly	</sy:updatePeriod>
	<sy:updateFrequency>
	1	</sy:updateFrequency>
	<generator>https://wordpress.org/?v=6.0.5</generator>

<image>
	<url>https://www.gokhandogru.net/wp-content/uploads/2019/12/cropped-Başlıksız-1-1-32x32.png</url>
	<title>MySQL &#8211; Gökhan Doğru</title>
	<link>https://www.gokhandogru.net</link>
	<width>32</width>
	<height>32</height>
</image> 
	<item>
		<title>JWT Login&#038;Register Panel &#124; Node.JS &#038; MySQL</title>
		<link>https://www.gokhandogru.net/jwt-loginregister-panel-node-js-mysql/</link>
					<comments>https://www.gokhandogru.net/jwt-loginregister-panel-node-js-mysql/#respond</comments>
		
		<dc:creator><![CDATA[Gökhan Doğru]]></dc:creator>
		<pubDate>Sat, 16 Jan 2021 02:23:08 +0000</pubDate>
				<category><![CDATA[MySQL]]></category>
		<category><![CDATA[NodeJS]]></category>
		<category><![CDATA[jwt login]]></category>
		<category><![CDATA[jwt node js türkçe]]></category>
		<category><![CDATA[mysql node js jwt connect]]></category>
		<category><![CDATA[mysql node js register]]></category>
		<category><![CDATA[node js jwt ile giriş]]></category>
		<category><![CDATA[node js jwt login register]]></category>
		<category><![CDATA[node js mysql]]></category>
		<category><![CDATA[node js mysql login]]></category>
		<category><![CDATA[node js token code login]]></category>
		<guid isPermaLink="false">https://www.gokhandogru.net/?p=595</guid>

					<description><![CDATA[JWT Login&#038;Register Panel &#124; Node.JS &#038; MySQL]]></description>
										<content:encoded><![CDATA[
<p>Herkese selamlar arkadaşlar, uzun zamandır hem iş gereği hem de kişisel projelerimden ötürü .net etkisinden bir türlü çıkamadığımı fark ettim. Daha önce ki yıllarda .Net dışında Php, Node.JS, ve Swift ile (*web ve mobil alanlarda) geliştirdiğim projeleri hem unutmamak hem de sizlere bir şeyler öğretmek için tekrar ele alacağım.<br /><br />Şimdi senaryomuza bakacak olursak.. JWT,MySQL ile <strong>giriş ve kayıt olmayı </strong>en basit şekilde kurgulayalım.</p>



<figure class="wp-block-image size-large is-resized"><img class="wp-image-597" src="https://www.gokhandogru.net/wp-content/uploads/2021/01/Basliksiz-2.png" alt="" width="891" height="445" srcset="https://www.gokhandogru.net/wp-content/uploads/2021/01/Basliksiz-2.png 895w, https://www.gokhandogru.net/wp-content/uploads/2021/01/Basliksiz-2-300x150.png 300w, https://www.gokhandogru.net/wp-content/uploads/2021/01/Basliksiz-2-768x384.png 768w" sizes="(max-width: 891px) 100vw, 891px" /></figure>



<p>Node.JS işlerimize başlamadan önce MySQL serverimiz de &#8220;NodeLoginDB&#8221; adında bir database oluşturalım.</p>



<p><script src="https://gist.github.com/dgokhan/7456bd1ae968e3ea58f32a461e22702a.js"></script></p>



<figure class="wp-block-image size-large"><img loading="lazy" width="991" height="228" class="wp-image-602" src="https://www.gokhandogru.net/wp-content/uploads/2021/01/image-1.png" alt="" srcset="https://www.gokhandogru.net/wp-content/uploads/2021/01/image-1.png 991w, https://www.gokhandogru.net/wp-content/uploads/2021/01/image-1-300x69.png 300w, https://www.gokhandogru.net/wp-content/uploads/2021/01/image-1-768x177.png 768w" sizes="(max-width: 991px) 100vw, 991px" /></figure>



<p>Veritabanımızı başarılı bir şekilde oluşturduktan sonra Node.JS&#8217;e geri dönüp hemen terminalden veya bash&#8217;den gereken paketleri kuralım:)</p>



<ul>
<li><strong>Terminal </strong>veya <strong>bash </strong>&gt;
<ul>
<li>npm install <strong>hbs</strong></li>
<li>npm install <strong>bcryptjs</strong></li>
<li>npm install <strong>cookie-parser</strong></li>
<li>npm install <strong>dotenv</strong></li>
<li>npm install <strong>jsonwebtoken</strong></li>
<li>npm install <strong>mysql</strong></li>
<li>npm install <strong>-g nodemon</strong></li>
</ul>
</li>
</ul>



<p>Ana dizine <strong>app.js</strong> adında bir script oluşturup kurduğumuz paketlerin gerekli bir kısımını Importlamaya başlıyalım:)</p>



<p><script src="https://gist.github.com/dgokhan/a667f10688ae3827c32a4f4ad22a5127.js"></script></p>



<p><strong>CSS</strong>, <strong>JS </strong>ve <strong>Images </strong>dosyalarımızı projemizin <strong>assets </strong>klasörüne dahil etmeyi de unutmayalım:)</p>

<p><script src="https://gist.github.com/dgokhan/66a9b25dbb7e45f39edc9bd86d82e6ff.js"></script></p>

<p>Projemizin <strong>view </strong>katmanını <strong>Handlebars (.hbs) </strong>ile yapacağımız için view engine&#8217;miz de belirtiyoruz ve ana dizine views adında bir klasör oluşturuyoruz.</p>

<p><script src="https://gist.github.com/dgokhan/af8c61dae05a2cfd024071326f9d414c.js"></script></p>

<p><strong>Cookies </strong>ve <strong>json </strong>işlemleri için klasik encodedleri de app.use ile ekliyoruz.</p>

<p><script src="https://gist.github.com/dgokhan/b9c1535cfadd56cfc38c34e2505eb2b1.js"></script></p>

<p><strong>Routes </strong>ayarları yapmak için ana dizine <strong>Routes </strong>adında bir klasör oluşturalım ve içine<strong> auth.js</strong> atında bir script oluşturalım.</p>

<p><script src="https://gist.github.com/dgokhan/3208adaaf77ba7b2a0a758005ad2c221.js"></script></p>

<p>Bütün işlemleri yaptıktan sonra <strong>app.js</strong> scriptimiz bu şekilde olacaktır.</p>



<p><script src="https://gist.github.com/dgokhan/63737fc1dee00aaa396ea0309238a280.js"></script></p>



<p>Burada routing mantığını iyice kavramanız gerekiyor, yanlış bir routing yaparsanız &lt;form action=&#8221;&#8230;&#8221;&gt; veya herhangi bir yönlendirme de yanlış adrese gider durursunuz o yüzden app.js bittikten sonra iyice kodları okuyup, bu kod nasıl işliyor/nasıl yönleniyor diye bakmanızda fayda var 🙂</p>



<figure class="wp-block-image size-large is-resized"><img loading="lazy" src="https://memegenerator.net/img/instances/75948564.jpg" alt="" width="765" height="437" /></figure>



<figure class="wp-block-image size-large"><img loading="lazy" width="895" height="447" class="wp-image-605" src="https://www.gokhandogru.net/wp-content/uploads/2021/01/nodejsloginrouting.png" alt="" srcset="https://www.gokhandogru.net/wp-content/uploads/2021/01/nodejsloginrouting.png 895w, https://www.gokhandogru.net/wp-content/uploads/2021/01/nodejsloginrouting-300x150.png 300w, https://www.gokhandogru.net/wp-content/uploads/2021/01/nodejsloginrouting-768x384.png 768w" sizes="(max-width: 895px) 100vw, 895px" /></figure>



<p>Şimdi sitemize <strong>../auth</strong> olarak gelen requestleri yönlendirmek için ana dizine <strong>routes </strong>klasörünü açıp<strong> auth.js</strong> scriptini oluşturalım.</p>

<p><script src="https://gist.github.com/dgokhan/38b937497363d002543d4b2ae2f54623.js"></script></p>

<p>Eveeett routing,asset vb ayarlamaları yaptıktan sonra şimdi sıra geldi <strong>MySQL</strong>&#8216;e bağlanmamıza&#8230;</p>



<p>Ana dizinimize<strong> .env </strong>adında bir settings dosyası oluşturalım ve database bilgilerimizi yazalım.</p>

<p><script src="https://gist.github.com/dgokhan/d0464938424d93565ffd3812b057900b.js"></script></p>

<p><strong>routes/auth.js</strong>&#8216;den gelen <strong>../login</strong> ve<strong> ../register</strong> requestleri yönlendirecek olan <strong>controllers </strong>klasörü açıp, içine<strong> auth.js</strong> scriptini oluşturalım.</p>

<p><script src="https://gist.github.com/dgokhan/ab5198d43c07ed6acade0e1fff44fdfe.js"></script></p>

<p>Şimdi MySQL bağlantısını kontrol edebilmek için &#8221; npm run start &#8221; yazarak localhost&#8217;u hayata kaldırıyorum..</p>



<figure class="wp-block-image size-large"><img src="https://media4.giphy.com/media/lVF1IzSO16ZH2/200.gif" alt="" /></figure>



<p>Leeeeeeeetttsss goo&#8230;</p>



<figure class="wp-block-image size-large"><img loading="lazy" width="839" height="319" class="wp-image-611" src="https://www.gokhandogru.net/wp-content/uploads/2021/01/image-3.png" alt="" srcset="https://www.gokhandogru.net/wp-content/uploads/2021/01/image-3.png 839w, https://www.gokhandogru.net/wp-content/uploads/2021/01/image-3-300x114.png 300w, https://www.gokhandogru.net/wp-content/uploads/2021/01/image-3-768x292.png 768w" sizes="(max-width: 839px) 100vw, 839px" /></figure>



<p>Evet projemiz başarıyla <strong>MySQL&#8217;e </strong>bağlandığını görüyoruz:) Şimdi github&#8217;da paylaştığım tasarımı projemize dahil ediyoruz eğer sizin beğendiğiniz bir login&amp;register page var ise onu projenize ekleyebilirsiniz. <strong>*NOT*</strong> Kendi tasarımınızı kullanacak iseniz <strong>&lt;form action=&#8221;/auth/login&#8221; method=&#8221;POST&#8221;&gt;</strong> bölümünü eklemeyi unutmayınız. <br /><br /><strong>Label Admin Template Source;</strong></p>



<ul>
<li><strong>assets </strong>: <a href="https://github.com/dgokhan/NodeJS-LabelAdminPanel/tree/main/assets" target="_blank" rel="noreferrer noopener">https://github.com/dgokhan/NodeJS-LabelAdminPanel/tree/main/assets</a></li>
<li><strong>views </strong>: <a href="https://github.com/dgokhan/NodeJS-LabelAdminPanel/tree/main/views" target="_blank" rel="noreferrer noopener">https://github.com/dgokhan/NodeJS-LabelAdminPanel/tree/main/views</a></li>
</ul>



<p>Githubda ki assets klasörünü ve views .hbs&#8217;leri indirip projeye dahil ettiğimize göre sıra <strong>auth.js</strong>&#8216;e kayıt olma ve giriş yapma methodlarını eklemeye geldi..</p>



<p>&nbsp;</p>



<p><strong>#Register</strong></p>

<p><script src="https://gist.github.com/dgokhan/59b77f1c83de5c270eedeecbaeae9069.js"></script></p>

<p>Kayıt olma bölümünde ilk önce kullanıcının bize gönderdiği kullanıcı adı ile veritabanında arama yapıyoruz. Eğer o kullanıcı adına sahip birisi var ise<strong> &#8216;That username is already in use&#8217;</strong> bilgisini dönüyoruz eğer böyle bir kullanıcı yok ise kullanıcının şifresinin hashlenmiş halini veritabanına gönderip üye olmasını sağlıyoruz:)</p>



<p>Unutmayın.. ne olursa olsun hiçbir zaman database&#8217;ye görünür bir şekilde <strong>şifre kaydetmeyiz!</strong> Şirketlerin kendilerine göre yazdığı şifreleme ile veya MD5 gibi şifrelemeler ile şifrelenir. Bizde şifrelerimiz açık bir şekilde gözükmemesi için <strong>bcrypt </strong>ile şifremizi hashleyeceğiz. Böylelikle olası bir database saldırısı sonucunda verilerimiz çalınsa bile müşterilerimizin şifrelerini bulmalarını zorlaştıracağız..</p>



<p>&nbsp;</p>



<p>Yukarda bahsi geçen abimiz bu kadarcık bir kod 🙂</p>

<p><script src="https://gist.github.com/dgokhan/d6a9e9fd228be7417350641a1077ea1c.js"></script><br /><br /></p>

<p>#Login</p>

<p><script src="https://gist.github.com/dgokhan/cbc9748717ef57e90572b60196272754.js"></script></p>

<p>JWT ile ilgili kodlarımız;</p>



<p><script src="https://gist.github.com/dgokhan/be2476113357b7bd1f7b4f7757aa54eb.js"></script></p>



<p><strong>maxAge: 20000 </strong>bırakırsanız giriş yaptıktan 20 saniye sonra token ölecektir ve kullanıcıyı tekrar login sayfasına yönlendirecektir. Eğer tokenin 1saatte ölmesini istiyorsanız maxAge: 3600000 yapmanız gerekmektedir. (1saniye = 1000ms &#8216;den istediğiniz dakikayı ayarlayabilirsiniz.<strong> (1000*60)*dakika </strong>)</p>



<p>&nbsp;</p>



<p>Şimdi <strong>localhost:8000</strong>&#8216;i yenileyip <strong>localhost:8000/register</strong> sayfasına gidelim ve kayıt bilgilerimizi girelim:)</p>



<figure class="wp-block-image size-large is-resized is-style-rounded"><img loading="lazy" class="wp-image-616" src="https://www.gokhandogru.net/wp-content/uploads/2021/01/image-4.png" alt="" width="590" height="451" srcset="https://www.gokhandogru.net/wp-content/uploads/2021/01/image-4.png 778w, https://www.gokhandogru.net/wp-content/uploads/2021/01/image-4-300x229.png 300w, https://www.gokhandogru.net/wp-content/uploads/2021/01/image-4-768x587.png 768w" sizes="(max-width: 590px) 100vw, 590px" /></figure>



<p>Evet başarıyla kullanıcı kaydımızı olduk fakat bildirim yeşil yerine kırmızı bir uyarı gibi olmuş, bunlar hep hızlı kod yazayım derken copy&amp;paste hatalarınadn:).. neyse orayı makaleyi paylaşmadan hemen önce düzenlerim:p Bu arada gelin veritabanımıza bir bakalım:)</p>



<figure class="wp-block-image size-large is-resized"><img loading="lazy" class="wp-image-617 hoverZoomLink" src="https://www.gokhandogru.net/wp-content/uploads/2021/01/image-5-1024x135.png" alt="" width="1024" height="135" srcset="https://www.gokhandogru.net/wp-content/uploads/2021/01/image-5-1024x135.png 1024w, https://www.gokhandogru.net/wp-content/uploads/2021/01/image-5-300x40.png 300w, https://www.gokhandogru.net/wp-content/uploads/2021/01/image-5-768x101.png 768w, https://www.gokhandogru.net/wp-content/uploads/2021/01/image-5.png 1162w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>



<p>Kayıt olma başarılı &#x2714;&#xfe0f;bir de giriş yapmayı deneyelim bakalım..</p>



<figure class="wp-block-image size-large is-resized is-style-rounded"><img loading="lazy" class="wp-image-619" src="https://www.gokhandogru.net/wp-content/uploads/2021/01/image-7.png" alt="" width="564" height="466" srcset="https://www.gokhandogru.net/wp-content/uploads/2021/01/image-7.png 708w, https://www.gokhandogru.net/wp-content/uploads/2021/01/image-7-300x248.png 300w" sizes="(max-width: 564px) 100vw, 564px" /></figure>



<figure class="wp-block-image size-large is-style-default"><img loading="lazy" width="1024" height="337" class="wp-image-618 hoverZoomLink" src="https://www.gokhandogru.net/wp-content/uploads/2021/01/image-6-1024x337.png" alt="" srcset="https://www.gokhandogru.net/wp-content/uploads/2021/01/image-6-1024x337.png 1024w, https://www.gokhandogru.net/wp-content/uploads/2021/01/image-6-300x99.png 300w, https://www.gokhandogru.net/wp-content/uploads/2021/01/image-6-768x253.png 768w, https://www.gokhandogru.net/wp-content/uploads/2021/01/image-6-1536x506.png 1536w, https://www.gokhandogru.net/wp-content/uploads/2021/01/image-6.png 1589w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>



<figure class="wp-block-image size-large is-resized"><img loading="lazy" src="https://media3.giphy.com/media/l3q2LH45XElELRzRm/200.gif" alt="" width="479" height="325" /></figure>



<p>Şimdi database işlemlerimiz ve token oluşturmamız tamam geriye sadece siteye giriş yaptıktan sonra cookies&#8217;de ki token kodunu kontrol etmek kaldı..</p>



<p>Hemen <strong>routes/pages.js</strong>&#8216;e geri gelip <strong>verifyToken </strong>adında bir function açalım..</p>

<p><script src="https://gist.github.com/dgokhan/d9f6c25029da501244417549f1379907.js"></script></p>

<p>Ardından <strong>../ </strong>anasayfaya yapılan requestlere verifyToken yapıp tokeninin yaşayıp/yaşamadığını kontrol ettirelim.</p>

<p><script src="https://gist.github.com/dgokhan/70c63bef2fec1e8f4a7f86a54796ff83.js"></script></p>

<p>Eğer token <strong>yaşıyor ise</strong> kullanıcı hiç bir sorun yaşamadan sitede ki işlemlerini yapmaya devam edecektir. <br />Fakat token <strong>süresi biter ise </strong>kullanıcı direk giriş yapma ekranına yönlendirelecektir.<br /><br />Proje ağacımızın son hali;</p>



<figure class="wp-block-image size-large is-resized"><img loading="lazy" class="wp-image-620" src="https://www.gokhandogru.net/wp-content/uploads/2021/01/image-8.png" alt="" width="183" height="440" srcset="https://www.gokhandogru.net/wp-content/uploads/2021/01/image-8.png 246w, https://www.gokhandogru.net/wp-content/uploads/2021/01/image-8-125x300.png 125w" sizes="(max-width: 183px) 100vw, 183px" /></figure>



<p>Bu yazımızında sonuna geldik. Bu makalede NodeJS &amp; MySQL veritabınında ki kullanıcıyı JWT kontrolü ile giriş yapmayı ve veritabanına kaydolmayı anlatmaya çalıştım.<br />Eğer projelerden vakit bulabilrsem yakında NodeJS, Swift ve Xamarin dersleri de çıkarmaya çalışacağım.<br /><br />Sağlıkla ve yazılımla kalmanız dileğiyle, hamınızı öpürem. &#x1f1e6;&#x1f1ff; &#x1f1f9;&#x1f1f7; &#x1f5a5;&#xfe0f;</p>



<div class="wp-block-image">
<figure class="aligncenter size-large"><a href="https://github.com/dgokhan/NodeJS-LabelAdminPanel" target="_blank" rel="noopener"><img loading="lazy" width="358" height="135" class="wp-image-623" src="https://www.gokhandogru.net/wp-content/uploads/2021/01/logo_github.png" alt="" srcset="https://www.gokhandogru.net/wp-content/uploads/2021/01/logo_github.png 358w, https://www.gokhandogru.net/wp-content/uploads/2021/01/logo_github-300x113.png 300w" sizes="(max-width: 358px) 100vw, 358px" /></a></figure>
</div>



<div class="wp-block-image">
<figure class="aligncenter size-large is-resized"><a href="https://www.linkedin.com/in/g%C3%B6khan-do%C4%9Fru-2b0762158/" target="_blank" rel="noopener"><img loading="lazy" class="wp-image-624 hoverZoomLink" src="https://www.gokhandogru.net/wp-content/uploads/2021/01/1200px-LinkedIn_Logo_2013.svg_-1024x248.png" alt="" width="149" height="36" srcset="https://www.gokhandogru.net/wp-content/uploads/2021/01/1200px-LinkedIn_Logo_2013.svg_-1024x248.png 1024w, https://www.gokhandogru.net/wp-content/uploads/2021/01/1200px-LinkedIn_Logo_2013.svg_-300x73.png 300w, https://www.gokhandogru.net/wp-content/uploads/2021/01/1200px-LinkedIn_Logo_2013.svg_-768x186.png 768w, https://www.gokhandogru.net/wp-content/uploads/2021/01/1200px-LinkedIn_Logo_2013.svg_.png 1200w" sizes="(max-width: 149px) 100vw, 149px" /></a></figure>
</div>



<div class="wp-block-image">
<figure class="aligncenter size-large is-resized"><a href="https://www.instagram.com/dxgokhan/" target="_blank" rel="noopener"><img loading="lazy" class="wp-image-628 hoverZoomLink" src="https://www.gokhandogru.net/wp-content/uploads/2021/01/instagram-logo-1-1024x291.png" alt="" width="153" height="44" srcset="https://www.gokhandogru.net/wp-content/uploads/2021/01/instagram-logo-1-1024x291.png 1024w, https://www.gokhandogru.net/wp-content/uploads/2021/01/instagram-logo-1-300x85.png 300w, https://www.gokhandogru.net/wp-content/uploads/2021/01/instagram-logo-1-768x218.png 768w, https://www.gokhandogru.net/wp-content/uploads/2021/01/instagram-logo-1-1536x436.png 1536w, https://www.gokhandogru.net/wp-content/uploads/2021/01/instagram-logo-1-2048x581.png 2048w" sizes="(max-width: 153px) 100vw, 153px" /></a></figure>
</div>



<p>&nbsp;</p>

<div class="jfk-bubble gtx-bubble" style="visibility: visible; left: -453px; top: 1550px; opacity: 1;" role="alertdialog" aria-describedby="bubble-3">
<div id="bubble-3" class="jfk-bubble-content-id">
<div id="gtx-host" style="min-width: 200px; max-width: 400px;"> </div>
</div>
<div class="jfk-bubble-closebtn-id jfk-bubble-closebtn" tabindex="0" role="button" aria-label="Close"> </div>
<div class="jfk-bubble-arrow-id jfk-bubble-arrow jfk-bubble-arrowup" style="left: 226.5px;">
<div class="jfk-bubble-arrowimplbefore"> </div>
<div class="jfk-bubble-arrowimplafter"> </div>
</div>
</div>
<p><img id="hzDownscaled" style="position: absolute; top: -10000px;" /></p>
<p><img id="hzDownscaled" style="position: absolute; top: -10000px;" /><img id="hzDownscaled" style="position: absolute; top: -10000px;" /></p>
<div id="hzImg" style="border: 4px solid #ffffff; line-height: 0px; overflow: hidden; padding: 0px; margin: 4px; position: absolute; z-index: 2147483647; border-radius: 4px; box-shadow: rgba(0, 0, 0, 0.4) 0px 1px 3px; visibility: visible; opacity: 1; top: 6598px; left: 193px; cursor: pointer; pointer-events: none; width: auto; height: auto; background-color: #ffffff; display: none;"> </div>
<p><img id="hzDownscaled" style="position: absolute; top: -10000px;" /><img id="hzDownscaled" style="position: absolute; top: -10000px;" /></p>
<p><img id="hzDownscaled" style="position: absolute; top: -10000px;" /><img id="hzDownscaled" style="position: absolute; top: -10000px;" /></p>]]></content:encoded>
					
					<wfw:commentRss>https://www.gokhandogru.net/jwt-loginregister-panel-node-js-mysql/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
	</channel>
</rss>
