إنشاء زر مخصص لتسجيل الدخول بحساب 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>