Kod Modelini Kullan

Google Kimlik Hizmetleri kitaplığı, kullanıcıların tarayıcı tabanlı bir pop-up veya yönlendirme kullanıcı deneyimi akışı kullanarak Google'dan yetkilendirme kodu istemesine olanak tanır. Bu işlem, güvenli bir OAuth 2.0 akışını başlatır ve kullanıcı adına Google API'lerini çağırmak için kullanılan bir erişim jetonuyla sonuçlanır.

OAuth 2.0 yetkilendirme kodu akışının özeti:

• Google Hesabı sahibi, tarayıcıdan bir düğme tıklama gibi bir hareketle Google'dan yetkilendirme kodu ister.
• Google, kullanıcının tarayıcısında çalışan JavaScript web uygulamanızdaki bir geri çağırmaya benzersiz bir yetkilendirme kodu göndererek yanıt verir veya tarayıcı yönlendirmesi kullanarak doğrudan yetkilendirme kodu uç noktanızı çağırır.
• Arka uç platformunuz bir yetkilendirme kodu uç noktasına ev sahipliği yapar ve kodu alır. Doğrulamanın ardından bu kod, Google'ın jeton uç noktasına yapılan bir istek kullanılarak kullanıcı başına erişim ve yenileme jetonlarıyla değiştirilir.
• Google, yetkilendirme kodunu doğrular, isteğin güvenli platformunuzdan geldiğini onaylar, erişim ve yenileme jetonları oluşturur ve platformunuz tarafından barındırılan giriş uç noktasını çağırarak jetonları döndürür.
• Giriş uç noktanız, erişim ve yenileme jetonlarını alır. Yenileme jetonu, daha sonra kullanılmak üzere güvenli bir şekilde saklanır.

Ön koşullar

OAuth izin ekranınızı yapılandırmak, istemci kimliği almak ve istemci kitaplığını yüklemek için Kurulum bölümünde açıklanan adımları uygulayın.

Kod istemcisi başlatma

google.accounts.oauth2.initCodeClient() yöntemi, bir kod istemcisini başlatır.

Pop-up veya yönlendirme modu

Yetkilendirme kodunu Yönlendirme veya Pop-up modu kullanıcı akışını kullanarak paylaşabilirsiniz. Yönlendirme modunda, sunucunuzda bir OAuth2 yetkilendirme uç noktası barındırırsınız ve Google, kullanıcı aracısını bu uç noktaya yönlendirerek yetkilendirme kodunu URL parametresi olarak paylaşır. Pop-up modunda, yetkilendirme kodunu sunucunuza gönderen bir JavaScript geri çağırma işleyicisi tanımlarsınız. Pop-up modu, ziyaretçilerin sitenizden ayrılmasına gerek kalmadan sorunsuz bir kullanıcı deneyimi sağlamak için kullanılabilir.

Aşağıdaki için bir istemci başlatmak üzere:

• Yeniden yönlendirme kullanıcı deneyimi akışında ux_mode değerini redirect, redirect_uri değerini ise platformunuzun yetkilendirme kodu uç noktasına ayarlayın. Değer, Google Cloud Console'da yapılandırdığınız OAuth 2.0 istemcisinin yetkili yönlendirme URI'lerinden biriyle tam olarak eşleşmelidir. Ayrıca, yönlendirme URI'si doğrulama kurallarına uygun olmalıdır.

• Pop-up kullanıcı deneyimi akışında ux_mode değerini popup olarak, callback değerini ise yetkilendirme kodlarını platformunuza göndermek için kullanacağınız işlevin adı olarak ayarlayın. redirect_uri değeri, initCodeClient işlevini çağıran sayfanın kaynağı olarak ayarlanır. Bu değer, yetkilendirme kodu bir erişim veya yenileme jetonuyla değiştirildiğinde akışın ilerleyen aşamalarında kullanılır. Örneğin, https://www.example.com/index.html, initCodeClient'i çağırır ve kaynak: https://www.example.com, redirect_url'ün değeridir.

CSRF saldırılarına karşı koruma

Siteler arası istek sahteciliği (CSRF) saldırılarını önlemeye yardımcı olmak için yönlendirme ve pop-up modu kullanıcı deneyimi akışlarında biraz farklı teknikler kullanılır. Yönlendirme modunda OAuth 2.0 state parametresi kullanılır. Durum parametresini oluşturma ve doğrulama hakkında daha fazla bilgi için RFC6749 bölüm 10.12 Siteler Arası İstek Sahteciliği'ne bakın. Pop-up moduyla, isteklerinize özel bir HTTP üst bilgisi ekler, ardından sunucunuzda bunun beklenen değer ve kaynakla eşleştiğini onaylarsınız.

Yetkilendirme kodu ve CSRF işleme gösteren bir kod snippet'ini görüntülemek için bir kullanıcı deneyimi modu seçin:

const client = google.accounts.oauth2.initCodeClient({
  client_id: 'YOUR_CLIENT_ID',
  scope: 'https://www.googleapis.com/auth/calendar.readonly',
  ux_mode: 'redirect',
  redirect_uri: 'https://oauth2.example.com/code',
  state: 'YOUR_BINDING_VALUE'
});

