Web için Google ile oturum açma düğmesi

1. Genel Bakış

Bu codelab'de, kullanıcı oturum açma için bir web sayfası oluşturacağız. Google ile oturum açma düğmesini görüntülemek ve özelleştirmek için Google Kimlik Hizmetleri JavaScript kitaplığını kullanırsınız.

Google ile oturum açma düğmesi

Neler öğreneceksiniz?

  • Web sayfasına Google ile oturum açma düğmesi ekleme
  • OAuth 2.0 web uygulaması kurma
  • Kimlik jetonunun kodunu çözme
  • Google ile oturum açma düğmesini özelleştirme

İhtiyacınız olanlar

  1. Bu Codelab'de ele alacağımız ortamlar:metin düzenleyici ve web sayfası barındırma yeri
    • makinenizdeki bir terminalde yerel olarak çalıştırabilir veya
    • Glitch gibi bir platform kullanma
    Size en uygun ortamı seçin.
  2. Google Cloud projesi. Mevcut projenizi kullanabilir veya yeni bir proje oluşturabilirsiniz. Google Cloud Platform hesabı ve projesi ücretsizdir.
  3. HTML, CSS, JavaScript ve Chrome Geliştirici Araçları (veya eşdeğeri) hakkında temel bilgi.

Artık başlayabiliriz.

2. Oturum açma sayfanızı oluşturma

Bu kod örneğini index.html adlı bir dosyaya ekleyin. Bu işlemi makinenizde favori metin düzenleyicinizi kullanarak veya Glitch gibi bir platformda yapabilirsiniz.

<!DOCTYPE html> <html lang="en">   <head>     <script src="https://accounts.google.com/gsi/client" async></script>      <script>       function decodeJWT(token) {          let base64Url = token.split(".")[1];         let base64 = base64Url.replace(/-/g, "+").replace(/_/g, "/");         let jsonPayload = decodeURIComponent(           atob(base64)             .split("")             .map(function (c) {               return "%" + ("00" + c.charCodeAt(0).toString(16)).slice(-2);             })             .join("")         );         return JSON.parse(jsonPayload);       }        function handleCredentialResponse(response) {          console.log("Encoded JWT ID token: " + response.credential);          const responsePayload = decodeJWT(response.credential);          console.log("Decoded JWT ID token fields:");         console.log("  Full Name: " + responsePayload.name);         console.log("  Given Name: " + responsePayload.given_name);         console.log("  Family Name: " + responsePayload.family_name);         console.log("  Unique ID: " + responsePayload.sub);         console.log("  Profile image URL: " + responsePayload.picture);         console.log("  Email: " + responsePayload.email);       }     </script>   </head>   <body>     <!-- g_id_onload contains Google Identity Services settings -->     <div       id="g_id_onload"       data-auto_prompt="false"       data-callback="handleCredentialResponse"       data-client_id="PUT_YOUR_WEB_CLIENT_ID_HERE"     ></div>     <!-- g_id_signin places the button on a page and supports customization -->     <div class="g_id_signin"></div>   </body> </html>

Bu kod, HTML ve JavaScript'in bir karışımıdır ve aşağıdakiler gibi çeşitli işlevleri vardır:

  • g_id_onload kullanarak Google Identity Services kitaplığını yapılandırır,
  • g_id_signin kullanarak Google ile oturum açma düğmesi gösteriyorsa,
  • Google'dan kullanıcı oturum açma kimlik bilgilerini almak için handleCredentialResponse adlı bir JavaScript geri çağırma işlevi işleyicisi ekler ve
  • JSON Web Token (JWT) kimlik bilgisini yalnızca düz JSON'a dönüştürmek için decodeJWT işlevi.

data-client_id="PUT_YOUR_WEB_CLIENT_ID_HERE" ile ilgili bir sorun olabilir.

Şimdilik bu uyarıyı göz ardı edin. Birazdan bu konuya tekrar değineceğiz.

3. Web sayfanızı sunma

