OAuth2: Kullanıcıların kimliğini Google ile doğrulama

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 gizli 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 yapamadığından 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.

Tamamlanmış olan uzantıyı buradan indirebilirsiniz.

manifest.json

manifest.json adında bir dosya oluşturup aşağıdaki kodu ekleyerek manifest dosyasını ekleyin. Dosyayı buradan da 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 adlı 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 yayınlamadan Chrome Geliştirici Kontrol Paneli'ne yükleyin:

  1. Geliştirici Kontrol Paneli'nde Yeni öğe ekle'yi tıklayın.
  2. Dosya seç'i tıklayın ve .zip uzantı dizinini seçip yükleyin.
  3. Ek alanları doldurmadan Taslağı Kaydet ve kontrol paneline dön'ü seçin.

Your Listings (Girişleriniz) bölümünde uzantıyı bulun ve daha fazla bilgi'yi tıklayın. Pop-up'tan ortak anahtarı kopyalayın ve "key" alanının altındaki sıkıştırılmış dizinde yer alan manifeste ekleyin.

{
  "name": "OAuth Tutorial FaceBlcok",
...
  "key": "ThisKeyIsGoingToBeVeryLong/go8G...AQAB"
}

Kimlikleri karşılaştır

chrome://extensions adresindeki Uzantı Yönetimi sayfasını açın, geliştirici modunun etkin olduğundan 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.

Uzantının kimliği her yerde eşleşiyor

Uzantı, manifest dosyasına "key" alanını ekleyerek aynı kimliği korur. Tek bir kimliğin korunması, API kaydı için çok önemlidir.

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.

Uzantı için kimlik bilgileri oluşturun

İstemci kimliği oluştur sayfasında Chrome Uygulaması'nı seçin. Uzantının adını girin ve Uygulama Kimliği alanında URL'nin sonuna uzantı kimliğini girin.

Uzantı bilgilerini doldurun

Oluştur'u tıklayarak işlemi tamamlayın. Konsolda bir OAuth istemci kimliği sağlanır.

OAuth'u manifest dosyasına kaydet

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 FaceBlcok",
  ...
  "permissions": [
    "identity"
  ],
  ...
}

OAuth akışını yönetmek için oauth.js adlı dosyayı oluşturup aşağıdaki kodu ekleyin. Veya buradan indirebilirsiniz.

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.

Jetonu konsolda görüntüleyin

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.

People API&#39;yi etkinleştirme

Google People API istemci kitaplığını uzantı manifestindeki "scopes" öğesine ekleyin.

{
  "name": "OAuth Tutorial FaceBlcok",
  ...
  "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.

People API kimlik bilgileri oluşturma

Oluşturulan API anahtarını daha sonra kullanmak için saklayın.

İlk API isteğini oluşturun

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.

Bir bloktaki kişi yüzleri