const client = google.accounts.oauth2.initCodeClient({
  client_id: 'YOUR_CLIENT_ID',
  scope: 'https://www.googleapis.com/auth/calendar.readonly',
  ux_mode: 'popup',
  callback: (response) => {
    const xhr = new XMLHttpRequest();
    xhr.open('POST', "https://oauth2.example.com/code", true);
    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    // Set custom header for CRSF
    xhr.setRequestHeader('X-Requested-With', 'XmlHttpRequest');
    xhr.onload = function() {
      console.log('Auth code response: ' + xhr.responseText);
    };
    xhr.send('code=' + response.code);
  },
});

OAuth 2.0 kod akışını tetikleme

Kullanıcı akışını tetiklemek için kod istemcisinin requestCode() yöntemini çağırın:

<button onclick="client.requestCode();">Authorize with Google</button>

Bu durumda, yetkilendirme kodunu yönlendirme uç noktanıza veya geri çağırma işleyicinize döndürmeden önce kullanıcının bir Google Hesabı'nda oturum açması ve tek tek kapsamları paylaşmayı kabul etmesi gerekir.

Yetkilendirme kodu işleme

Google, kullanıcı başına benzersiz bir yetkilendirme kodu oluşturur. Bu kodu alıp arka uç sunucunuzda doğrulamanız gerekir.

Pop-up modunda, callback ile belirtilen işleyici, kullanıcının tarayıcısında çalışarak yetkilendirme kodunu platformunuz tarafından barındırılan bir uç noktaya iletir.

Yönlendirme modunda, GET tarafından belirtilen uç noktaya bir istek gönderilir. Bu istek, URL'deki code parametresinde yetkilendirme kodunu paylaşır.redirect_uri Yetkilendirme kodunu almak için:

• Mevcut bir uygulamanız yoksa yeni bir yetkilendirme uç noktası oluşturun veya

• GET isteklerini ve URL parametrelerini kabul etmek için mevcut uç noktanızı güncelleyin. Daha önce, yükte yetkilendirme kodu değeri içeren bir PUT isteği kullanılıyordu.

Yetkilendirme uç noktası

Yetkilendirme kodu uç noktanız, şu URL sorgu dizesi parametreleriyle GET isteklerini işlemelidir:

example.com tarafından barındırılan ve auth-code adlı bir uç noktaya URL parametreleri içeren örnek GET isteği:

Request URL: https://www.example.com/auth-code?state=42a7bd822fe32cc56&code=4/0AX4XfWiAvnXLqxlckFUVao8j0zvZUJ06AMgr-n0vSPotHWcn9p-zHCjqwr47KHS_vDvu8w&scope=email%20profile%20https://www.googleapis.com/auth/calendar.readonly%20https://www.googleapis.com/auth/photoslibrary.readonly%20https://www.googleapis.com/auth/contacts.readonly%20openid%20https://www.googleapis.com/auth/userinfo.email%20https://www.googleapis.com/auth/userinfo.profile&authuser=0&hd=example.com&prompt=consent

Yetkilendirme kodu akışı, daha önceki JavaScript kitaplıkları veya Google OAuth 2.0 uç noktalarına yapılan doğrudan çağrılar tarafından başlatıldığında POST isteği kullanılır.

Yetkilendirme kodunu HTTP istek metninde yük olarak içeren örnek POST isteği:

Request URL: https://www.example.com/auth-code
Request Payload: 4/0AX4XfWhll-BMV82wi4YwbrSaTPaRpUGpKqJ4zBxQldU\_70cnIdh-GJOBZlyHU3MNcz4qaw

İsteği doğrulayın

CSRF saldırılarını önlemek için sunucunuzda aşağıdakileri yapın.

Yönlendirme modu için state parametresinin değerini kontrol edin.

X-Requested-With: XmlHttpRequest başlığının pop-up modu için ayarlandığını onaylayın.

Ardından, yalnızca yetkilendirme kodu isteğini başarıyla doğruladıysanız Google'dan yenileme ve erişim jetonları alma işlemine devam etmelisiniz.

Erişim ve yenileme jetonlarını alma

Arka uç platformunuz Google'dan bir yetkilendirme kodu aldıktan ve isteği doğruladıktan sonra, API çağrıları yapmak için Google'dan erişim ve yenileme jetonları almak üzere yetkilendirme kodunu kullanın.

Web Sunucusu Uygulamaları için OAuth 2.0'ı Kullanma kılavuzunun 5. Adım: Yetkilendirme kodunu yenileme ve erişim jetonlarıyla değiştirme bölümünden başlayarak talimatları uygulayın.

Jetonları yönetme

Platformunuz, yenileme jetonlarını güvenli bir şekilde saklar. Kullanıcı hesapları kaldırıldığında veya kullanıcı izni google.accounts.oauth2.revoke tarafından ya da doğrudan https://myaccount.google.com/permissions adresinden iptal edildiğinde depolanan yenileme jetonlarını silin.

İsteğe bağlı olarak, kullanıcı hesaplarını hesaplar arası koruma ile korumak için RISC'yi kullanabilirsiniz.

Genellikle arka uç platformunuz, erişim jetonu kullanarak Google API'lerini çağırır. Web uygulamanız, kullanıcının tarayıcısından Google API'lerini de doğrudan çağıracaksa erişim jetonunu web uygulamanızla paylaşmanın bir yolunu uygulamanız gerekir. Bu işlem, bu kılavuzun kapsamı dışındadır. Bu yaklaşımı izlerken ve JavaScript için Google API İstemci Kitaplığı'nı kullanırken erişim jetonunu tarayıcı belleğinde geçici olarak depolamak ve kitaplığın Google API'lerini çağırmasını sağlamak için gapi.client.SetToken() kullanın.