Merhaba Google Sign-In işlemini tek bir sayfaya eklemek istiyorsanız, bu makale size çok yardımcı olacaktır. Bu makale içerisinde, google hesabını kullanarak web sitenize giriş yapmanın en kolay yolunu sunacağım.
Google API’larını ve birkaç satırlık JavaScript kodunu kullanarak, tek sayfalı oturum açma işlemi web uygulamasına entegre edilebilir. JavaScript’i kullanarak Google Hesabı ile Oturum Açma işlemini uygulamak için adım adım komutları izleyin.
Bir Google Developers Console Projesi oluşturun
Başlamadan önce Bir Google Developers Console projesi ve müşteri kimliği oluşturun. Web uygulaması için Yetkili JavaScript kaynaklarını ve Yetkili yönlendirmeli URL’leri ayarlamanız gerekir. Ayrıca komut dosyanızdaki istemci kimliğini de belirtmeniz gerekir.
https://console.developers.google.com
Google Developers Console projesini oluşturduktan sonra, aşağıdaki 3 şey yapılmalıdır.
- Google+ API, Google Developers Console’da etkinleştirilmiş olmalıdır.
- http://localhost, Google Developers Console’da Yetkili JavaScript kökenleri olarak ayarlanmış durumdadır.
- Web uygulaması için Client ID alınmış olmalıdır.
Google Developers Console’da oluşturduğunuz uygulamanızın Müşteri Kimliğini google-sign-in-client_id meta öğesiyle eşleştirip, meta kodunu sayfanıza ekleyin.
<head>
<meta name="google-signin-client_id" content="YOUR_CLIENT_ID.apps.googleusercontent.com">
</head>
Google Platform Kütüphanesini, onload işlevi işlevinin sorgu dizesiyle birlikte ekleyin.
<script src="https://apis.google.com/js/client:platform.js?onload=renderButton" async defer></script>
Burada, oturum açtıktan sonra kullanıcı bilgilerini görüntülemek için jQuery kitaplığını kullanacağız. İhtiyacınıza göre jQuery kütüphanesini eklemeyi atlayabilirsiniz.
<script src="jquery.min.js"></script>
Google giriş işlemlerini yazacağımız 4 adet fonksiyon ile konuşturacağız. Hemen bu kodları yazalım.
function onSuccess(googleUser) {
var profile = googleUser.getBasicProfile();
gapi.client.load('plus', 'v1', function () {
var request = gapi.client.plus.people.get({
'userId': 'me'
});
//Display the user details
request.execute(function (resp) {
var profileHTML = '<div class="profile"><div class="head">Welcome '+resp.name.givenName+'! <a href="javascript:void(0);" onclick="signOut();">Sign out</a></div>';
profileHTML += '<img src="'+resp.image.url+'"/><div class="proDetails"><p>'+resp.displayName+'</p><p>'+resp.emails[0].value+'</p><p>'+resp.gender+'</p><p>'+resp.id+'</p><p><a href="'+resp.url+'">View Google+ Profile</a></p></div></div>';
$('.userContent').html(profileHTML);
$('#gSignIn').slideUp('slow');
});
});
}
function onFailure(error) {
alert(error);
}
function renderButton() {
gapi.signin2.render('gSignIn', {
'scope': 'profile email',
'width': 240,
'height': 50,
'longtitle': true,
'theme': 'dark',
'onsuccess': onSuccess,
'onfailure': onFailure
});
}
function signOut() {
var auth2 = gapi.auth2.getAuthInstance();
auth2.signOut().then(function () {
$('.userContent').html('');
$('#gSignIn').slideDown('slow');
});
}
Aşağıda google ile giriş yap butonu ve kullanıcı bilgilerini göstereceğimiz 2 adet alan oluşturalım.
<!-- HTML for render Google Sign-In button --> <div id="gSignIn"></div> <!-- HTML for displaying user details --> <div class="userContent"></div>
Kullanıcı ayrıntıları bölümünü şekillendirmek için biraz CSS kullanalım.
.profile{
border: 3px solid #B7B7B7;
padding: 10px;
margin-top: 10px;
width: 350px;
background-color: #F7F7F7;
height: 160px;
}
.profile p{margin: 0px 0px 10px 0px;}
.head{margin-bottom: 10px;}
.head a{float: right;}
.profile img{width: 100px;float: left;margin: 0px 10px 10px 0px;}
.proDetails{float: left;}
Bir sonraki makalemizde görüşmek üzere, huzurlu günler dilerim.
[…] değerli blog takipçilerim. Bir süre önce sizlerle Google hesabı ile giriş yapma adlı makalemi paylaşmıştım. Güzel geri dönüşlerinizi aldım, öncelikle teşekkür ederim. […]
EYW