OAuth 2.0, üçüncü taraf uygulamaların web uygulamalarındaki verilere güvenli bir şekilde erişmesine izin veren bir standarttır. Facebook, Google ve GitHub gibi diğer web uygulamalarında barındırılan profil bilgileri, programlar vb. dahil olmak üzere verileri almak için kullanabilirsiniz. Bir hizmet, kimlik bilgilerini üçüncü taraf uygulamasına ifşa etmeden kullanıcı adına bunu yapabilir.
Birkaç adımda OAuth sağlayıcısı olarak GitHub’ı kullanarak bir Express uygulamasında OAuth’u nasıl uygulayacağınızı öğrenin.
OAuth Akışı
Tipik bir OAuth akışında siteniz, kullanıcılara GitHub veya Facebook gibi bir sağlayıcıdan üçüncü taraf hesaplarıyla oturum açma seçeneği sunar. Bir kullanıcı, ilgili OAuth oturum açma düğmesine tıklayarak bu işlemi başlatabilir.
Bu, onları uygulamanızdan OAuth sağlayıcısının web sitesine yönlendirir ve onlara bir onay formu sunar. Onay formu, kullanıcının e-postaları, resimleri, programları vb. olabilecek, erişmek istediğiniz tüm bilgileri içerir.
Kullanıcı başvurunuzu yetkilendirirse, üçüncü taraf onları bir kodla uygulamanıza geri yönlendirecektir. Uygulamanız daha sonra alınan kodu, daha sonra mevcut kullanıcı verilerine erişmek için kullanabileceği bir erişim belirteci ile değiştirebilir.
Bu akışı bir Express uygulamasında uygulamak birkaç adımı içerir.
1. Adım: Geliştirme Ortamını Kurma
Öncelikle boş bir proje dizini oluşturun ve oluşturulan dizine cd atın.
Örneğin:
mkdir github-app
cd github-app
Ardından, projenizde npm’yi çalıştırarak başlatın:
npm init -y
Bu komut, projeniz hakkında ad, sürüm vb. ayrıntıları içeren bir package.json dosyası oluşturur.
Bu öğretici, ES6 modül sisteminin kullanımını içerecektir. Bunu, package.json dosyanızı açıp JSON nesnesinde ” type”: “module” belirterek ayarlayın.
Adım 2: Bağımlılıkları Yükleme
Sunucunuzun düzgün çalışması için birkaç bağımlılık yüklemeniz gerekecek:
- ExpressJS: ExpressJS, web ve mobil uygulamalar için sağlam bir dizi özellik sağlayan bir NodeJS çerçevesidir. Express’i kullanmak, sunucu oluşturma sürecinizi basitleştirecektir.
- Axios: Axios, söz tabanlı bir HTTP istemcisidir. GitHub’a erişim belirteci için POST isteği yapmak üzere bu pakete ihtiyacınız olacak.
- dotenv: dotenv, ortam değişkenlerini bir .env dosyasından process.env nesnesine yükleyen bir pakettir. Başvurunuzla ilgili önemli bilgileri gizlemek için buna ihtiyacınız olacak.
Bunları çalıştırarak kurun:
npm install express axios dotenv
3. Adım: Ekspres Uygulama Oluşturma
OAuth sağlayıcısını işlemek ve istekte bulunmak için temel bir Express sunucusu oluşturmanız gerekir .
Öncelikle, projenizin kök dizininde aşağıdakileri içeren bir index.js dosyası oluşturun:
// index.js
import express from “express”;
import axios from “axios”;
import * as dotenv from “dotenv”;
dotenv.config();
const app = express();
const port = process.env.PORT || 3000
app.listen(port, () => {
console.log(`App is running on port ${port}`);
});
Bu kod, ekspres kitaplığı içe aktarır, bir ekspres örneği başlatır ve 3000 numaralı bağlantı noktasında trafiği dinlemeye başlar .
4. Adım: Rota İşleyicileri Oluşturma
OAuth akışını işlemek için iki rota işleyicisi oluşturmanız gerekecek. İlki, kullanıcıyı GitHub’a yönlendirir ve yetki ister. İkincisi, uygulamanıza geri yönlendirmeyi işler ve bir kullanıcı uygulamanızı yetkilendirdiğinde erişim belirteci için istekte bulunur.
İlk rota işleyicisi, kullanıcıyı https :// github’a yönlendirmelidir . com / oturum aç / yetkilendir / yetkilendir ? parametreler .
Aşağıdakileri içeren bir dizi gerekli parametreyi GitHub’ın OAuth URL’sine iletmeniz gerekir:
İstemci Kimliği: Bu, OAuth uygulamanızın GitHub’a kaydolduğunda aldığı kimliği ifade eder.
Kapsam: Bu, bir OAuth uygulamasının bir kullanıcının bilgilerine sahip olduğu erişim miktarını belirten bir dizeyi ifade eder. Kullanılabilir kapsamların bir listesini GitHub’ın OAuth belgelerinde bulabilirsiniz . Burada , bir kullanıcının profil verilerini okumak için erişim sağlayan bir ” read:user ” kapsamı kullanacaksınız.
index.js dosyanıza aşağıdaki kodu ekleyin :
// index.js
app.get(“/auth”, (req, res) => {
// Store parameters in an object
const params = {
scope: “read:user”,
client_id: process.env.CLIENT_ID,
};
// Convert parameters to a URL-encoded string
const urlEncodedParams = new URLSearchParams(params).toString();
res.redirect(`https://github.com/login/oauth/authorize?${urlEncodedParams}`);
});
Bu kod, ilk rota işleyicisini uygular. Gerekli parametreleri, URLSearchParams API’sini kullanarak URL kodlu bir formata dönüştürerek bir nesnede saklar. Daha sonra bu parametreleri GitHub’ın OAuth URL’sine ekler ve kullanıcıyı GitHub’ın izin sayfasına yönlendirir.
İkinci yol işleyicisi için index.js dosyanıza aşağıdaki kodu ekleyin :
// index.js
app.get(“/github-callback”, (req, res) => {
const { code } = req.query;
const body = {
client_id: process.env.CLIENT_ID,
client_secret: process.env.CLIENT_SECRET,
code,
};
let accessToken;
const options = { headers: { accept: “application/json” } };
axios
.post(“https://github.com/login/oauth/access_token”, body, options)
.then((response) => response.data.access_token)
.then((token) => {
accessToken = token;
res.redirect(`/?token=${token}`);
})
.catch((err) => res.status(500).json({ err: err.message }));
});
İkinci yol işleyici, GitHub’dan döndürülen kodu req.query nesnesinde ayıklayacaktır. Daha sonra Axios’u kullanarak client_id ve client_secret koduyla ” https :// github .com / login / oauth / access _ token ” için bir POST isteği yapar .
client_secret , bir GitHub OAuth uygulaması oluşturduğunuzda oluşturacağınız özel bir dizedir . Access_token başarıyla getirildiğinde, daha sonra kullanılmak üzere bir değişkene kaydedilir. Kullanıcı en sonunda access_token ile uygulamanıza yönlendirilir .
Adım 5: GitHub Uygulaması Oluşturma
Ardından, GitHub’da bir OAuth uygulaması oluşturmanız gerekecek.
Önce GitHub hesabınıza giriş yapın, ardından Ayarlar’a gidin , aşağı kaydırarak Geliştirici ayarları’na gidin ve OAuth Uygulamaları’nı seçin . Son olarak, “ Yeni bir başvuru kaydet ” seçeneğine tıklayın .
GitHub size şuna benzer yeni bir OAuth başvuru formu sağlayacaktır:
GitHub OAuth Kaydı
Gerekli alanları istediğiniz ayrıntılarla doldurun. “ Ana Sayfa URL’si ” “ http :// localhost : 3000 ” olmalıdır. ” Yetkilendirme geri arama URL’niz “, ” http :// localhost : 3000 / github – geri arama ” olmalıdır. Ayrıca, isteğe bağlı olarak cihaz akışını etkinleştirerek kullanıcıları bir CLI aracı veya Git kimlik bilgisi yöneticisi gibi başsız bir uygulama için yetkilendirmenize olanak tanır.
Cihaz akışı genel beta sürümündedir ve değişikliğe tabidir.
Son olarak, Başvuruyu kaydet düğmesine basın.
GitHub sizi client_id’nizin ve client_secret’inizi oluşturma seçeneğinin bulunduğu bir sayfaya yönlendirecektir . client_id’nizi kopyalayın, client_secret’inizi oluşturun ve onu da kopyalayın.
Bir .env dosyası oluşturun ve client_id ile client_secret’i bunun içinde saklayın . Bu değişkenleri sırasıyla CLIENT_ID ve CLIENT_SECRET olarak adlandırın.
OAuth akışınız artık tamamlandı ve artık kullanıcı verilerini ( daha önce belirttiğiniz kapsam ) okumak için erişim belirteciyle istekte bulunabilirsiniz .
OAuth 2.0’ın Önemi
Uygulamanızda OAuth 2.0’ı kullanmak, bir kimlik doğrulama akışı uygulama görevini büyük ölçüde basitleştirir. Güvenli Yuva Katmanı (SSL) standardını kullanarak müşterilerinizin kullanıcı verilerini korur ve gizli kalmalarını sağlar.