Kod Modelini Kullan

Koleksiyonlar ile düzeninizi koruyun İçeriği tercihlerinize göre kaydedin ve kategorilere ayırın.

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 istemesini sağlar. Bu işlem, güvenli bir OAuth 2.0 akışı başlatır ve kullanıcı adına Google API'lerini çağırmak için kullanılan bir erişim jetonu oluşturur.

OAuth 2.0 yetkilendirme kodu akışı özeti:

• Google Hesabı sahibi, tarayıcıda 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ğırma işlevine 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ı barındırır ve kodu alır. Doğrulama işleminden sonra bu kod, Google'ın jeton uç noktasına gönderilen 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ı verir 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 jetonunu daha sonra kullanmak üzere güvenli bir şekilde depolar.

Ön koşullar

OAuth kullanıcı rızası 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 istemcisini başlatma

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

Pop-up veya Yönlendirme modu

Yönlendirme veya Pop-up modu kullanıcı akışını kullanarak bir yetkilendirme kodu paylaşmayı seçebilirsiniz. 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 bir URL parametresi olarak paylaşır. Pop-up modu için, yetkilendirme kodunu sunucunuza gönderen bir JavaScript geri çağırma işleyicisi tanımlarsınız. Pop-up modu, ziyaretçilerin sitenizden ayrılmak zorunda kalmadan sorunsuz bir kullanıcı deneyimi sunmak için kullanılabilir.

Aşağıdakiler için istemciyi ilk kullanıma hazırlamak:

• Kullanıcı deneyimi akışını yönlendirin, ux_mode değerini redirect olarak, redirect_uri değerini ise platformunuzun yetkilendirme kodu uç noktasına ayarlayın. Değer, API 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 doğrulama kurallarımıza da uygun olmalıdır.

• Pop-up kullanıcı deneyimi akışı, ux_mode değerini popup olarak, callback değerini ise platformunuza yetkilendirme kodları göndermek için kullanacağınız işlevin adına ayarlayın.

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

Siteler Arası İstekte Sahtekarlık (CSRF) saldırılarını önlemek için Yönlendirme ve Pop-up modu kullanıcı deneyimi akışlarında biraz farklı teknikler kullanılır. Yönlendirme modu için OAuth 2.0 state parametresi kullanılır. state parametresini oluşturma ve doğrulama hakkında daha fazla bilgi için RFC6749 bölüm 10.12 Siteler Arası İstekte Sahtekarlık başlıklı makaleyi inceleyin. Pop-up modunda, isteklerinize özel bir HTTP başlığı eklersiniz ve ardından sunucunuzda bu başlığın beklenen değer ve kaynakla eşleştiğini onaylarsınız.

Kimlik doğrulama kodunu ve CSRF işlemeyi 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_GOOGLE_CLIENT_ID',
  scope: 'https://www.googleapis.com/auth/calendar.readonly',
  ux_mode: 'redirect',
  redirect_uri: "https://your.domain/code_callback_endpoint",
  state: "YOUR_BINDING_VALUE"
});

const client = google.accounts.oauth2.initCodeClient({
  client_id: 'YOUR_GOOGLE_CLIENT_ID',
  scope: 'https://www.googleapis.com/auth/calendar.readonly',
  ux_mode: 'popup',
  callback: (response) => {
    const xhr = new XMLHttpRequest();
    xhr.open('POST', code_receiver_uri, 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, kullanıcının yönlendirme uç noktanıza veya geri çağırma işleyicinize bir yetkilendirme kodu döndürmeden önce bir Google Hesabı'nda oturum açması ve ayrı kapsamları paylaşmayı kabul etmesi gerekir.

Yetkilendirme kodu işleme

Google, kullanıcı başına benzersiz bir yetkilendirme kodu oluşturur. Bu kodu arka uç sunucunuzda alır ve doğrularsınız.

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

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

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

• Mevcut uç noktanızı GET isteklerini ve URL parametrelerini kabul edecek şekilde güncelleyin. Daha önce, yükte yetkilendirme kodu değerinin bulunduğu bir PUT isteği kullanılıyordu.

Yetkilendirme uç noktası

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

auth-code adlı ve example.com tarafından barındırılan 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ışı, ö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 bir POST isteği kullanılır.

HTTP istek metninde yetkilendirme kodunu 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ğrulama

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 kimlik doğrulama kodu isteğini başarıyla doğruladıysanız Google'dan yenileme ve erişim jetonları almaya devam etmeniz gerekir.

Erişim ve yenileme jetonları 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ştirin bölümündeki 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 saklanan yenileme jetonlarını silin.

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

Arka uç platformunuz genellikle bir erişim jetonu kullanarak Google API'lerini çağırır. Web uygulamanız, kullanıcının tarayıcısından doğrudan Google API'lerini de ç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ı uygulayıp JavaScript için Google API istemci kitaplığını kullanırken erişim jetonunu geçici olarak tarayıcı belleğinde depolamak ve kitaplığın Google API'lerini çağırmasını sağlamak için gapi.client.SetToken() kullanın.