OAuth2, yetkilendirme için endüstri standardı olan protokoldür. Kullanıcılara sunabilecekleri kullanıcı adlarını paylaşmadan özel bilgilere erişim izni vermek için, parolanızı ve diğer gizli kimlik bilgilerinizi girin.
Bu eğitim, Google Kişiler API ve Chrome Identity API. Uzantılar fazla yüklenmediği için HTTPS, gerçekleştirilemiyor OAuth2'yi kullanmak için Chrome Identity API'den yararlanırlar.
Başlayın
Bir dizin ve aşağıdaki başlangıç dosyalarını oluşturarak başlayın.
manifest.json
Manifest'i, manifest.json adında bir dosya oluşturup aşağıdaki kodu ekleyerek 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 adında bir dosya oluşturup aşağıdaki kodu ekleyerek uzantı hizmeti çalışanını ekleyin.
chrome.action.onClicked.addListener(function() {
chrome.tabs.create({url: 'index.html'});
});
index.html
index.html adında 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>
Uzantı kimliğinizin tutarlı olmasını sağlayın
Geliştirme sırasında tek bir kimliğin korunması çok önemlidir. Kimliğin tutarlı olmasını sağlamak için şu adımları izleyin:
Uzantıyı geliştirici kontrol paneline yükleyin
Uzantı dizinini bir .zip dosyası olarak paketleyin ve Chrome Geliştirici'ye yükleyin.
Kontrol Paneli'ni yayınlamadan önce:
- 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çıkken aşağıdaki adımları uygulayın:
-----BEGIN PUBLIC KEY-----ile-----END PUBLIC KEY-----arasındaki kodu kopyalayın.- Yeni satırları tek satırlık metin olacak şekilde kaldırın.
Kodu "key" alanının altındaki manifest.json öğesine ekleyin.
Bu şekilde, 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ın
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önetimindeki uzantı kimliğini karşılaştırın
Geliştirici Kontrol Paneli'ndeki Öğe Kimliği'ne ekleyin. 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ğunda Kimlik bilgileri'ni tıklayın, Kimlik bilgileri oluştur'u tıklayın ve OAuth istemci kimliği'ni seçin.
İstemci kimliği oluşturun sayfasında Chrome Uzantısı'nı seçin. Uzantının ve yerin adını girin uygulama kimliği alanında URL'nin sonundaki uzantı kimliğini.
Oluştur'u tıklayarak işlemi tamamlayın. Konsol bir OAuth istemci kimliği sağlar.
OAuth'u manifest dosyasında kaydedin
Uzantı manifestine "oauth2" alanını ekleyin. Oluşturulan OAuth istemci kimliğini
"client_id" Ş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ın
Manifest dosyasında identity iznini 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 öğesinin başına oauth.js için 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 Kişiler"i tıklayın düğmesini tıklayın. Konsolda bir OAuth jetonu gösterilir.
Google People API'yi etkinleştirme
Google API konsoluna dönün ve kenar çubuğundan Kitaplık'ı seçin. "Google Kişiler" araması yapın API" seçeneği görünüyorsa doğru sonucu tıklayın ve etkinleştirin.
Uzantı manifest'inde "scopes" uygulamasına Google People API istemci kitaplığını ekleyin.
{
"name": "OAuth Tutorial FriendBlock",
...
"oauth2": {
"client_id": "yourExtensionOAuthClientIDWillGoHere.apps.googleusercontent.com",
"scopes": [
"https://www.googleapis.com/auth/contacts.readonly"
]
},
...
}
Google API konsoluna dönün ve kimlik bilgilerine geri dönün. "Kimlik bilgileri oluştur"u tıklayın ve "API anahtarı"nı seçin açılır menüden kullanabilirsiniz.
Oluşturulan API anahtarını daha sonra kullanmak üzere saklayın.
İlk API isteğini oluşturma
Uzantı artık uygun izinlere ve kimlik bilgilerine sahip olduğuna ve bir Google kullanıcısını yetkilendirebildiğine göre
People API aracılığıyla veri isteğinde bulunun. oauth.js bölümündeki 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ı
people/account_id
memberResourceNames alanı.
Yüzleri engelle
Uzantı artık kullanıcının kişilerinin bir listesini döndürdüğüne göre ek istekler yapabilir
kişilerin profillerini ve bilgilerini almak için bu önerileri kullanabilirsiniz . Uzantı,
Kullanıcının kişilerinin fotoğraf bilgilerini almak için memberResourceNames. oauth.js alanını şuna güncelle:
aşağıdaki kodu dahil etmeniz gerekir.
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ükleyip uzantıya geri dönün. FriendBlock düğmesine bastın ve d-a-da! Kişilerin yüzlerinin tadını çıkarın bir bloktur.
