Benutzerdefinierte Google Log-in-Schaltfläche erstellen

Um eine Google Log-in-Schaltfläche mit benutzerdefinierten Einstellungen zu erstellen, fügen Sie ein Element, das die Anmeldeseite enthält, schreiben Sie eine Funktion das ruft signin2.render() mit Ihren Einstellungen für Stil und Umfang und das Skript https://apis.google.com/js/platform.js einfügen durch den Abfragestring onload=YOUR_RENDER_FUNCTION.

Das folgende Beispiel zeigt eine Google Log-in-Schaltfläche, mit der benutzerdefinierten Stilparametern:

Die obige Schaltfläche wird aus folgendem HTML-, JavaScript- und CSS-Code erstellt:

<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>

Sie können auch Einstellungen für eine benutzerdefinierte Google Log-in-Schaltfläche festlegen, indem Sie data--Attributen einem div-Element mit der Klasse g-signin2. Beispiel:

<div class="g-signin2" data-width="300" data-height="200" data-longtitle="true">

Schaltfläche mit einer benutzerdefinierten Grafik erstellen

Sie können eine Google Log-in-Schaltfläche erstellen, die zum Design Ihrer Website passt. Beachte die Markenrichtlinien und verwende die entsprechenden Farben und Symbole in Ihrer Schaltfläche verwenden. Die Branding-Richtlinien enthalten auch Symbol-Assets zur Verfügung stellen, mit denen Sie Ihre Schaltfläche gestalten können. Außerdem müssen Sie Achten Sie darauf, dass Ihre Schaltfläche so auffällig ist wie andere Anmeldeoptionen von Drittanbietern.

Das folgende Beispiel zeigt eine Google Log-in-Schaltfläche, die mit einer benutzerdefinierten Grafik:

Die obige Schaltfläche wird aus folgendem HTML-, JavaScript- und CSS-Code erstellt:

<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>