Bu bölümde, tarayıcıya index.html yayınlamak için kullanılan iki ortamı ele alacağız:

  • makinenizde yerel olarak bir web sunucusu çalıştırma
  • Glitch gibi bir uzak platform

Size en uygun olanı seçin. Kurulumdan sonra, bir OAuth web istemcisini yapılandırmak için URL'yi kullanırız.

Makinenizden yerel olarak

Sisteminizde Python3'ün yüklü olduğundan emin olun. Kurulum, işletim sistemine ve platforma göre değişir. Makinenize Python'ı yüklemeniz gerekiyorsa Python Kurulumu ve Kullanımı ile başlayın.

index.html dosyasını içeren dizinde Python web sunucusunu başlatın:

$ python3 -m http.server Serving HTTP on 0.0.0.0 port 8000 (http://0.0.0.0:8000/) ...

Web sunucusu artık 8000 numaralı bağlantı noktasındaki bağlantıları dinliyor ve oturum açma sayfanızı sunmaya hazır. URL şudur:

http://localhost:8000

Web geliştirme platformundan

Oturum açma sayfanızı Glitch (veya benzer bir araç) kullanarak düzenlemeyi ve barındırmayı seçtiyseniz index.html öğesini önizleme bölmesinde veya yeni bir tarayıcı sekmesinde açabilirsiniz.

Genellikle kullanacağınız URL, glich.com projenizi oluştururken girdiğiniz proje adıdır. Örneğin, Glitch projenizin adı gis-example ise URL https://gis-example.glitch.me olur. Elbette farklı bir proje adı seçmiş olacaksınız ve bu adı yeniden kullanamazsınız. URL şudur:

https://<var>your-project-name</var>.glitch.me

Sayfayı yükleme

Bir saniye bekleyin...

Öncelikle bir OAuth 2.0 web istemcisi oluşturup yapılandırmamız gerekir.

URL'yi kopyalayın veya not alın. Bu URL, sonraki adımda kullanılır.

4. OAuth web istemcisi oluşturma

Kullanıcıların oturum açabilmesi için OAuth'u yapılandıralım.

  • OAuth 2.0 web istemcisi oluşturmak için bu bağlantıyı tıklayın. Gerekirse bir sihirbaz, yeni bir Google Cloud projesi oluşturup ayarlamanıza yardımcı olur.
  • Uygulama türü açılır listesinden Web uygulaması'nı seçin.
  • Yetkilendirilmiş JavaScript kaynakları bölümünde URI ekle düğmesine basın.
  • 3. adım: Web sayfanızı yayınlayın bölümündeki index.html öğesini barındıran URL'yi girin.

    Yerel makinenizde barındırılıyorsa

    Makinenizde barındırılan yerel kaynak

    Uzak bir platformda barındırılıyorsa

    Uzaktan barındırma platformu kullanma
  • Oluştur'a basın.
  • Yeni istemci kimliğini kopyalayın.

Son bir şey

Yeni istemci kimliğini kullanmak için index.html bölümüne geri dönüp güncelleme yapmamız gerekiyor. Düzenleyicinizde PUT_YOUR_WEB_CLIENT_ID_HERE yerine yeni istemci kimliğinizi girin. Bir istemci kimliği şu örneğe benzer: 1234567890-abc123def456.apps.googleusercontent.com.

Oturum açalım.

5. Oturum aç

Öncelikle tarayıcınızın geliştirici konsolunu açın. Hatalar ve Google'dan döndürülen JWT kimlik jetonu kimlik bilgisi burada günlüğe kaydedilir.

Google ile oturum açma düğmesine basın.

Bundan sonraki adımlar biraz farklılık gösterebilir:

  • Şu anda birden fazla Google Hesabı'nda oturum açtıysanız bu web uygulamasında oturum açmak için hangi hesabı kullanacağınızı seçmeniz istenir.
  • Bu web uygulamasında ilk kez oturum açıyorsanız izin istemi gösterilir.

İsteğe bağlı olarak bir hesap seçip izninizi verdikten sonra Google, JWT ile yanıt verir. Tarayıcıda çalışan handleCredentialResponse geri çağırma işlevi, JWT'yi alır.

Bu Codelab'de JWT içeriklerini kodunu çözüp yazdırıyoruz. Üretim web uygulamasında ise kodu çözülen JWT'yi doğrulayıp arka uç platformunuzda yeni bir hesap oluşturma veya kullanıcı için yeni bir oturum oluşturma gibi daha anlamlı bir işlem yapmak için kullanacaksınız.

6. JWT kimlik jetonunu inceleme

Kodlanmış JWT, geliştirici konsoluna kaydedilir. JWT'nin kodu çözüldükten sonra, sık kullanılan bazı kimlik jetonu alanları da konsola kaydedilir.

JWT'nin kodunu çözmek için jwt.io gibi online araçları kullanabilirsiniz.

Alternatif olarak, JWT'yi kodunu çözüp görüntülemek için terminalinizde jq komutunu da kullanabilirsiniz (jq'yu yüklemek için paket yöneticinizi kullanmanız gerekebilir). Öncelikle, kodlanmış JWT dizesini çift tırnak içine yapıştırın:

