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

Koleksiyonlar ile düzeninizi koruyun İçeriği tercihlerinize göre kaydedin ve kategorilere ayırın.

Google ile Oturum Açma, OAuth 2.0 akışını ve jeton yaşam döngüsünü yöneterek Google API'leriyle entegrasyonunuzu basitleştirir. Kullanıcılar, istedikleri zaman bir uygulamaya erişimi iptal edebilir.

Bu dokümanda, temel bir Google ile Oturum Açma 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 uygulamaların, uygulamayı Google'ın OAuth 2.0 sunucusuna tanımlayan yetkilendirme kimlik bilgilerine sahip olması gerekir. Aşağıdaki adımlarda projeniz için kimlik bilgilerinin nasıl oluşturulacağı açıklanmaktadır. Ardından uygulamalarınız, ilgili proje için etkinleştirdiğiniz API'lere erişmek üzere kimlik bilgilerini kullanabilir.

  1. Go to the Credentials page.
  2. Kimlik bilgisi oluştur > OAuth istemci kimliği seçeneğini 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 yalnızca sunucu tarafı işlemler için gereklidir.)

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

Google ile Oturum Açma özelliğini entegre eden web sayfalarınıza Google Platform Kitaplığı'nı dahil etmeniz gerekir.

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

Uygulamanızın istemci kimliğini belirtin

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

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

Google ile Oturum Açma düğmesi ekle

Sitenize bir Google ile Oturum Açma düğmesi eklemenin en kolay yolu, otomatik olarak oluşturulan bir oturum açma düğmesini kullanmaktır. Yalnızca birkaç satır kod kullanarak, kullanıcının oturum açma durumu ve istediğiniz kapsamlar için uygun metin, logo ve renkleri taşıyacak şekilde kendisini otomatik olarak yapılandıran 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 g-signin2 sınıfıyla bir div öğesi ekleyin:

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

Profil bilgilerini alma

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

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.
}

Bir kullanıcının oturumunu kapatma

Kullanıcıların oturumunuzu kapatmadan veya sitenize bir çıkış düğmesi veya Google bağlantısı ekleyerek uygulamanızın oturumunu 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>