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