Benutzerdefinierte Google Log-in-Schaltfläche erstellen

Wenn Sie eine Google Log-in-Schaltfläche mit benutzerdefinierten Einstellungen erstellen möchten, fügen Sie Ihrer Anmeldeseite ein Element für die Anmeldeschaltfläche hinzu, schreiben Sie eine Funktion, die signin2.render() mit Ihren Stil- und Bereichseinstellungen aufruft, und fügen Sie das Skript https://apis.google.com/js/platform.js mit dem Abfragestring onload=YOUR_RENDER_FUNCTION ein.

Hier sehen Sie ein Beispiel für eine Google Log-in-Schaltfläche mit benutzerdefinierten Stilparametern:

Der folgende HTML-, JavaScript- und CSS-Code erzeugt die obige Schaltfläche:

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

Du kannst auch Einstellungen für eine benutzerdefinierte Google Log-in-Schaltfläche angeben, indem du data--Attribute für ein div-Element mit der Klasse g-signin2 definierst. Beispiel:

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

Erstellen einer Schaltfläche mit einer benutzerdefinierten Grafik

Du kannst eine Google Log-in-Schaltfläche erstellen, die zum Design deiner Website passt. Sie müssen die Branding-Richtlinien einhalten und die entsprechenden Farben und Symbole für die Schaltfläche verwenden. Die Branding-Richtlinien enthalten auch Symbol-Assets, mit denen Sie Ihre Schaltfläche gestalten können. Außerdem musst du darauf achten, dass deine Schaltfläche genauso gut sichtbar ist wie die Anmeldeoptionen anderer Drittanbieter.

Hier ein Beispiel für eine Google Log-in-Schaltfläche mit einer benutzerdefinierten Grafik:

Der folgende HTML-, JavaScript- und CSS-Code erzeugt die obige Schaltfläche:

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