Otomatik oluşturulan oturum açma düğmesini özelleştirme (önerilir)
Özel ayarlarla bir Google ile Oturum Açma düğmesi oluşturmak için
oturum açma sayfanızın oturum açma düğmesini içerecek bir öğe, bir işlev yazın
şunu çağıran:
signin2.render()
pek çok yolu vardır.
https://apis.google.com/js/platform.js
komut dosyasını dahil edin.
onload=YOUR_RENDER_FUNCTION
sorgu dizesiyle.
Aşağıdaki örnekte, oturum açtığınız e-posta adresini belirten özel stil parametreleri:
Aşağıdaki HTML, JavaScript ve CSS kodu yukarıdaki düğmeyi oluşturur:
<html> <head> <meta name="google-signin-client_id" content="YOUR_CLIENT_ID.apps.googleusercontent.com"> </head> <body> <div id="my-signin2"></div> <script> function onSuccess(googleUser) { console.log('Logged in as: ' + googleUser.getBasicProfile().getName()); } function onFailure(error) { console.log(error); } function renderButton() { gapi.signin2.render('my-signin2', { 'scope': 'profile email', 'width': 240, 'height': 50, 'longtitle': true, 'theme': 'dark', 'onsuccess': onSuccess, 'onfailure': onFailure }); } </script> <script src="https://apis.google.com/js/platform.js?onload=renderButton" async defer></script> </body> </html>
Ayrıca, aşağıdakileri tanımlayarak özel bir Google ile Oturum Açma düğmesi için ayarlar belirtebilirsiniz:
data-
, g-signin2
sınıfına sahip bir div
öğesiyle ilişkilendirir. Örneğin:
<div class="g-signin2" data-width="300" data-height="200" data-longtitle="true">
Özel grafik içeren bir düğme oluşturma
Sitenizin tasarımına uyacak bir Google ile Oturum Açma düğmesi oluşturabilirsiniz. Markalama kurallarına uymalı ve uygun renkleri ve simgeleri kullanın. Markalama kuralları da Düğmenizi tasarlamak için kullanabileceğiniz simge öğeleri sağlar. Ayrıca düğmenizin diğer üçüncü taraf giriş seçenekleri kadar belirgin olmasını sağlayın.
Aşağıda, özel bir grafik:
Aşağıdaki HTML, JavaScript ve CSS kodu yukarıdaki düğmeyi oluşturur:
<html> <head> <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet" type="text/css"> <script src="https://apis.google.com/js/api:client.js"></script> <script> var googleUser = {}; var startApp = function() { gapi.load('auth2', function(){ // Retrieve the singleton for the GoogleAuth library and set up the client. auth2 = gapi.auth2.init({ client_id: 'YOUR_CLIENT_ID.apps.googleusercontent.com', cookiepolicy: 'single_host_origin', // Request scopes in addition to 'profile' and 'email' //scope: 'additional_scope' }); attachSignin(document.getElementById('customBtn')); }); }; function attachSignin(element) { console.log(element.id); auth2.attachClickHandler(element, {}, function(googleUser) { document.getElementById('name').innerText = "Signed in: " + googleUser.getBasicProfile().getName(); }, function(error) { alert(JSON.stringify(error, undefined, 2)); }); } </script> <style type="text/css"> #customBtn { display: inline-block; background: white; color: #444; width: 190px; border-radius: 5px; border: thin solid #888; box-shadow: 1px 1px 1px grey; white-space: nowrap; } #customBtn:hover { cursor: pointer; } span.label { font-family: serif; font-weight: normal; } span.icon { background: url('/identity/sign-in/g-normal.png') transparent 5px 50% no-repeat; display: inline-block; vertical-align: middle; width: 42px; height: 42px; } span.buttonText { display: inline-block; vertical-align: middle; padding-left: 42px; padding-right: 42px; font-size: 14px; font-weight: bold; /* Use the Roboto font that is loaded in the <head> */ font-family: 'Roboto', sans-serif; } </style> </head> <body> <!-- In the callback, you would hide the gSignInWrapper element on a successful sign in --> <div id="gSignInWrapper"> <span class="label">Sign in with:</span> <div id="customBtn" class="customGPlusSignIn"> <span class="icon"></span> <span class="buttonText">Google</span> </div> </div> <div id="name"></div> <script>startApp();</script> </body> </html>