OAuth2, yetkilendirme için endüstri standardı protokoldür. Kullanıcıların, kullanıcı adlarını, şifrelerini ve diğer gizli kimlik bilgilerini paylaşmadan web ve masaüstü uygulamalarına özel bilgilere erişim izni vermeleri için bir mekanizma sağlar.
Bu eğitimde, Google People API ve Chrome Identity API'yi kullanarak kullanıcının Google kişilerine erişen bir uzantı oluşturulur. Uzantıların HTTPS üzerinden yüklenmemesi, yönlendirme yapamamaları veya çerez ayarlayamamaları nedeniyle OAuth2'yi kullanmak için Chrome Identity API'yi kullanırlar.
Başlayın
Bir dizin ve aşağıdaki başlangıç dosyalarını oluşturarak başlayın.
manifest.json
manifest.json adlı 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"
}
}
service-worker.js
service-worker.js adlı bir dosya oluşturup aşağıdaki kodu ekleyerek uzantı hizmet işçisini ekleyin.
chrome.action.onClicked.addListener(function() {
chrome.tabs.create({url: 'index.html'});
});
index.html
index.html adlı bir HTML dosyası ekleyin ve 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ği korumak önemlidir. Tutarlı bir kimlik kullanmak için aşağıdaki adımları uygulayın:
Uzantıyı geliştirici kontrol paneline yükleme
Uzantı dizinini bir .zip dosyasına 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öster'i tıklayın.
İletişim kutusu açıkken aşağıdaki adımları uygulayın:
-----BEGIN PUBLIC KEY-----ile-----END PUBLIC KEY-----arasındaki kodu kopyalayın.- Tek bir metin satırı haline getirmek için yeni satırları kaldırın.
Kodu "key" alanının altındaki manifest.json alanına ekleyin.
Bu sayede 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ırma
chrome://extensions adresindeki Uzantı Yönetimi sayfasını açın, Geliştirici modu'nun 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ğiyle karşılaştırın. Bu iki değer eşleşmelidir.
OAuth istemci kimliği oluşturma
Google API Konsolu'na gidin ve yeni bir proje oluşturun. Hazır olduğunuzda kenar çubuğundan Kimlik bilgileri'ni seçin, Kimlik bilgileri oluştur'u tıklayın ve OAuth istemci kimliği'ni seçin.
İstemci kimliği oluşturma sayfasında Chrome uzantısı'nı seçin. Uzantının adını girin ve uzantı kimliğini Uygulama Kimliği alanındaki URL'nin sonuna yerleştirin.
Oluştur'u tıklayarak işlemi tamamlayın. Konsol, bir OAuth istemci kimliği sağlar.
OAuth'u manifest dosyasına kaydetme
"oauth2" alanını uzantı manifest'ine ekleyin. Oluşturulan OAuth istemci kimliğini "client_id" altına yerleştirin. Şimdilik "scopes" alanına boş bir dize ekleyin.
{
"name": "OAuth Tutorial FriendBlock",
...
"oauth2": {
"client_id": "yourExtensionOAuthClientIDWillGoHere.apps.googleusercontent.com",
"scopes":[""]
},
...
}
İlk OAuth akışını başlatma
identity iznini manifest dosyasına kaydedin.
{
"name": "OAuth Tutorial FriendBlock",
...
"permissions": [
"identity"
],
...
}
OAuth akışını yönetmek için oauth.js adlı bir dosya oluşturun ve aşağıdaki kodu ekleyin.
window.onload = function() {
document.querySelector('button').addEventListener('click', function() {
chrome.identity.getAuthToken({interactive: true}, function(token) {
console.log(token);
});
});
};
index.html başlığına oauth.js için bir komut dosyası etiketi yerleştirin.
...
<head>
<title>FriendBlock</title>
...
<script type="text/javascript" src="oauth.js"></script>
</head>
...
Uzantı yeniden yükleyin ve index.html'ü açmak için tarayıcı simgesini tıklayın. Konsolu açıp "Arkadaş Engelleme Kişileri" düğmesini tıklayın. Konsolda bir OAuth jetonu görünür.
Google People API'yi etkinleştirme
Google API Konsolu'na 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" bölümüne ekleyin.
{
"name": "OAuth Tutorial FriendBlock",
...
"oauth2": {
"client_id": "yourExtensionOAuthClientIDWillGoHere.apps.googleusercontent.com",
"scopes": [
"https://www.googleapis.com/auth/contacts.readonly"
]
},
...
}
Google API Konsolu'na dönüp kimlik bilgilerine gidin. "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 üzerinden veri isteyebilir. oauth.js'teki 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 değerini Google API Konsolu'ndan oluşturulan API anahtarıyla değiştirin. Uzantı, memberResourceNames alanının altına bir people/account_id dizisi içeren bir JSON nesnesi kaydetmelidir.
Yüzleri engelleme
Uzantı, kullanıcının kişilerinin listesini döndürdüğünden bu kişilerin profillerini ve bilgilerini almak için ek istekler gönderebilir . Uzantı, kullanıcı kişilerinin fotoğraf bilgilerini almak için memberResourceNames'ü 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);
});
};
});
});
});
};
Uzantıyı yeniden yükleyip uzantıya dönün. Arkadaşı Engelle düğmesini tıklayın ve işte bu kadar. Kişilerin yüzlerini bir blokta görebilirsiniz.