$ JWT="eyJhbGciOiJSUzI1Ni ... Hecz6Wm4Q"

ve ardından bu komutu kullanarak kodu çözün.

$ echo $JWT | jq -R 'split(".") | .[0],.[1] | @base64d | fromjson' {   "alg": "RS256",   "kid": "c7e04465649ffa606557650c7e65f0a87ae00fe8",   "typ": "JWT" } {   "iss": "https://accounts.google.com",   "azp": "123456789012-s0meRand0mStR1nG.apps.googleusercontent.com",   "aud": "123456789012-s0meRand0mStR1nG.apps.googleusercontent.com",   "sub": "2718281828459045",   "email": "[email protected]",   "email_verified": true,   "nbf": 1744645148,   "name": "Brian Daugherty",   "picture": "https://lh3.googleusercontent.com/a/08a898b88ca4d6407be652d8",   "given_name": "Brian",   "family_name": "Daugherty",   "iat": 1744645448,   "exp": 1744649048,   "jti": "52cd32984b30e178aa88bc2e75e63e055a461fcf" }

E-posta, ad ve resim gibi bazı anahtarların ve değerlerin anlaşılması oldukça kolaydır. JWT'yi kullanmadan önce doğrulamak için başka değerler kullanılır. Kimlik jetonundan kullanıcı bilgilerini alma başlıklı makalede tüm alanların ne anlama geldiği hakkında daha fazla bilgi verilmektedir.

7. Düğmeyi özelleştirme

Bir sayfaya varsayılan oturum açma düğmesi yerleştirme

    <div class="g_id_signin"></div>

ve bu düğmeyi görürsünüz

Google ile oturum açma düğmesi

Ancak belki de sitenizin temasına uygun olması için rengi, boyutu veya metni değiştirmek istersiniz.

Düğme rengini mavi yapalım ve Google ile kaydolun yazalım.

index.html dosyasını açın, g_id_signin öğesini bulun ve data-theme="filled_blue" ile data-text="signup_with" özelliklerini ekleyin:

    <div       class="g_id_signin"       data-theme="filled_blue"       data-text="signup_with"     ></div>

Sayfayı kaydedip yeniden yükledikten sonra yeni metnin yer aldığı mavi bir düğme görürsünüz.

Google ile kaydolma düğmesi

Düğmeyi daha da özelleştirebilirsiniz. Seçeneklerin tam listesi için Görsel Veri özellikleri'ne göz atın ve HTML kodu oluşturucumuzu deneyin.

8. Ek Kaynaklar

Tebrikler!

Bir web sayfasına Google ile oturum açma düğmesi eklediniz, OAuth 2.0 web istemcisini yapılandırdınız, JWT kimlik jetonunun kodunu çözdünüz ve düğmenin görünümünü nasıl özelleştireceğinizi öğrendiniz.

Aşağıdaki bağlantılar, sonraki adımlarda size yardımcı olabilir:

Sık sorulan sorular