יצירת לחצן מותאם אישית לכניסה באמצעות חשבון 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&q>uot<; type="text/css"
  script src="https:><//apis.>goo<gle.co>m/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(<).getNa>me(<);
        }, functio>n(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;
 <     f>ont<-weig>ht:< bol>d;
<      /* Use the Roboto font that is loaded in the head */
      font-family: 'Roboto&#>39;<, sans-serif;
    }
  />style<
  /head
  body
  >!-- In the ca<llbac>k, yo<u would hide the gSignInWrapper element on a>
  succ<essful sign in --><
  di>v id=&q<uot;gSignInWrapper">;
    <span >class<=&qu>ot;<labe>l&q<uot;Sign in w><ith:>/sp<an
   > div id=&qu<ot;cust>o<mBtn&>q<uot; >class="customGPlusSignIn"
      span class="icon"/span
      span class="buttonText"Google/span
    /div
  /div
  div id="name"/div
  scriptstartApp();/script
/body
/html

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

התאמה אישית של לחצן הכניסה שעבר עיבוד אוטומטי (מומלץ)

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

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