{"id":10273,"date":"2025-01-22T02:45:13","date_gmt":"2025-01-21T23:45:13","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/bluesky-oauth2-client-sadece-javascript-ile\/"},"modified":"2025-01-22T02:45:13","modified_gmt":"2025-01-21T23:45:13","slug":"bluesky-oauth2-client-sadece-javascript-ile","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/bluesky-oauth2-client-sadece-javascript-ile\/","title":{"rendered":"Bluesky OAuth2 Client: Sadece JavaScript ile"},"content":{"rendered":"

<\/p>\n

Bluesky OAuth2 Client: Sadece JavaScript ile<\/p>\n

Merhaba! Bu yaz\u0131da, Bluesky platformuna Vanilla JavaScript kullanarak OAuth2 protokol\u00fc ile nas\u0131l ba\u011flanabilece\u011finizi ad\u0131m ad\u0131m g\u00f6sterece\u011fim. \u00d6ncelikle, Bluesky’nin sundu\u011fu g\u00fc\u00e7l\u00fc ve a\u00e7\u0131k kaynakl\u0131 sosyal medya deneyimini JavaScript ile entegre etmenin ne kadar kolay oldu\u011funu ke\u015ffedece\u011fiz. Bu rehber, hem yeni ba\u015flayanlar hem de deneyimli geli\u015ftiriciler i\u00e7in faydal\u0131 olacakt\u0131r.<\/p>\n

OAuth2 Ak\u0131\u015f\u0131 Anlamak<\/h2>\n

Ba\u015flamadan \u00f6nce, OAuth2’nin ne oldu\u011funu ve nas\u0131l \u00e7al\u0131\u015ft\u0131\u011f\u0131n\u0131 anlamak \u00f6nemlidir. K\u0131saca, OAuth2, bir kullan\u0131c\u0131n\u0131n bir \u00fc\u00e7\u00fcnc\u00fc parti uygulamas\u0131na kendi hesab\u0131na eri\u015fim izni vermesine olanak tan\u0131yan bir yetkilendirme protokol\u00fcd\u00fcr. Bu sayede, uygulama do\u011frudan kullan\u0131c\u0131 \u015fifresine ihtiya\u00e7 duymadan, kullan\u0131c\u0131 ad\u0131na i\u015flemler yapabilir. Bluesky ile entegre olmak i\u00e7in bu ak\u0131\u015f\u0131 do\u011fru bir \u015fekilde y\u00f6netmemiz gerekmektedir. Bu, g\u00fcvenli ve kullan\u0131c\u0131 dostu bir entegrasyon i\u00e7in \u00e7ok \u00f6nemlidir.<\/p>\n

Gerekli Ad\u0131mlar<\/h2>\n

\u0130lk ad\u0131m, Bluesky geli\u015ftirici konsolundan bir uygulama kayd\u0131 olu\u015fturmak olacakt\u0131r. Bu kay\u0131t s\u0131ras\u0131nda, uygulaman\u0131za ait bir Client ID ve Client Secret alacaks\u0131n\u0131z. Bu de\u011ferler, OAuth2 ak\u0131\u015f\u0131n\u0131 ba\u015flatmak ve tamamlamak i\u00e7in gereklidir. Ayr\u0131ca, uygulaman\u0131z\u0131n hangi kapsamlarda yetkiye sahip olaca\u011f\u0131n\u0131 belirlemeniz gerekmektedir. Daha sonra, bu kimlik bilgilerini JavaScript kodunuzda kullanacaks\u0131n\u0131z. Dolay\u0131s\u0131yla, bu de\u011ferleri g\u00fcvenli bir \u015fekilde saklaman\u0131z elzemdir.<\/p>\n

\u0130kinci olarak, kullan\u0131c\u0131y\u0131 Bluesky’nin yetkilendirme sunucusuna y\u00f6nlendirece\u011fiz. Burada, kullan\u0131c\u0131 uygulamaya eri\u015fim izni verip vermeyece\u011fine karar verecektir. \u0130zin verilirse, Bluesky bir yetkilendirme kodu geri d\u00f6nd\u00fcrecektir. Bu kod, eri\u015fim belirteci (access token) almak i\u00e7in kullan\u0131lacakt\u0131r. Bu i\u015flem, JavaScript’te fetch API’si veya benzeri y\u00f6ntemler kullan\u0131larak ger\u00e7ekle\u015ftirilebilir. \u00d6zetle, bu a\u015fama olduk\u00e7a kritiktir.<\/p>\n

Son olarak, eri\u015fim belirteci kullan\u0131larak Bluesky API’sine istekler g\u00f6nderilebilir ve veriler al\u0131nabilir. Bu veriler, uygulaman\u0131zda g\u00f6sterilebilir veya i\u015flenebilir. Bunun i\u00e7in, do\u011fru endpointleri ve HTTP y\u00f6ntemlerini kullanmak \u00f6nemlidir. Ayr\u0131ca, hata y\u00f6netimi ve g\u00fcvenlik \u00f6nlemlerini g\u00f6z ard\u0131 etmemek gerekmektedir.<\/p>\n

Kod \u00d6rne\u011fi<\/h2>\n
\n\/\/ Bu sadece \u00f6rnek bir kod olup, ger\u00e7ek uygulamada daha detayl\u0131 hata y\u00f6netimi ve g\u00fcvenlik \u00f6nlemleri gerekmektedir.\n\nconst clientId = \"YOUR_CLIENT_ID\";\nconst clientSecret = \"YOUR_CLIENT_SECRET\";\nconst redirectUri = \"YOUR_REDIRECT_URI\";\n\nconst authUrl = https:\/\/auth.bluesky.social\/oauth\/authorize?client_id=${clientId}&redirect_uri=${redirectUri}&response_type=code;\n\n\/\/ Kullan\u0131c\u0131y\u0131 yetkilendirme sayfas\u0131na y\u00f6nlendirme\nwindow.location.href = authUrl;\n\n\/\/ Yetkilendirme kodunu geri almak (redirectUri'da)\n\/\/ ... (Kod burada) ...\n\n\/\/ Eri\u015fim belirtecini almak\n\/\/ ... (Kod burada) ...\n\n\/\/ Bluesky API'sine istek g\u00f6ndermek\n\/\/ ... (Kod burada) ...\n<\/code><\/pre>\n
Yukar\u0131daki kod \u00f6rne\u011fi,  ana ad\u0131mlar\u0131 g\u00f6stermektedir.  Ancak,  ger\u00e7ek bir uygulama i\u00e7in daha detayl\u0131 hata y\u00f6netimi, g\u00fcvenlik \u00f6nlemleri ve kullan\u0131c\u0131 deneyimi geli\u015ftirmeleri eklemeniz gerekecektir.  Bu konuda,  Bluesky’nin resmi belgelerine ve API referanslar\u0131na bakman\u0131z\u0131 \u00f6neririm.<\/p>\n
Sonu\u00e7<\/h2>\n
Bu makalede,  Vanilla JavaScript kullanarak Bluesky’ye OAuth2 ile nas\u0131l ba\u011flanaca\u011f\u0131n\u0131z\u0131 anlatt\u0131m.  Umar\u0131m bu rehber size yard\u0131mc\u0131 olmu\u015ftur.  Daha fazla bilgi ve destek i\u00e7in fatihsoysal.com<\/a> adresini ziyaret edebilir veya Bluesky’nin resmi belgelerine g\u00f6z atabilirsiniz.  Unutmay\u0131n ki,  g\u00fcvenlik her \u015feyden \u00f6nemlidir.  Kodunuzu g\u00fcvenli bir \u015fekilde yazmaya ve kullan\u0131c\u0131 verilerini korumaya \u00f6zen g\u00f6sterin.<\/p>\n
Faydal\u0131 bulabilece\u011finiz baz\u0131 kaynaklar:<\/p>\n