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