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