So implementieren Sie die autorisierte WeChat-Anmeldung elegant in einem Vue3-Projekt

Vorwort

Die autorisierte Anmeldung bei WeChat ist ein Thema, das bei der Entwicklung öffentlicher WeChat-Konten nicht vermieden werden kann, und die Implementierung des gesamten autorisierten Anmeldeprozesses erfordert die Zusammenarbeit von Front-End und Back-End. In der Vergangenheit, als Front-End und Back-End nicht getrennt waren, mussten wir uns im Front-End vielleicht nicht allzu viele Gedanken über die spezifische Implementierung der Autorisierung machen. Doch wir schreiben jetzt das Jahr 2021 und die Architektur mit getrennten Front-Ends und Back-Ends ist beliebt. Wie man eine autorisierte WeChat-Anmeldung implementiert, wenn Front-End und Back-End getrennt sind, ist heute zum zentralen Thema geworden, das diskutiert werden muss.

Vorbereiten

Zunächst müssen wir noch den gesamten WeChat-Autorisierungsprozess klären. Hier werde ich das offizielle Dokument direkt verschieben:

Wenn ein Benutzer im WeChat-Client eine Webseite eines Drittanbieters besucht, kann das offizielle Konto die grundlegenden Informationen des Benutzers über den Autorisierungsmechanismus der WeChat-Webseite abrufen, um die Geschäftslogik zu implementieren.

...

Der Unterschied zwischen den beiden Bereichen der Webseitenautorisierung

1. Die mit snsapi_base als Bereich initiierte Webseitenautorisierung wird verwendet, um die OpenID des Benutzers abzurufen, der die Seite aufruft. Es handelt sich um eine stille Autorisierung und springt automatisch zur Rückrufseite. Der Benutzer hat den Eindruck, direkt auf die Rückrufseite (normalerweise eine Unternehmensseite) gelangt zu sein.

2. Die mit snsapi_userinfo als Bereich initiierte Webseitenautorisierung wird verwendet, um grundlegende Benutzerinformationen zu erhalten. Für diese Art der Autorisierung ist jedoch die manuelle Zustimmung des Benutzers erforderlich. Da der Benutzer zugestimmt hat, muss er nicht weiter darauf achten und die grundlegenden Informationen des Benutzers können nach der Autorisierung abgerufen werden.

...

Im Einzelnen gliedert sich der Web-Autorisierungsprozess in vier Schritte:

1. Leiten Sie den Benutzer zum Aufrufen der Autorisierungsseite, um der Autorisierung zuzustimmen und den Code zu erhalten

2. Tauschen Sie den Code gegen access_token für die Web-Autorisierung aus (anders als access_token im Basis-Support)

3. Bei Bedarf können Entwickler den Web-Autorisierungs-Access-Token aktualisieren, um ein Ablaufen zu vermeiden

4. Erhalten Sie grundlegende Benutzerinformationen über die Webseitenautorisierung access_token und openid (unterstützt den UnionID-Mechanismus)

Anbei finden Sie das offizielle Dokument zur WeChat-Autorisierung für die Entwicklung öffentlicher WeChat-Konten.

Das Obige sind einige der wichtigeren Informationen, die ich extrahiert habe. Natürlich gibt es noch weitere Erklärungen. Ich hoffe, dass unerfahrene Leser zuerst die offizielle Dokumentation sorgfältig lesen.

Lassen Sie mich hier hinzufügen, dass in den vier Schritten des obigen Prozesses, mit Ausnahme des ersten Schritts, die anderen drei Schritte auf der Serverseite abgeschlossen werden müssen. Der Kern des Front-Ends besteht eigentlich darin, den Anmeldestatus des Benutzers zu überprüfen und zu beurteilen und den Anmeldestatus beizubehalten.

Umsetzungsideen

