Google ile Oturum Açma özelliğini web uygulamanıza entegre etme

Google ile oturum açma, OAuth 2.0 akışını ve jeton yaşam döngüsünü yöneterek Google API'leriyle entegrasyonunuzu kolaylaştırır. Kullanıcılar, bir uygulamaya erişimi istedikleri zaman iptal edebilirler.

Bu belgede, temel bir Google ile Giriş entegrasyonunun nasıl tamamlanacağı açıklanmaktadır.

Yetkilendirme kimlik bilgileri oluşturma

Google API'lerine erişmek için OAuth 2.0'ı kullanan tüm uygulamalarda, uygulamayı Google'ın OAuth 2.0 sunucusuna tanıtan yetkilendirme kimlik bilgileri bulunmalıdır. Aşağıdaki adımlarda, projeniz için kimlik bilgilerinin nasıl oluşturulacağı açıklanmaktadır. Uygulamalarınız daha sonra bu kimlik bilgilerini kullanarak söz konusu proje için etkinleştirdiğiniz API'lere erişebilir.

  1. Go to the Clients page.
  2. Create Client'ı (İstemci Oluştur) tıklayın.
  3. Web uygulaması uygulama türünü seçin.
  4. OAuth 2.0 istemcinizi adlandırın ve Oluştur'u tıklayın.

Yapılandırma tamamlandıktan sonra oluşturulan istemci kimliğini not edin. Sonraki adımları tamamlamak için istemci kimliğine ihtiyacınız olacaktır. (İstemci gizli anahtarı da oluşturulur ancak bu anahtara yalnızca sunucu tarafı işlemleri için ihtiyacınız vardır.)

Google Platform Kitaplığı'nı yükleme

Google ile oturum açma özelliğini entegre eden web sayfalarınıza Google Platform Kitaplığı'nı eklemeniz gerekir.

<script src="https://apis.google.com/js/platform.js" async defer></script>

Uygulamanızın istemci kimliğini belirtin

Google Developers Console'da uygulamanız için oluşturduğunuz istemci kimliğini google-signin-client_id meta öğesiyle belirtin.

<meta name="google-signin-client_id" content="YOUR_CLIENT_ID.apps.googleusercontent.com">

Google ile oturum açma düğmesi ekleme

Sitenize Google ile oturum açma düğmesi eklemenin en kolay yolu, otomatik olarak oluşturulan bir oturum açma düğmesi kullanmaktır. Yalnızca birkaç satır kodla, kullanıcının oturum açma durumu ve istediğiniz kapsamlar için uygun metin, logo ve renklere sahip olacak şekilde otomatik olarak yapılandırılan bir düğme ekleyebilirsiniz.

Varsayılan ayarları kullanan bir Google ile Oturum Açma düğmesi oluşturmak için oturum açma sayfanıza div sınıfına sahip bir g-signin2 öğesi ekleyin:

<div class="g-signin2" data-onsuccess="onSignIn"></div>

Profil bilgilerini alma

Varsayılan kapsamları kullanarak bir kullanıcının Google ile oturum açmasını sağladıktan sonra kullanıcının Google kimliğine, adına, profil URL'sine ve e-posta adresine erişebilirsiniz.

Bir kullanıcının profil bilgilerini almak için getBasicProfile() yöntemini kullanın.

function onSignIn(googleUser) {
  var profile = googleUser.getBasicProfile();
  console.log('ID: ' + profile.getId()); // Do not send to your backend! Use an ID token instead.
  console.log('Name: ' + profile.getName());
  console.log('Image URL: ' + profile.getImageUrl());
  console.log('Email: ' + profile.getEmail()); // This is null if the 'email' scope is not present.
}

Kullanıcının oturumunu kapatma

Sitenize bir oturumu kapatma düğmesi veya bağlantısı ekleyerek kullanıcıların Google'da oturumu kapatmadan uygulamanızda oturumu kapatmalarını sağlayabilirsiniz. Oturumu kapatma bağlantısı oluşturmak için bağlantının onclick etkinliğine GoogleAuth.signOut() yöntemini çağıran bir işlev ekleyin.

<a href="#" onclick="signOut();">Sign out</a>
<script>
  function signOut() {
    var auth2 = gapi.auth2.getAuthInstance();
    auth2.signOut().then(function () {
      console.log('User signed out.');
    });
  }
</script>