Kod Modelini Kullan

Google Kimlik Hizmetleri kitaplığı, kullanıcıların tarayıcı tabanlı Pop-up veya Yönlendirme kullanıcı deneyimi akışını kullanarak Google'dan yetkilendirme kodu istemesine olanak tanır. 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 jetonuyla sonuçlanır.

OAuth 2.0 yetkilendirme kodu akış özeti:

• Google Hesabı sahibi, tarayıcıda düğme tıklaması gibi bir hareketle Google'dan yetkilendirme kodu ister.
• Google yanıt verir ve kullanıcının tarayıcısında çalışan JavaScript web uygulamanızdaki bir geri çağırmaya benzersiz yetkilendirme kodu göndererek veya bir tarayıcı yönlendirmesi kullanarak yetkilendirme kodu uç noktanızı doğrudan çağırır.
• Arka uç platformunuz, bir yetkilendirme kodu uç noktası barındırır ve kodu alır. Doğrulamadan sonra bu kod, kullanıcı başına erişim için değiştirilir ve Google'ın jeton uç noktasına yapılan bir istek kullanılarak jetonları yenilenir.
• Google; yetkilendirme kodunu doğrular, güvenli platformunuzdan gelen isteğin olduğunu onaylar, erişim ve yenileme jetonlarını yayınlar 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 ve yenileme jetonunu daha sonra kullanılmak üzere güvenli bir şekilde saklar.

Önemli Bilgi: Arka uç sunucunuzda Google'ın jeton uç noktasını çağırarak yenileme jetonları ve erişim jetonları ile yetkilendirme kodu değiş tokuşu yaparsınız.

Kod İstemcisini 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ı işlemleri akışını kullanarak yetkilendirme kodu paylaşmayı seçebilirsiniz. Yönlendirme modu ile sunucunuzda bir OAuth2 yetkilendirme uç noktası barındırırsınız ve Google, kullanıcı aracısını bu uç noktaya yönlendirir ve 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.

Bir istemciyi şunun için başlatmak üzere:

• Kullanıcı deneyimi akışını yönlendirin, ux_mode değerini redirect olarak ve redirect_uri değerini platformunuzun yetkilendirme kodu uç noktasına ayarlayın. Değer, API Konsolu'nda yapılandırdığınız OAuth 2.0 istemcisi için yetkilendirilmiş yönlendirme URI'lerinden biriyle tam olarak eşleşmelidir. Ayrıca, Yönlendirme URI'si doğrulama kurallarımıza da uygun olmalıdır.

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

Önemli Bilgi: Kullanılabilirlik ile güvenlik arasında en iyi dengeyi sağlamak için Yetkilendirme kodu modeliyle Pop-up mod kullanıcı deneyimi akışını kullanmanız önerilir.

CSRF saldırılarını önleme

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

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

Yönlendirme modu

Google'ın kullanıcının tarayıcısını kimlik doğrulama uç noktanıza yönlendirdiği bir istemciyi başlatın ve kimlik doğrulama kodunu URL parametresi olarak paylaşın.

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"
});

Pop-up modu

Kullanıcının tarayıcısının Google'dan yetkilendirme kodu alıp sunucunuza gönderdiği bir istemciyi başlatın.

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 işlem, kullanıcının bir Google Hesabı'nda oturum açmasını ve yönlendirme uç noktanıza veya geri arama işleyicinize yetkilendirme kodu döndürmeden önce ayrı kapsamları paylaşmayı kabul etmesini gerektirir.

Yetkilendirme kodu işleme

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

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

Yönlendirme modunda, redirect_url tarafından belirtilen uç noktaya bir GET isteği gönderilir ve URL code parametresinde yetkilendirme kodu paylaşılı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ğerine sahip bir PUT isteği kullanılıyordu.

Yetkilendirme uç noktası

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

Ad	Değer
kimlik doğrulayıcı kullanıcı	Kullanıcı oturum açma kimlik doğrulaması isteği
kod	Google tarafından oluşturulan bir OAuth2 yetkilendirme kodu
hd	Kullanıcı hesabının barındırılan alanı
istem	Kullanıcı rızası iletişim kutusu
kapsam	Yetkilendirilecek bir veya daha fazla OAuth2 kapsamının alanla ayrılmış listesi
state	CRSF durum değişkeni

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ı tarafından veya Google OAuth 2.0 uç noktalarına doğrudan çağrılarla başlatıldığında bir POST isteği kullanılır.

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

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

Önemli: Önceden, POST istekler için kullanılıyordu. İşleyicinizi hem GET hem de POST isteklerini kabul edecek şekilde güncelleyin. Eski JS kitaplıklarını kullanmaya devam etmeyi veya Google Kimlik Hizmetleri kitaplığını kullanırken Google OAuth 2.0 uç noktalarını doğrudan çağırmayı planlıyorsanız iki farklı uç nokta barındırmayı düşünebilirsiniz.

İsteği doğrulayın

CSRF saldırılarından kaçınmak için sunucunuzda aşağıdakileri yapın.

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

X-Requested-With: XmlHttpRequest üstbilgisinin pop-up moduna ayarlandığını onaylayın.

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

Erişim ve yenileme jetonları alma

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

Web Sunucusu Uygulamaları için OAuth 2.0'ı Kullanma kılavuzundaki 5. adım: Yenileme ve erişim jetonları için yetkilendirme kodu değiştirme adımından 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, RISC'yi hesaplar arası koruma ile kullanıcı hesaplarını korumak için düşünebilirsiniz.

Arka uç platformunuz genellikle erişim jetonu kullanarak Google API'lerini çağırır. Web uygulamanız Google API'lerini doğrudan kullanıcının tarayıcısından da çağıracaksa erişim jetonunu web uygulamanızla paylaşmak için bir yöntem uygulamanız gerekir. Bu durum, bu kılavuzun kapsamı dışındadır. Bu yaklaşımı uygularken ve JavaScript için Google API İstemci 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.