Kod Modelini Kullan

Google Kimlik Hizmetleri kitaplığı, kullanıcıların yetkilendirme isteğinde bulunmasına olanak tanır veya Redirect UX akışıyla Google'dan gelen kodu gösterir. Bu güvenli bir OAuth 2.0 akışı başlatır ve arama için kullanılan bir erişim jetonuyla sonuçlanır Kullanıcı adına Google API'leri.

OAuth 2.0 yetkilendirme kodu akışı özeti:

• Tarayıcıda düğme tıklaması gibi bir hareketle Google Hesabı Google'dan yetkilendirme kodu ister.
• Google yanıt verir ve kullanıcının tarayıcısında çalışan JavaScript web uygulamanız veya doğrudan yetkilendirme kodu uç noktanızı kullanır.
• Arka uç platformunuz bir yetkilendirme kodu uç noktası barındırır ve girin. Bu kod, doğrulamanın ardından kullanıcı erişimi ve Jetonları Google'ın jeton uç noktasına yönelik bir istek kullanarak yenileme.
• Google, yetkilendirme kodunu ve isteğin kaynaklandığını onaylar. erişim ve yenileme jetonları verir ve jetonlarını kullanarak platformunuz tarafından barındırılan giriş uç noktasını çağırın.
• Giriş uç noktanız erişim ve yenileme jetonlarını alır ve bu jetonları güvenli bir şekilde depolar. yenileme jetonundan yararlanın.

Kod İstemcisini 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 modundaki kullanıcı işlemleri akışı. Yönlendirme moduyla bir OAuth2 yetkilendirmesi barındırırsınız. uç noktanız görünür ve Google, kullanıcı aracısını bu uç noktaya yönlendirirse Yetkilendirme kodunu URL parametresi olarak paylaşın. Pop-up modu için bir JavaScript tanımlarsınız geri çağırma işleyiciyi kullanabilirsiniz. Pop-up modu kullanılabilmesi sayesinde, web sitenizin sitenizden ayrılacaktır.

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

• Kullanıcı deneyimi akışını yönlendirin, ux_mode değerini redirect olarak ayarlayın ve redirect_uri işlemini platformunuzun yetkilendirme kodu uç noktasına bağlayın. Değer OAuth 2.0 için yetkili yönlendirme URI'lerinden biriyle tam olarak eşleşmelidir istemci kimliği ekleyin. Ayrıca Yönlendirme URI'si doğrulama kuralları.

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

CSRF saldırılarını önleme

Siteler Arası İstek Sahtekarlığı (CSRF) saldırılarını önlemeye yardımcı olması için bu tekniklerin nasıl kullanıldığını öğreneceğiz. Yönlendirme İçin modunda, OAuth 2.0 durum parametresi kullanılır. Bkz. RFC6749 bölüm 10.12 Siteler Arası İstek Sahtekarlığı state parametresini oluşturma ve doğrulama hakkında daha fazla bilgi edinin. Pop-up mod ile isteklerinize özel bir HTTP üstbilgisi ekler ve ardından sunucunuzda beklenen değer ve kaynakla eşleştiğinden emin olun.

Yetkilendirme 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ı Tetikleyici

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

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

Bunun için kullanıcının bir Google Hesabı'nda oturum açması ve paylaşım izni vermesi gerekir kapsamlarını kontrol etmek için yönlendirme uç noktasını veya geri çağırma işleyicinizi kullanın.

Yetkilendirme kodunu işleme

Google, aldığınız ve aldığınız her kullanıcı için benzersiz bir yetkilendirme kodu oluşturur arka uç sunucunuzda doğrulayın.

Pop-up modunda, callback tarafından belirtilen işleyici, kullanıcının tarayıcı tarafından barındırılan bir uç noktaya gönderir.

Yönlendirme modunda, GET redirect_url, URL code parametresinde yetkilendirme kodunu paylaşıyor. Alıcı: Yetkilendirme kodunu alın:

• Mevcut bir Yetkilendirme uç noktanız yoksa yeni bir Yetkilendirme uç noktası veya

• GET isteklerini ve URL'yi kabul etmek için mevcut uç noktanızı güncelleyin parametreleridir. Önceden, yetkilendirme kodu değeriPUT yük kullanıldı.

Yetkilendirme uç noktası

Yetkilendirme kodu uç noktanız, bu URL sorgularıyla GET isteklerini işlemelidir dize parametreleri:

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

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

POST HTTP isteği gövdesi:

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

İsteği doğrulama

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, Google'dan yenileme ve erişim jetonlarını alma işlemiyle devam etmelisiniz. yalnızca yetkilendirme kodu isteğini ilk önce başarıyla doğruladıysanız

Erişim elde edin ve jetonları yenileyin

Arka uç platformunuz Google'dan bir yetkilendirme kodu aldıktan ve isteği doğrular, yetkilendirme kodunu kullanarak erişimi alabilir ve jetonları yenileyebilir API çağrıları yapmak için Google.

Talimatları uygulayın: Adım 5: için yetkilendirme kodunu değiştirin Web Sunucusu için OAuth 2.0 Kullanma sayfasındaki, yenileme ve erişim jetonları Uygulamalar rehberini inceleyin.

Jetonları yönetme

Platformunuz yenileme jetonlarını güvenli bir şekilde saklar. Depolanan yenileme jetonlarını şu durumlarda sil: kullanıcı hesapları kaldırılır veya kullanıcı izni Google tarafından iptal edilir. google.accounts.oauth2.revoke veya doğrudan https://myaccount.google.com/permissions.

İsteğe bağlı olarak, kullanıcı hesaplarını Hesaplar Arası ile korumak için RISC'yi kullanmayı düşünebilirsiniz. Koruma.

Arka uç platformunuz genellikle bir erişim jetonu kullanarak Google API'lerini çağırır. Eğer Ayrıca web uygulamanız, doğrudan kullanıcının tarayıcısından Google API'lerini de web uygulamanızla paylaşmak için bir yöntem uygulamanız gerekir. bu rehberin kapsamı dışındadır. Bu yaklaşımı uygularken JavaScript için Google API istemci kitaplığı erişim jetonunu tarayıcıda geçici olarak depolamak için gapi.client.SetToken() kullanın hafızaya alın ve kitaplığın Google API'lerini çağırmasını sağlayın.