OAuth 2.0, üçüncü taraf uygulamaların web uygulamalarından gelen verilere güvenli bir şekilde erişmesini sağlayan bir standarttır. Profil bilgileri, programlar vb. dahil olmak üzere verileri almak için kullanabilirsiniz. Facebook, Google ve GitHub gibi diğer web uygulamalarında barındırılıyor. Bir hizmet, kimlik bilgilerini üçüncü taraf uygulamaya göstermeden bunu bir kullanıcı adına 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 giriş yapma seçeneği sunar. Bir kullanıcı, ilgili OAuth oturum açma düğmesini 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. İzin formu, kullanıcıdan erişmek istediğiniz, e-postaları, resimleri, programları vb. olabilecek tüm bilgileri içerir.

Kullanıcı uygulamanıza yetki verirse, üçüncü taraf onları bir kodla uygulamanıza geri yönlendirecektir. Uygulamanız daha sonra alınan kodu, mevcut kullanıcı verilerine erişmek için kullanabileceği bir erişim belirteci ile değiştirebilir.

instagram viewer

Bu akışı bir Express uygulamasında uygulamak birkaç adımı içerir.

1. Adım: Geliştirme Ortamını Ayarlama

Önce boş bir proje dizini oluşturun ve CD oluşturulan dizine.

Örneğin:

mkdir github uygulaması
CD github uygulaması

Ardından, aşağıdakileri çalıştırarak projenizde npm'yi başlatın:

npm başlangıç ​​-y

Bu komut bir paket.json projenizle ilgili ad, sürüm vb. ayrıntıları içeren dosya.

Bu öğretici, ES6 modül sisteminin kullanımını içerecektir. Açarak bunu ayarlayın paket.json dosya ve belirterek "type": "modül" JSON nesnesinde.

2. Adım: 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öze dayalı bir HTTP istemcisidir. GitHub'a erişim belirteci için POST isteğinde bulunmak için 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 yükleyin:

npm Yüklemek eksenleri ifade et dotenv

3. Adım: Bir Ekspres Uygulama Oluşturma

Gerek temel bir Express sunucusu oluşturun işlemek ve OAuth sağlayıcısına istekte bulunmak için.

İlk olarak, bir index.js projenizin kök dizininde aşağıdakileri içeren dosya:

// index.js
içe aktarmak ifade etmek itibaren "ifade etmek";
içe aktarmak aksiyolar itibaren "aksiyolar";
içe aktarmak * olarak dotenv itibaren "dotenv";
dotenv.config();
const uygulama = ekspres();
const bağlantı noktası = işlem.env. LİMAN || 3000
app.listen (bağlantı noktası, () => {
konsol.kayıt(`Uygulama bağlantı noktasında çalışıyor ${port}`);
});

Bu kod ekspres kitaplığı içe aktarır, ekspres bir örneği başlatır ve bağlantı noktasındaki trafiği dinlemeye başlar 3000.

Adım 4: Rota İşleyicileri Oluşturma

OAuth akışını işlemek için iki rota işleyici oluşturmanız gerekir. İlki, kullanıcıyı GitHub'a yönlendirir ve yetkilendirme ister. İkincisi, uygulamanıza yönlendirmeyi işler ve bir kullanıcı uygulamanızı yetkilendirdiğinde erişim belirteci için istekte bulunur.

İlk rota işleyici, kullanıcıyı https://github.com/login/oauth/authorize? parametreler.

GitHub'ın OAuth URL'sine aşağıdakileri içeren bir dizi gerekli parametre 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 erişim miktarını belirten bir dizeyi ifade eder. Kullanılabilir kapsamların bir listesini şurada bulabilirsiniz: GitHub'ın OAuth belgeleri. Burada bir “oku: kullanıcı” bir kullanıcının profil verilerini okumak için erişim sağlayan kapsam.

Aşağıdaki kodu dosyanıza ekleyin index.js dosya:

// index.js
app.get("/auth", (gereklilik, öz) => {
// Parametreleri bir nesnede sakla
const parametreler = {
 dürbün: "oku: kullanıcı",
Müşteri Kimliği: işlem.env.MÜŞTERİ KİMLİĞİ,
 };
// Parametreleri URL kodlu bir dizeye dönüştürün
const urlEncodedParams = yeni URLSearchParams (params).toString();
 res.yönlendirme(` https://github.com/login/oauth/authorize?${urlEncodedParams}`);
});

Bu kod, ilk rota işleyicisini uygular. Gerekli parametreleri bir nesnede saklar ve bunları URLSearchParams API'sini kullanarak URL kodlu bir biçime dönüştürür. Ardından bu parametreleri GitHub'ın OAuth URL'sine ekler ve kullanıcıyı GitHub'ın izin sayfasına yönlendirir.

Aşağıdaki kodu dosyanıza ekleyin index.js ikinci rota işleyicisi için dosya:

// index.js
app.get("/github-callback", (gereklilik, öz) => {
const { kod } = istek.sorgu;
const vücut = {
Müşteri Kimliği: işlem.env.MÜŞTERİ KİMLİĞİ,
client_secret: işlem.env.CLIENT_SECRET,
 kod,
 };


İzin Vermek erişim Simgesi;
 const options = { başlıklar: { kabul et: "uygulama/json" } };
aksiyolar
 .İleti("https://github.com/login/oauth/access_token", gövde, seçenekler)
 .then((yanıt) => yanıt.data.access_token)
 .then((belirteç) => {
 erişim Simgesi = simge;
 res.yönlendirme(`/? belirteç=${token}`);
 })
 .tutmak((hata) => res.status(500).json({ hata: err.message }));
});

İkinci rota işleyici, kod içinde GitHub'dan döndü istek.sorgu nesne. Daha sonra bir POST yapar kullanarak istek aksiyolar ile " https://github.com/login/oauth/access_token" kodu ile, Müşteri Kimliği, ve client_secret.

bu client_secret GitHub OAuth uygulaması oluşturduğunuzda oluşturacağınız özel bir dizedir. Ne zaman erişim_token başarıyla alınırsa, daha sonra kullanılmak üzere bir değişkene kaydedilir. Kullanıcı sonunda, uygulamanıza yönlendirilir. erişim_token.

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şağı kaydır Geliştirici ayarlarıve seçin OAuth Uygulamaları. Son olarak, “Yeni bir uygulama kaydedin.”

GitHub size aşağıdaki gibi yeni bir OAuth başvuru formu sağlayacaktır:

Gerekli alanları istediğiniz ayrıntılarla doldurun. “Ana sayfa URL'si" olmalı " http://localhost: 3000”. Senin "Yetkilendirme geri arama URL'si" olmalı " http://localhost: 3000/github-geri arama”. Ayrıca isteğe bağlı olarak cihaz akışını etkinleştirebilir ve kullanıcıları, örneğin aşağıdakiler gibi başsız bir uygulama için yetkilendirmenize olanak tanır bir CLI aracı veya Git kimlik bilgisi yöneticisi.

Cihaz akışı genel beta sürümündedir ve değişebilir.

Sonunda, vur Başvuruyu kaydet buton.

GitHub sizi bilgilerinizle bir sayfaya yönlendirecektir. Müşteri Kimliği ve sizinkini oluşturmak için bir seçenek client_secret. seninkini kopyala Müşteri Kimliği, senin oluştur client_secret, ve onu da kopyalayın.

Bir .env dosyası oluşturun ve saklamak Müşteri Kimliği ve client_secret içinde. 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 erişim belirteciyle kullanıcı verilerini okumak için istekte bulunabilirsiniz ( dürbün daha önce belirtmişsiniz).

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.