Wie wir alle wissen, ist Vue ein Produkt der Front-End- und Back-End-Trennungstechnologielösung. Es ist eine reine Front-End-Anwendung (mit Ausnahme des serverseitigen Renderings). Wenn der Benutzer die Seite öffnet und das JS-Skript der Seite ausführt, müssen wir normalerweise die Serverdaten asynchron anfordern und dann die relevante Logik verarbeiten und beurteilen. Voraussetzung für die Implementierung der autorisierten WeChat-Anmeldung ist, dass wir zunächst feststellen müssen, ob sich der Benutzer anmelden muss (Cookie oder Token). Wenn der Benutzer nicht angemeldet ist, muss der Autorisierungs-Anmeldevorgang befolgt werden. Wenn die Autorisierungsanmeldung erfolgreich ist, müssen wir auch den Anmeldestatus am Frontend aufzeichnen, um den Seitenwechsel zu erleichtern, ohne die Autorisierungsanmeldung erneut auszulösen. Eine weitere Analyse zeigt, dass das Front-End tatsächlich den Code abrufen kann, den wir vom WeChat-Server erhalten haben, und diesen Code dann an unser Back-End weitergeben kann, damit das Back-End die nachfolgenden Schritte ausführen kann, um die Benutzerinformationen abzurufen und den Benutzer zu generieren. Anschließend fasse ich den gesamten Vorgang wie folgt zusammen:

1. (Front-End) Überprüfen Sie, ob der Benutzer angemeldet ist.
2. (Front-End) Wenn der Benutzer nicht angemeldet ist, leiten Sie ihn zur Autorisierungsseite weiter, um der Autorisierung zuzustimmen und den Code zu erhalten
3. (Frontend) Senden Sie den erhaltenen Code an das Backend
4. (Backend) Tauschen Sie den Code für die Benutzeranmeldeinformationen OpenID aus
5. (Backend) Überprüfen Sie über OpenID, ob der Benutzer vorhanden ist, ob ein neuer Benutzer registriert werden muss, und erhalten Sie die Benutzer-ID
6. (Backend) Benutzerinformationen zurückgeben;
7. (Front-End) Protokollieren Sie den Anmeldestatus des Benutzers und springen Sie vor der Anmeldung zurück zur Seite.
   

Ich habe diesen Vorgang wie folgt bildlich dargestellt:

Zum Code

Beginnen Sie nun auf der Grundlage der oben genannten Ideen mit der Codierungsphase. Der Autor verwendet Vue3 und Vue2-Entwickler werden gebeten, je nach Situation entsprechende Anpassungen vorzunehmen.
Um die Benutzerautorisierungslogik beim Anmelden zu erleichtern, beabsichtigt der Autor, die Autorisierungsanmeldung als Anmeldeseite zu versiegeln. Dies hat den Vorteil, dass wir über die Push-Methode des Vue Routers direkt zur Anmeldeseite springen können, wo immer wir der Meinung sind, dass eine Anmeldung erforderlich ist.

Normalerweise ist für den Zugriff auf alle Seiten unserer Anwendung nicht eine Anmeldung erforderlich. Nur beim Zugriff auf bestimmte Seiten müssen sich Benutzer anmelden. Dann müssen wir ermitteln, für welche Seiten eine Anmeldeauthentifizierung erforderlich ist. Hier können wir das Meta-Attribut von Vue Router zur Identifizierung verwenden. Das offizielle Dokument erklärt Meta wie folgt:

Manchmal möchten Sie einer Route beliebige Informationen hinzufügen, z. B. einen Übergangsnamen, wer auf die Route zugreifen kann usw. Dies kann durch den Empfang der Metaeigenschaft des Eigenschaftenobjekts erfolgen, auf das sowohl über die Routenadresse als auch über den Navigationsschutz zugegriffen werden kann.

Zufällig verfügt Vue Router offiziell über ein Beispiel, und zwar wie folgt:

const Routen = [
  {
    Pfad: '/posts',
    Komponente: PostsLayout,
    Kinder: [
      {
        Pfad: „neu“,
        Komponente: BeiträgeNeu,
        // Seiten, für die zum Zugriff auf Metadaten eine Anmeldung erforderlich ist: { requiresAuth: true }
      },
      {
        Pfad: ':id',
        Komponente: PostsDetail,
        // Für jeden zugängliche Seiten meta: { requiresAuth: false }
      }
    ]
  }
]

