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