So implementieren Sie die WeChat-Scancode-Anmeldung und erhalten persönliche Informationen in vue3

1. Prozess:

WeChat bietet zwei Code-Scan-Methoden:

• Zur QR-Code-Scan-Seite springen

• Eingebetteter QR-Code

Wir können anhand des Dokuments den gesamten Prozess kennen Das Scancode-Autorisierungsmodell lautet:

1. Der Drittanbieter initiiert eine WeChat-Autorisierungs-Anmeldeanforderung. Nachdem der WeChat-Benutzer die Autorisierung der Drittanbieteranwendung zugelassen hat, startet WeChat die Anwendung oder leitet sie zur Drittanbieter-Website weiter der temporäre Autorisierungscode-Parameter;

2. Verwenden Sie den Code-Parameter plus AppID und AppSecret usw., um über die API Zugriff auf die grundlegenden Datenressourcen zu erhalten Der Benutzer implementiert grundlegende Vorgänge.

2. Voraussetzungen:

Offizielle Website-Anwendung für die WeChat-Entwicklung:

appid: ‘’, // bereitgestellt vom Backend

redirect_uri: ‘’, // bereitgestellt vom Backend

AppSecret // bereitgestellt von das Backend

3. Spezifische Login-Implementierung

Implementierungsmethode eins:

Vue-Plugin verwenden:

// 安装
npm install vue-wxlogin --save-dev
// js引入
import wxlogin from 'vue-wxlogin'
components: { wxlogin }

Verwendung:

<wxlogin
        :appid="appid"
        :scope="&#39;snsapi_login&#39;"  // 网页固定的
        :theme="&#39;black&#39;"
        :redirect_uri="redirect_uri"
        :href=&#39;bast64css&#39;
        
        >
 </wxlogin>
 
 
 
//   data
<wxlogin
        :appid="appid"
        :scope="&#39;snsapi_login&#39;"  // 网页固定的
        :theme="&#39;black&#39;"
        :redirect_uri="redirect_uri"
        :href=&#39;bast64css&#39;
        
        >
 </wxlogin>

//   data
bast64css: &#39;data:text/css;base64,LmltcG93ZXJCb3ggLnFyY29kZSB7d2lkdGg6IDIwMHB4O2hlaWdodDoyMDBweH0NCi5pbXBvd2VyQm94IC5pbmZvIHt3aWR0aDogMjAwcHh9DQouc3RhdHVzX2ljb24ge2Rpc3BsYXk6IG5vbmV9DQouaW1wb3dlckJveCAuc3RhdHVzIHt0ZXh0LWFsaWduOiBjZW50ZXI7fQ0KLmltcG93ZXJCb3ggLnRpdGxlIHtkaXNwbGF5OiBub25lfQ0KaWZyYW1lIHtoZWlnaHQ6IDMyMnB4O30NCg==&#39;,
                appid: &#39;wx64914809da50&#39;, // 后端提供
                redirect_uri: &#39;http%3A%2F%2Flant.com&#39;, // 后端提供

Ergebnis: Auf diese Weise wird der WeChat-QR-Code auf der von Ihnen geschriebenen Webseite angezeigt

Nach dem Scannen wird die Seite Die URL gibt eine Adresse mit einem Code an, um den Code zu erhalten eigene Webseite

1. Fügen Sie zunächst eine WeChat-Anmeldeschaltfläche auf der Vue-Seite hinzu:

if (window.location.href.indexOf('code') >= 0) {
                let code = window.location.href.split('?')[1];
                code = code.substring(5, code.indexOf('&'));
                this.wechatcode = code
                this.wechatLogin()
            }

2. Konfigurieren Sie Anmeldeparameter und springen Sie zur WeChat-Anmelde-QR-Code-Autorisierungsseite

<!--微信授权登录按钮-->
<img src="@/assets/images/weixin.png" /><a  type="text" @click="handLoginByWx">微信扫码登录</a>

3. Scannen Sie den QR-Code, um die Autorisierung zu bestätigen

