Bu sayfa, Cloud Translation API ile çevrilmiştir.

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

1. Genel Bakış

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

Neler öğreneceksiniz?

Web sayfasına Google ile oturum açma düğmesi ekleme
OAuth 2.0 web uygulaması nasıl kurulur?
Kimlik jetonunun kodu nasıl çözülür?
Google ile oturum aç düğmesini özelleştirme

İhtiyacınız olanlar

Bu Codelab'de ele alacağımız metin düzenleyici ve web sayfası barındırma alanı:
- makinenizdeki bir terminalde yerel olarak çalıştırma veya
- Glitch gibi bir platform kullanarak.
Size en uygun ortamı seçin.
Bir Google Cloud projesi. Mevcut projenizi kullanabilir veya yeni bir proje oluşturabilirsiniz. Google Cloud Platform hesapları ve projeleri ücretsizdir.
Temel 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şturun

Devam edin ve bu kod örneğini index.html adlı bir dosyaya ekleyin. Bu işlemi makinenizde veya favori metin düzenleyicinizi kullanarak ya da 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 birçok işlevi vardır:

bu Google Kimlik Hizmetleri kitaplığını g_id_onload ile yapılandırır
g_id_signin kullanılarak Google ile oturum aç düğmesi gösteriliyorsa
Google'dan kullanıcı oturum açma kimlik bilgisini almak için handleCredentialResponse adlı bir JavaScript geri çağırma işlevi işleyicisi ekler ve
JSON Web Token (JWT) kimlik bilgisini düz JSON'a dönüştürmek için bir decodeJWT işlevi.

data-client_id="PUT_YOUR_WEB_CLIENT_ID_HERE" ile ilgili bir sorun var gibi görünebilir.

Şimdilik bu sözü görmezden gelin, birazdan tekrar ele alacağız.

3. Web sayfanızı sunun

Tarayıcıya index.html sunmak için iki ortamdan bahsedeceğiz:

makinenizde yerel olarak bir web sunucusu çalıştırma
Glitch gibi uzak bir platform değil.

Size en uygun seçeneği belirleyin. Kurulumdan sonra bu URL'yi kullanarak OAuth web istemcisi yapılandıracağız.

Makinenizden yerel olarak

Sisteminizde Python3'ün yüklü olduğundan emin olun. Kurulum, işletim sistemi ve platforma göre değişiklik gösterir. Makinenize Python'u yüklemeniz gerekiyorsa Python Kurulumu ve Kullanımı bölümünden başlayın.

index.html öğesini 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/) ...

Bir web sunucusu şu anda 8000 numaralı bağlantı noktasındaki bağlantıları dinliyor ve oturum açma sayfanızı sunmaya hazır. URL

http://localhost:8000

Uzak bir platform kullanma

Oturum açma sayfanızı Glitch (veya eşdeğer bir sayfa) kullanarak düzenlemeyi ve barındırmayı seçtiyseniz index.html öğesini önizleme bölmesinde veya yeni tarayıcı sekmesinde açabilmeniz gerekir.

Genellikle, URL'yi glich.com projenizi ayarlarken girdiğiniz proje adı olarak kullanırsınız. Örneğin, arıza projenizin adı gis-example ise URL'nin adı https://gis-example.glitch.me olur. Elbette farklı bir proje adı seçmiş olduğunuz için bu adı yeniden kullanamazsınız. URL

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

Sayfayı yükle

Bir saniye bekleyin...

Önce bir OAuth 2.0 web istemcisi oluşturmamız ve onu yapılandırmamız gerekiyor.

URL'yi kopyalayın veya not alın. Sonraki adımda kullanılacaktır.

4. OAuth web istemcisi kurma

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şturmanıza ve kurmanıza yardımcı olacaktır.
Uygulama türü açılır listesinden Web uygulaması'nı seçin.
Yetkilendirilmiş JavaScript kaynakları altındaki URI ekle düğmesine basın
3. Adım: Web sayfanızı sunun'daki index.html sayfasını barındıran URL'yi girin.
Yerel makinenizde barındırılıyor

