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önetir. Google API'leriyle entegrasyonunuzu basitleştirin. Kullanıcı her zaman bir kullanıcının erişimini iptal edebilir istediğiniz zaman değiştirebilirsiniz.

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 yetkilendirme kimlik bilgilerine sahip olması gerekir kimliği tanımlayabileceksiniz. Aşağıdaki adımlarda, projenizin kimlik bilgilerini oluşturmalarını sağlar. Böylece uygulamalarınız kimlik bilgilerini kullanarak API'lere erişebilir bilgileri görürsünüz.

  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ı ayrıca ancak yalnızca sunucu tarafı işlemler için gerekir.)

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

Entegre edilen web sayfalarınıza Google Platform Kitaplığı'nı, Google ile Oturum Açma.

<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 belirtme google-signin-client_id meta öğesiyle değiştirin.

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

Google ile Oturum Açma düğmesi ekleyin

Sitenize Google ile Oturum Açma düğmesi eklemenin en kolay yolu otomatik oluşturulan oturum açma düğmesi. Sadece birkaç satır kod kullanarak uygun metni içerecek şekilde kendini otomatik olarak yapılandıran bir düğme ekleyin, logosu ve kullanıcının oturum açma durumu ile istediğiniz kapsamların renklerini içerir.

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

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

Profil bilgilerini alma

Varsayılan kapsamları kullanarak bir kullanıcının Google hesabında oturum açtıktan sonra şunları yapabilirsiniz: Kullanıcının Google kimliğine, adına, profil URL'sine ve e-posta adresine erişebilir.

Bir kullanıcının profil bilgilerini almak için şunu kullanın: getBasicProfile() yöntemidir.

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 Google oturumlarını kapatmadan uygulamanızda oturumlarını kapatmalarını sağlamak için bir oturum kapatma düğmesi veya bağlantısı ekleyerek. Oturumu kapatma bağlantısı oluşturmak için şunu çağıran bir fonksiyon: GoogleAuth.signOut() yöntemini çağırın.onclick

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