Scannen Sie den QR-Code mit Ihrem Mobiltelefon, um die Autorisierung zu bestätigen Überwachungsadresse vorhanden Code

Ob die Anmeldeseitenüberwachung den von WeChat zurückgegebenen Codewert erhalten hat, rufen Sie, falls vorhanden, die vom Backend bereitgestellte Schnittstelle auf, um den Code an das Backend zurückzugeben

6. Rufen Sie die Anmeldeschnittstelle auf, um sich anzumelden Die vom Backend zurückgegebenen Anmeldeinformationen. Methode 3: Kombinieren Sie sie mit dem Backend, um den QR-Code für die WeChat-Anmeldung zu erhalten JS

// 跳转微信登录二维码授权页面
      handLoginByWx() {
        // 重定向地址重定到当前页面，在路径获取code
        const hrefUrl = window.location.href
        // 判断是否已存在code
        if (!this.code) {
        // 不存在，配置相关微信登录参数（主要是授权页面地址，appID，回调地址）
          window.location.href = `
              https://open.weixin.qq.com/connect/qrconnect
            ?appid=APPID
            &redirect_uri=${encodeURIComponent(hrefUrl)}
            &response_type=code
            &scope=snsapi_login
                    `
        }
      }

appid: Eindeutige Kennung der Anwendung

scope: Anwendungsautorisierung wirkt auf

Redirect_uri: Rückrufadresse, zu der nach erfolgreicher WeChat-Anmeldung gesprungen werden soll

3. Zeigen Sie den QR an Code

Nachdem Sie sich durch Scannen des QR-Codes und Klicken auf die Schaltfläche „Anmeldung bestätigen“ angemeldet haben, springt der Browser automatisch zu:

http://domain/weixinlogin?code=02147Yff12Yhgz0ArCef1qabgf147Yf0&state=undefiniert

• Dieser Code ist ein temporäres Token von WeChat an den Benutzer gesendet. Wir können die Anmeldeschnittstelle von WeChat erneut gemäß dem Code anfordern, um access_token (offizielles Token) zu erhalten Beschreibung (über die folgende Schnittstelle Get access_token)

• HTTP-Anfragemethode: GET

  URL: https://api.weixin.qq.com/sns/oauth3/access_token?appid=APPID&secret=SECRET&code=CODE&grant_type=authorization_code

• Geben Sie die folgenden Parameter zurück:

  // 为微信授权登录重定向地址服务
        var temp = (to.path).split('&')
        var pram = temp[1]
        var item = pram.split('=')
        var code = item[1]
        // 重定向到微信登录页面并且将code值带上
        next({
          path: '/login',
          query: { 'code': code }
        })

  3.2 Das folgende Vue-Front-End ruft den Java-Back-End-Code auf

1 Rufen Sie den Knotendienst über Axios auf und erstellen Sie eine neue Datei: @/api/weixin.js (dies liegt daran, dass Die Schnittstelle wird einheitlich verwaltet und separat unter der API-Datei gespeichert. Rufen Sie den Benutzer-Avatar und den Spitznamen in WeChat ab, nachdem Sie sich bei WeChat angemeldet haben

API

1 =ACCESS_TOKEN&openid=OPENID

Rückgabeparameter:

<div id="weixin"></div>

Nachdem Sie access_token und openid erhalten haben, fordern Sie erneut die Schnittstelle an, rufen Sie den Spitznamen und den Avatar ab und speichern Sie sie in Cookies

mounted() {
    var obj = new WxLogin({
      id: "weixin",
      appid: "wx3bdb1192c22883f3",
      scope: "snsapi_login",
      // 扫码成功后 跳转的地址
      redirect_uri: "http://domain/weixinlogin"
    });
  },
  head: {
    script: [
      { src: "http://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js" }
    ]
  }

An diesem Punkt erhält getUser den Benutzernamen und den Avatar des aktuell angemeldeter Benutzer.

Das obige ist der detaillierte Inhalt vonSo implementieren Sie die WeChat-Scancode-Anmeldung und erhalten persönliche Informationen in vue3. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!