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_modedeğeriniredirectolarak ayarlayın veredirect_uriiş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_modedeğerinipopupvecallbackdeğ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:
Yönlendirme modu
Google'ın, kullanıcının tarayıcısını web sitenize yönlendirdiği bir istemci başlatın. kimlik doğrulama uç noktası, yetkilendirme kodu URL parametresi olarak paylaşılıyor.
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 yetkilendirme kodunu aldığı bir istemciyi başlatın: bunu sunucunuza gönderir.
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
GETisteklerini ve URL'yi kabul etmek için mevcut uç noktanızı güncelleyin parametreleridir. Önceden, yetkilendirme kodu değeriPUTyük kullanıldı.
Yetkilendirme uç noktası
Yetkilendirme kodu uç noktanız, bu URL sorgularıyla GET isteklerini işlemelidir
dize parametreleri:
| Ad | Değer |
|---|---|
| kimlik doğrulayı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 adı |
| istem | Kullanıcı rızası iletişim kutusu |
| kapsam | Yetkilendirilecek bir veya daha fazla OAuth2 kapsamının boşlukla ayrılmış listesi |
| durum | CRSF durum değişkeni |
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.