Als nächstes können wir diese Metadaten im globalen Guard von Vue Router vor jedem abrufen, um einen Login-Sprung zu machen

router.beforeEach((bis, von) => {
  // Anstatt jeden Routendatensatz zu prüfen // to.matched.some(record => record.meta.requiresAuth)
  wenn (to.meta.requiresAuth && !userStore.isLogin) {
    // Diese Route erfordert eine Autorisierung. Bitte überprüfen Sie, ob Sie angemeldet sind. // Wenn nicht, leiten Sie zur Anmeldeseite weiter. return {
      Pfad: '/login',
      // Speichere unseren Standort, damit wir ihn später erneut abfragen können: { redirect: to.fullPath },
    }
  }
})

Erklärt werden muss die Implementierung von userStore.isLogin. Dies hängt mit der Lösung zur Aufrechterhaltung des Anmeldestatus zusammen, die wir tatsächlich anwenden. Wenn die Token-Methode angewendet wird, wird geprüft, ob das Token bereits vorhanden ist. Der Autor verwendet vuex zum Speichern von Token und speichert die Daten anschließend mithilfe von Plug-Ins im Store im lokalen Speicherort.

Schauen wir uns als Nächstes die konkrete Implementierung an:

login.vue: Anmeldekomponente

<Vorlage>
  <div Klasse="Anmelden"></div>
</Vorlage>

<script lang="ts">
importiere { defineComponent } von 'vue'

importiere { jump2Auth, getUserInfo } von '@/hooks/useWechatAuth'
importiere { userStore } von '@/store/modules/user'
importiere { redirectTo, getRouteQuery } von '@/hooks/usePage'

exportiere StandarddefiniereKomponente({
  Name: 'Login',
  aufstellen() {
    let code = getRouteQuery().code als Zeichenfolge
    // 3. Wenn ein Code vorhanden ist, wurde er autorisiert, wenn (Code) {
      getUserInfo(Code als Zeichenfolge).dann((Res: beliebig) => {
        //Token aufzeichnen
        userStore.saveToken(res.Zugriffstoken)
        const redirect = userStore.userState.landPageRoute || '/'
        // Zur vor der Autorisierung besuchten Seite springen redirectTo(redirect)
      })
    } anders {
      // 1. Notieren Sie die Adresse der vorherigen Seite const { redirect } = getRouteQuery()
      wenn (Umleitung) {
        userStore.setLandPage(Umleitung als Zeichenfolge)
      }
      // 2. Sprungautorisierung const callbackUrl = window.location.origin + window.location.pathname
      jump2Auth(Rückruf-URL)
    }
  },
})
</Skript>

Wie Sie sehen, hat die Anmeldeseite tatsächlich keinen Inhalt. Nachdem wir auf diese Seite gesprungen sind, werden wir direkt auf die WeChat-Autorisierungsseite weitergeleitet. Der Autorisierungsrückruf wird ebenfalls auf diese Seite zurückkehren. Zu diesem Zeitpunkt erhalten wir den Codeparameter, indem wir den Routingparameter abrufen.

@/hooks/usePage.ts: Diese Datei kapselt hauptsächlich allgemeine Methoden im Zusammenhang mit Routern

Router von '@/router' importieren
importiere { cloneDeep } von 'lodash'
importiere { toRaw } von 'vue'

/**
 * Umleitung * @param Pfad Pfad */
Exportfunktion Umleitung zu (Pfad: Zeichenfolge) {
  const { ersetzen } = Router
  ersetzen({
    Weg,
  })
}

/**
 * Holen Sie sich die Abfrageparameter auf der Route */
Exportfunktion getRouteQuery() {
  const { currentRoute } = Router
  const { query } = aktuelleRoute.Wert
  returniere cloneDeep(Abfrage)
}

@/hooks/useWechatAuth.ts: Diese Datei kapselt die WeChat-Autorisierungsanfrage für die Interaktion mit dem Backend

importiere { useAxios } von '@/hooks/useAxios'

