יצירת לחצן מותאם אישית לכניסה באמצעות חשבון Google

כדי ליצור לחצן כניסה לחשבון Google עם הגדרות בהתאמה אישית, מוסיפים דף לכניסה לדף הכניסה, כותבים פונקציה שמפעילה את signin2.render() עם הגדרות הסגנון וההיקף, וכוללים את הסקריפט https://apis.google.com/js/platform.js עם מחרוזת השאילתה onload=YOUR_RENDER_FUNCTION.

בדוגמה הבאה מוצג לחצן כניסה לחשבון Google עם פרמטרים מותאמים אישית של סגנון:

הקוד הבא ב-HTML, ב-JavaScript וב-CSS יוצר את הלחצן שלמעלה:

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

אפשר גם לציין הגדרות ללחצן 'כניסה באמצעות חשבון Google' בהתאמה אישית על ידי הגדרת מאפייני data- לרכיב div עם הכיתה g-signin2. לדוגמה:

<div class="g-signin2" data-width="300" data-height="200" data-longtitle="true">

יצירת לחצן עם גרפיקה בהתאמה אישית

אתם יכולים ליצור לחצן כניסה באמצעות חשבון Google שיתאימו לעיצוב של האתר. עליכם לפעול בהתאם להנחיות למיתוג ולהשתמש בצבעים ובסמלים המתאימים בלחצן. בהנחיות למיתוג מפורטים גם נכסי סמלים שאפשר להשתמש בהם כדי לעצב את הלחצן. בנוסף, חשוב לוודא שהלחצן בולט כמו אפשרויות אחרות לכניסה באמצעות חשבון של צד שלישי.

בדוגמה הבאה מוצג לחצן לכניסה באמצעות חשבון Google שנוצר באמצעות גרפיקה בהתאמה אישית:

הקוד הבא ב-HTML, ב-JavaScript וב-CSS יוצר את הלחצן שלמעלה:

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