OAuth2, yetkilendirme için endüstri standardı protokolüdür. Kullanıcıların web ve masaüstü uygulamalarına kullanıcı adlarını, şifrelerini ve diğer özel kimlik bilgilerini paylaşmadan özel bilgilere erişim izni verebilecekleri bir mekanizma sağlar.
Bu eğitim, bir kullanıcının Google kişilerine Google People API'yi ve Chrome Identity API'yi kullanarak erişen bir uzantı oluşturur. Uzantılar HTTPS üzerinden yüklenmediğinden, yönlendirme gerçekleştiremediğinden veya çerez ayarlayamadığından OAuth2'yi kullanmak için Chrome Identity API'den yararlanır.
Başlayın
Bir dizin ve aşağıdaki başlangıç dosyalarını oluşturarak başlayın.
manifest.json
manifest.json adında bir dosya oluşturup aşağıdaki kodu ekleyerek manifest dosyasını ekleyin.
{
"name": "OAuth Tutorial FriendBlock",
"version": "1.0",
"description": "Uses OAuth to connect to Google's People API and display contacts photos.",
"manifest_version": 3,
"action": {
"default_title": "FriendBlock, friends face's in a block."
},
"background": {
"service_worker": "service-worker.js"
}
}
hizmet-çalışanı.js
service-worker.js adlı bir dosya oluşturup aşağıdaki kodu dahil ederek uzantı hizmet çalışanını ekleyin.
chrome.action.onClicked.addListener(function() {
chrome.tabs.create({url: 'index.html'});
});
index.html
index.html adlı bir HTML dosyası ekleyip aşağıdaki kodu ekleyin.
<html>
<head>
<title>FriendBlock</title>
<style>
button {
padding: 10px;
background-color: #3C79F8;
display: inline-block;
}
</style>
</head>
<body>
<button>FriendBlock Contacts</button>
<div id="friendDiv"></div>
</body>
</html>
Tutarlı bir uzantı kimliği kullanın
Geliştirme sırasında tek bir kimliğin korunması çok önemlidir. Tutarlı bir kimlik elde etmek için şu adımları uygulayın:
Uzantıyı geliştirici kontrol paneline yükle
Uzantı dizinini bir .zip dosyası olarak paketleyin ve yayınlamadan Chrome Geliştirici Kontrol Paneli'ne yükleyin:
- Geliştirici Kontrol Paneli'nde Yeni öğe ekle'yi tıklayın.
- Dosyalara göz at'ı tıklayın, uzantının zip dosyasını seçin ve yükleyin.
- Paket sekmesine gidin ve Ortak anahtarı görüntüle'yi tıklayın.
Pop-up açıldığında aşağıdaki adımları uygulayın:
-----BEGIN PUBLIC KEY-----ile-----END PUBLIC KEY-----tarihleri arasındaki kodu kopyalayın.- Tek satırlık metin yapmak için yeni satırları kaldırın.
Kodu "key" alanının altındaki manifest.json öğesine ekleyin.
Böylece, uzantı aynı kimliği kullanır.
{ // manifest.json
"manifest_version": 3,
...
"key": "ThisKeyIsGoingToBeVeryLong/go8GGC2u3UD9WI3MkmBgyiDPP2OreImEQhPvwpliioUMJmERZK3zPAx72z8MDvGp7Fx7ZlzuZpL4yyp4zXBI+MUhFGoqEh32oYnm4qkS4JpjWva5Ktn4YpAWxd4pSCVs8I4MZms20+yx5OlnlmWQEwQiiIwPPwG1e1jRw0Ak5duPpE3uysVGZXkGhC5FyOFM+oVXwc1kMqrrKnQiMJ3lgh59LjkX4z1cDNX3MomyUMJ+I+DaWC2VdHggB74BNANSd+zkPQeNKg3o7FetlDJya1bk8ofdNBARxHFMBtMXu/ONfCT3Q2kCY9gZDRktmNRiHG/1cXhkIcN1RWrbsCkwIDAQAB",
}
Kimlikleri karşılaştır
chrome://extensions adresindeki Uzantı Yönetimi sayfasını açın, Geliştirici modunun etkinleştirildiğinden emin olun ve paketlenmemiş uzantı dizinini yükleyin. Uzantı yönetimi sayfasındaki uzantı kimliğini, Geliştirici Kontrol Paneli'ndeki Öğe Kimliği ile karşılaştırın. Bunların eşleşmesi gerekir.
OAuth istemci kimliği oluşturun
Google API konsoluna gidin ve yeni bir proje oluşturun. Hazır olduğunda kenar çubuğundan Credentials'ı (Kimlik bilgileri) seçin, Create Authentication'ı (Kimlik bilgileri oluştur) tıklayın ve OAuth client ID'yi (OAuth istemci kimliği) seçin.
İstemci kimliği oluştur sayfasında Chrome Uzantısı'nı seçin. Uzantının adını doldurun ve Uygulama Kimliği alanında URL'nin sonuna uzantı kimliğini girin.
Oluştur'u tıklayarak işlemi tamamlayın. Konsolda bir OAuth istemci kimliği sağlanır.
OAuth'u manifest dosyasına kaydedin
Uzantı manifestine "oauth2" alanını ekleyin. Oluşturulan OAuth istemci kimliğini "client_id" altına yerleştirin. Şimdilik "scopes" öğesine boş bir dize ekleyin.
{
"name": "OAuth Tutorial FriendBlock",
...
"oauth2": {
"client_id": "yourExtensionOAuthClientIDWillGoHere.apps.googleusercontent.com",
"scopes":[""]
},
...
}
İlk OAuth akışını başlat
Manifest'te identity iznini kaydedin.
{
"name": "OAuth Tutorial FriendBlock",
...
"permissions": [
"identity"
],
...
}
OAuth akışını yönetmek için oauth.js adlı dosyayı oluşturup aşağıdaki kodu ekleyin.
window.onload = function() {
document.querySelector('button').addEventListener('click', function() {
chrome.identity.getAuthToken({interactive: true}, function(token) {
console.log(token);
});
});
};
oauth.js için index.html etiketinin başına bir komut dosyası etiketi yerleştirin.
...
<head>
<title>FriendBlock</title>
...
<script type="text/javascript" src="oauth.js"></script>
</head>
...
Uzantıyı yeniden yükleyin ve index.html uygulamasını açmak için tarayıcı simgesini tıklayın. Konsolu açın ve "FriendBlock Contacts" düğmesini tıklayın. Konsolda bir OAuth jetonu görünür.
Google People API'yi etkinleştirme
Google API konsoluna dönün ve kenar çubuğundan Kitaplık'ı seçin. "Google People API"yi arayın, doğru sonucu tıklayın ve etkinleştirin.
Google People API istemci kitaplığını uzantı manifestindeki "scopes" öğesine ekleyin.
{
"name": "OAuth Tutorial FriendBlock",
...
"oauth2": {
"client_id": "yourExtensionOAuthClientIDWillGoHere.apps.googleusercontent.com",
"scopes": [
"https://www.googleapis.com/auth/contacts.readonly"
]
},
...
}
Google API Konsolu'na ve kimlik bilgilerine geri dönün. "Kimlik bilgileri oluştur"u tıklayın ve açılır menüden "API anahtarı"nı seçin.
Oluşturulan API anahtarını daha sonra kullanmak için saklayın.
İlk API isteğini oluşturma
Uzantı artık uygun izinlere ve kimlik bilgilerine sahip olduğu ve bir Google kullanıcısını yetkilendirebildiği için People API aracılığıyla veri isteğinde bulunabilir. oauth.js içindeki kodu aşağıdakiyle eşleşecek şekilde güncelleyin.
window.onload = function() {
document.querySelector('button').addEventListener('click', function() {
chrome.identity.getAuthToken({interactive: true}, function(token) {
let init = {
method: 'GET',
async: true,
headers: {
Authorization: 'Bearer ' + token,
'Content-Type': 'application/json'
},
'contentType': 'json'
};
fetch(
'https://people.googleapis.com/v1/contactGroups/all?maxMembers=20&key=API_KEY',
init)
.then((response) => response.json())
.then(function(data) {
console.log(data)
});
});
});
};
API_KEY kısmını Google API konsolundan oluşturulan API anahtarıyla değiştirin. Uzantı, memberResourceNames alanının altında bir people/account_id dizisi içeren bir JSON nesnesi günlüğe kaydedmelidir.
Yüzleri engelle
Uzantı artık kullanıcının kişilerinin bir listesini döndürdüğüne göre, bu kişilerin profillerini ve bilgilerini almak için ek isteklerde bulunabilir . Uzantı, kullanıcı kişilerinin fotoğraf bilgilerini almak için memberResourceNames özelliğini kullanır. oauth.js öğesini aşağıdaki kodu içerecek şekilde güncelleyin.
window.onload = function() {
document.querySelector('button').addEventListener('click', function() {
chrome.identity.getAuthToken({interactive: true}, function(token) {
let init = {
method: 'GET',
async: true,
headers: {
Authorization: 'Bearer ' + token,
'Content-Type': 'application/json'
},
'contentType': 'json'
};
fetch(
'https://people.googleapis.com/v1/contactGroups/all?maxMembers=20&key=<API_Key_Here>',
init)
.then((response) => response.json())
.then(function(data) {
let photoDiv = document.querySelector('#friendDiv');
let returnedContacts = data.memberResourceNames;
for (let i = 0; i < returnedContacts.length; i++) {
fetch(
'https://people.googleapis.com/v1/' + returnedContacts[i] +
'?personFields=photos&key=API_KEY',
init)
.then((response) => response.json())
.then(function(data) {
let profileImg = document.createElement('img');
profileImg.src = data.photos[0].url;
photoDiv.appendChild(profileImg);
});
};
});
});
});
};
Yeniden yükleyin ve uzantıya geri dönün. FriendBlock düğmesini tıklayın ve ta-da! Kişilerin yüzlerini blok halinde görebilirsiniz.