/**
 * Holen Sie sich die von WeChat autorisierte Umleitungsadresse * @param callbackUrl Rückruflink nach der Autorisierung * @returns
 */
Exportfunktion jump2Auth(callbackUrl: string) {
  verwendenAxios({
    URL: „/api/wechat/auth“,
    Parameter: {
      redirect_url: Rückruf-URL,
    },
  }).then((authUrl: beliebig) => {
    wenn (Prozess.env.NODE_ENV === 'Entwicklung') {
      window.location.href = Rückruf-URL + '?code=test'
    } anders {
      window.location.href = Auth-URL
    }
  })
}

/**
 * Code zum Anmelden senden * @param code
 * @returns
 */
Exportiere asynchrone Funktion getUserInfo(Code: Zeichenfolge) {
  const userInfo = warte auf useAxios({
    Methode: 'POST',
    URL: „/api/wechat/auth“,
    Parameter: {
      Code,
    },
  })
  Benutzerinformationen zurückgeben
}

@/store/modules/user.ts: globaler Statusspeicher, der hauptsächlich Token und vor der Anmeldung besuchte Seiten aufzeichnet

importiere { Modul, VuexModul, Mutation, getModule, Aktion } von 'vuex-module-decorators'
Store aus „@/store“ importieren
importiere { initialUnencryptedStorage } von '../globals'

Schnittstelle UserState {
  Token: Zeichenfolge
  landPageRoute: Zeichenfolge
}

const NAME = "Benutzer"
// Name: Modulname // namespaced bedeutet, den Namespace zu öffnen // dynamic ist auf true gesetzt, was bedeutet, dass ein dynamisches Modul erstellt und das Modul zur Laufzeit im Speicher registriert wird // preserveState Wenn die Daten persistent sind, kann der Anfangswert aus dem Speicher übernommen werden, wenn diese Variable true ist @Module({
  Namespace: wahr,
  Name: NAME,
  dynamisch: wahr,
  speichern,
  preserveState: Boolean(initialUnencryptedStorage[NAME]),
})
Exportklasse Benutzer erweitert VuexModul {
  Benutzerstatus: Benutzerstatus = {
    Token: '',
    /** Seite vor dem Einloggen besuchen */
    landPageRoute: '',
  }

  bekomme isLogin(): boolean {
    returniere !!diesen.Benutzerstatus.Token
  }

 
  @Mutation
  saveToken(token: string): void {
    dieser.Benutzerstatus.Token = Token
  }

  @Mutation
  setLandPage(route: string): void {
    this.userState.landPageRoute = Route
  }
}

exportiere const userStore = getModule<Benutzer>(Benutzer)

Der Autor verwendet das Plug-In vuex-persistedstate, um die Daten im Store in localStorage zu speichern. Dies hat den Vorteil, dass der Benutzer die Seite nach dem Schließen erneut besuchen kann, ohne den WeChat-Autorisierungsprozess erneut auszulösen, was das Benutzererlebnis erheblich optimiert.

Zusammenfassen

Ich muss sagen, dass Vue3 in Bezug auf Codeabstraktion und Wiederverwendung viel komfortabler zu schreiben ist. Ich hoffe, dass jeder versucht, der offiziellen Vorgehensweise zu folgen, den Logikcode zu entkoppeln und Hooks nacheinander zu generieren, damit der Code eleganter erscheint. Der Autor hat es ausprobiert und gezeigt, dass diese Lösung im Hinblick auf die Sauberkeit und Eleganz des Codes sowie die Umsetzung der Geschäftsanforderungen nahezu perfekt ist (erlauben Sie mir bitte, anzugeben). Natürlich kann es Fehler oder Schwachstellen geben, die ich nicht entdeckt habe. Schließlich gibt es nie eine perfekte Architektur. Ich begrüße auch die Leser, mit mir zu diskutieren und bessere Lösungen und Ideen vorzuschlagen.

Dies ist das Ende dieses Artikels über die elegante Implementierung der autorisierten WeChat-Anmeldung in Vue3-Projekten. Weitere relevante Inhalte zur autorisierten WeChat-Anmeldung für Vue3 finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!