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 HTTPS üzerinden yüklenmediği için 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.
Tamamlanan uzantının tamamını buradan indirebilirsiniz.
manifest.json
Manifest'i, manifest.json adında bir dosya oluşturup aşağıdaki kodu ekleyerek ekleyin. Alternatif olarak:
Dosyayı buradan indirebilirsiniz.
{
"name": "OAuth Tutorial FriendBlock",
"version": "1.0",
"description": "Uses OAuth to connect to Google's People API and display contacts photos.",
"manifest_version": 2,
"browser_action": {
"default_title": "FriendBlock, friends face's in a block."
},
"background": {
"scripts": [
"background.js"
],
"persistent": false
}
}
background.js
background.js adında bir dosya oluşturup aşağıdaki kodu ekleyerek arka plan komut dosyasını ekleyin.
Dosyayı buradan da indirebilirsiniz.
chrome.browserAction.onClicked.addListener(function() {
chrome.tabs.create({url: 'index.html'});
});
index.html
index.html adında bir HTML dosyası ekleyip aşağıdaki kodu ekleyin. Dosyayı buradan da indirebilirsiniz.
<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>
Geliştirici kontrol paneline yükle
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.
- Dosya seç'i tıklayıp
.zipuzantı dizinini seçin ve yükleyin. - Ek alanları doldurmadan Taslağı kaydet ve kontrol paneline dön'ü seçin.
Girişleriniz bölümünün altında uzantıyı bulun ve daha fazla bilgi'yi tıklayın. Pop-up'tan
ortak anahtarı açın ve bunu, "key" alanının altındaki sıkıştırılmış dizindeki manifeste ekleyin.
{
"name": "OAuth Tutorial FaceBlcok",
...
"key": "ThisKeyIsGoingToBeVeryLong/go8G...AQAB"
}
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.
Uzantı, manifest dosyasına "key" alanını ekleyerek aynı kimliği korur. Bir içeriği
API kaydı için tek kimlik gereklidir.
OAuth istemci kimliği oluştur
Google API konsoluna gidin ve yeni bir proje oluşturun. Hazır olduğ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 Uygulaması'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 FaceBlcok",
...
"permissions": [
"identity"
],
...
}
OAuth akışını yönetmek için oauth.js adlı bir dosya oluşturun ve aşağıdaki kodu ekleyin. Veya indirin
burada bulabilirsiniz.
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şileri"nde 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 FaceBlcok",
...
"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şturun
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
bu kişilerin profillerini ve bilgilerini almak için aşağıdaki adımları uygulayın . 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üğmesini tıklayın ve d-a-da! Kişilerin yüzlerinin tadını çıkarın bir bloktur.
