יצירת לחצן מותאם אישית לכניסה באמצעות חשבון 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>