Beispielcode zur Implementierung der Google-Anmeldung über Drittanbieter in Vue

1. Konfiguration der Entwicklerplattform

1. Rufen Sie die Entwicklerplattform auf und gehen Sie zur Google API-Konsole, um ein Projekt auszuwählen oder zu erstellen.

Google Developer Platform

Es gibt so viele schillernde APIs, dass Sie nicht aus einer auswählen können, aber denken Sie daran, dass Ihr Ziel dieses Mal ist: soziale API

2. Bevor Sie diese API verwenden können, müssen Sie noch eine OAuth 2.0-Client-ID beantragen.

3 Geben Sie den Typ, den Namen und die Quell-URL Ihres Projekts nach Bedarf ein

Hinweis: Nach Abschluss der Erstellung wird auf der Seite ein Popup-Fenster mit der Client-ID und dem Schlüssel angezeigt, die Sie beantragt haben. Ja, dies ist ein Generierungsprozess.

4. Installieren Sie vue-google-signin-button

npm installiere vue-google-signin-button --speichern

5. Importieren und registrieren Sie sich in main.js

GSignInButton aus „vue-google-signin-button“ importieren
Vue.use(GSignInButton);

6.Fügen Sie die js-Datei in index.html ein.

<!--Für die Google-Anmeldung ist eine js-Abhängigkeit erforderlich-->
<script src="//apis.google.com/js/api:client.js"></script>

7. Verwenden Sie Komponenten in login.vue

<Vorlage>
  <g-Anmeldeschaltfläche
    :params="googleSignInParams"
    @success="beierfolgreicherAnmeldung"
    @error="beiFehlerderAnmeldung">
    Mit Google anmelden
  </g-Anmeldeschaltfläche>
</Vorlage>

<Skript>
Standard exportieren {
  Daten () {
    zurückkehren {
      /**
       * Die Auth2-Parameter, wie auf
       * https://developers.google.com/identity/sign-in/web/reference#gapiauth2initparams.
       * Als Mindestanforderung muss eine gültige Client-ID vorhanden sein.
       * @typ {Objekt}
       */
      googleSignInParams: {
        client_id: "IHRE_APP_CLIENT_ID.apps.googleusercontent.com"
      }
    }
  },
  Methoden: {
    beierfolgreicher Anmeldung (Google-Benutzer) {
      console.log(googleBenutzer)
      const Profil = GoogleUser.getBasicProfile()
      console.log(Profil)
    },
    beiAnmeldungFehler (Fehler) {
      console.log('OH NEIN', Fehler)
    }
  }
}
</Skript>

<Stil>
.g-Anmeldeschaltfläche {
  /* Hier legen Sie fest, wie die Schaltfläche aussieht. Seien Sie kreativ! */
  Anzeige: Inline-Block;
  Polsterung: 4px 8px;
  Rahmenradius: 3px;
  Hintergrundfarbe: #3c82f7;
  Farbe: #fff;
  Kastenschatten: 0 3px 0 #0f69ff;
}
</Stil>

Das Problem lösen

1. Problem 1: Die Initialisierung führt kein js ein

Sie werden feststellen, dass während der Initialisierung eine Fehlermeldung auf der Seite angezeigt wird.

Der Grund für dieses Problem liegt darin, dass das Plug-In selbst die Datei Google.js nicht einführt. Die Lösung besteht darin, es in Vues index.html einzuführen, Einzelheiten finden Sie in der Abbildung unten.

Dies ist das Ende dieses Artikels über den Beispielcode zur Implementierung der Google-Drittanbieteranmeldung in Vue. Weitere relevante Inhalte zur Google-Drittanbieteranmeldung in Vue finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!