Uzak bir platformda barındırılır
Oluştur'a basın
Yeni Client-ID'yi kopyalayın.

Son bir şey

Yeni Client-ID'yi kullanmak için geri dönüp index.html hizmetini güncellememiz gerekiyor. Düzenleyicinizde, PUT_YOUR_WEB_CLIENT_ID_HERE yerine yeni Client-ID'nizi girin. İstemci kimliği şu örnekteki gibi görünür: 1234567890-abc123def456.apps.googleusercontent.com.

Oturum açalım!

5. Oturum aç

Öncelikle tarayıcınızın geliştirici konsolunu açın. Google'dan döndürülen JWT kimliği jetonuyla ilgili kimlik bilgisi ve hata varsa buraya kaydedilir.

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

Bundan sonra olacaklar 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 kullanacağınız hesabı seçmeniz istenir.
Bu web uygulamasında ilk kez oturum açıyorsanız bir izin istemi gösterilir.

İsteğe bağlı olarak bir hesap seçip izin 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çeriğinin kodunu çözüp yazdırıyoruz. Kodu çözülmüş JWT'yi, üretim web uygulamasında doğrulayıp bu işlemi kullanarak arka uç platformunuzda yeni hesap oluşturma veya kullanıcı için yeni oturum oluşturma gibi daha anlamlı işlemler gerçekleştireceksiniz.

6. JWT kimlik jetonunu inceleyin

Kodlanmış JWT, geliştirici konsoluna kaydedilir. JWT'nin kodu çözüldükten sonra, yaygın olarak kullanılan bazı kimlik jetonu alanları da konsolda günlüğe kaydedilir.

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

Alternatif olarak, JWT'nin kodunu çözmek ve görüntülemek için terminalinizdeki jq de kullanılabilir (jq'yi yüklemek için paket yöneticinizi kullanmanız gerekebilir). İlk olarak, kodlanmış JWT dizesini çift tırnak içine yapıştırın:

$ JWT="eyJhbGciOiJSUzI1Ni ... Hecz6Wm4Q"

ve ardından kodu çözmek için bu komutu kullanı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": "example@example.com",
  "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 ve değerler kolayca anlaşılır olmalıdır. Kullanmadan önce JWT'yi doğrulamak için diğer değerler kullanılır. Kimlik jetonundan kullanıcı bilgileri alma, tüm alanların anlamı hakkında daha fazla bilgi sunar.

7. Düğmeyi özelleştir

Bir sayfaya varsayılan oturum açma düğmesi şu şekilde yerleştirilir:

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

Bu düğmeyi

Belki de rengi, boyutu veya metni sitenizin temasına uyacak şekilde değiştirmek isteyebilirsiniz.

Düğme rengini mavi olarak değiştirip bunun yerine Sign up with Google (Google ile kaydolun) ifadesini kullanalım.

index.html öğesini açın, g_id_signin öğesini bulun, ardından data-theme="filled_blue" ve 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 metni içeren mavi bir düğme görürsünüz.

Düğmeyi daha fazla özelleştirebilirsiniz. Seçeneklerin tam listesi için Görsel Veri özellikleri bölümüne bakın.

8. Ek Kaynaklar

Tebrikler!

Bir web sayfasına Google ile Oturum Aç düğmesi eklediniz, bir OAuth 2.0 web istemcisi yapılandırdınız, bir JWT kimliği 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:

Google Kimlik Hizmetleri HTML API
Google Kimlik Hizmetleri JavaScript API'si
Web için Google ile oturum açma özelliğini ayarlama
Google kimlik jetonunu doğrulama
Google Cloud projeleri hakkında daha fazla bilgiye buradan ulaşabilirsiniz.
Google kimliği kimlik doğrulama yöntemleri

Sık sorulan sorular

StackOverflow