Lassen Sie uns über den Anmeldevorgang für die Uniapp-Applet-Autorisierung sprechen

Mit der Popularität des mobilen Internets sind Miniprogramme zu einer unverzichtbaren Anwendung im täglichen Leben der Menschen geworden. Wenn Sie als Entwickler die Funktionen eines Miniprogramms implementieren, ist häufig eine autorisierte Anmeldung erforderlich, um Benutzerinformationen zu erhalten und einige notwendige Vorgänge durchzuführen. Dieser Artikel führt Sie in den Autorisierungs-Anmeldeprozess des Uniapp-Applets ein.

1. Einführung in die autorisierte Anmeldung bei Miniprogrammen

Die autorisierte Anmeldung bei Miniprogrammen ist eines der häufigsten Szenarien bei der Entwicklung von Miniprogrammen und auch eines der wichtigsten Mittel, um Interaktion und Benutzererfahrung zu erreichen. Durch die autorisierte Anmeldung kann das Miniprogramm den Avatar, Spitznamen und andere Informationen des Benutzers abrufen und personalisiertere Dienste bereitstellen. Derzeit gibt es zwei Möglichkeiten, sich bei Miniprogrammen anzumelden: die autorisierte WeChat-Anmeldung und die autorisierte Mobiltelefonnummer-Anmeldung. Die autorisierte WeChat-Anmeldung ist die offizielle Anmeldemethode von WeChat. Benutzer können den QR-Code scannen, um sich über WeChat anzumelden, oder sie können die Anmeldung direkt im Miniprogramm autorisieren. Für die Anmeldung zur Autorisierung einer Mobiltelefonnummer muss der Benutzer zur Verifizierung die Mobiltelefonnummer und den Bestätigungscode eingeben und sich dann anmelden.

2.Uniapp-Applet-Autorisierungs-Anmeldeprozess

Der Autorisierungs-Anmeldeprozess des Uniapp-Applets umfasst hauptsächlich die folgenden Schritte:

2.1 Abrufen grundlegender Benutzerinformationen

Mit der im Uniapp-Framework integrierten API können Sie auf einfache Weise die grundlegenden Benutzerinformationen abrufen Das Abrufen benutzerbezogener Informationen erfolgt wie folgt:

uni.getUserInfo({
  success: function (res) {
    console.log(res.userInfo);
  }
});

Dieser Code implementiert einfach die Methode zum Abrufen von Benutzerinformationen. Sobald der Benutzer zum Anmelden autorisiert ist, kann das Miniprogramm problemlos den Spitznamen, den Avatar und andere Informationen des Benutzers abrufen.

2.2 Stellen Sie fest, ob der Benutzer angemeldet ist

Bevor wir einige notwendige Vorgänge ausführen, müssen wir sicherstellen, dass sich der Benutzer beim Miniprogramm angemeldet hat. Zu diesem Zeitpunkt müssen wir den Anmeldestatus des Benutzers ermitteln. Mithilfe des lokalen Speichers können wir feststellen, ob der Benutzer angemeldet ist.

//判断用户是否登录
function isLoggedIn() {
  const token = uni.getStorageSync('token');
  return token ? true : false;
}

2.3 Fordern Sie den Server auf, den Anmeldestatus zu erhalten.

Wenn sich der Benutzer nicht angemeldet hat oder der Anmeldestatus abgelaufen ist, müssen wir den Server über die Anmeldeschnittstelle anfordern, um den Anmeldestatus des Benutzers zu erhalten. Beim Anfordern der Anmeldeschnittstelle müssen Sie auch den temporären Anmeldedatencode über die von uniapp bereitgestellte Anmeldeschnittstelle erhalten.

//获取登录凭证code
uni.login({
  provider: 'weixin',
  success(loginRes) {
    const code = loginRes.code;
    //调用登录接口
    uni.request({
      url: '接口地址',
      data: {
        code: code,
      },
      success: function (res) {
        console.log('response from server', res);
        //将登录凭证存储到本地
        uni.setStorageSync('token', res.data.access_token);
      },
      fail: function (err) {
        console.log('err', err);
      }
    });
  },
  fail(err) {
    console.log('login fail', err);
  }
});

2.4 Zur Autorisierungsseite springen

Wenn wir nach der Feststellung, ob sich der Benutzer angemeldet hat, feststellen, dass der Benutzer nicht angemeldet ist oder der Anmeldestatus abgelaufen ist, müssen wir zur Autorisierungsseite springen und die Anmeldung autorisieren .

//跳转到授权页面
function toAuthorizationPage(){
    uni.navigateTo({
        url: '/pages/authorize/index',
        success:function(res){
            console.log('navigate success',res);
        },
        fail:function(err){
            console.log('navigate fail',err);
        }
    })
}

2.5 Anmeldung autorisieren und Benutzerinformationen abrufen

Nachdem wir zur Autorisierungsseite gesprungen sind, können wir die von WeChat bereitgestellte API aufrufen, damit der Benutzer die WeChat-Anmeldung autorisieren und die Autorisierungsinformationen des Benutzers erhalten kann. Die spezifischen Schritte zum Abrufen von Benutzerinformationen sind wie folgt:

1. Verwenden Sie wx.getUserInfo, um die grundlegenden Informationen des Benutzers abzurufen.
2. Nachdem Sie die grundlegenden Informationen des Benutzers erhalten haben, senden Sie diese zur Registrierung oder Aktualisierung der Benutzerinformationen an den Server.

//获取用户信息
wx.getUserInfo({
    success:function(res){
        var userInfo = res.userInfo;
        //将用户信息提交到服务器进行注册或更新
        uni.request({
            url:'用户信息提交地址',
            method:"post",
            data:userInfo,
            success:function(res){
                console.log('response from server',res);
            },
            fail:function(err){
                console.log('err',err);
            }
        })
    },
    fail:function(err){
        console.log('get user info fail',err);
    }
})

3. Zusammenfassung

Die autorisierte Anmeldung ist eine Kernfunktion der Uniapp-Applet-Entwicklung und ein wichtiges Mittel, um Benutzerinteraktion und -erfahrung zu erreichen. Der in diesem Artikel vorgestellte Prozess der autorisierten Anmeldung kann als Referenz für Ihr Miniprogramm dienen und Ihnen die Implementierung der Funktion für die autorisierte Anmeldung erleichtern. Aufgrund der begrenzten Länge dieses Artikels müssen natürlich noch viele Details bei der autorisierten Anmeldefunktion berücksichtigt werden. Es wird empfohlen, dass Entwickler weiterhin bestimmte Praktiken erforschen und üben.

Das obige ist der detaillierte Inhalt vonLassen Sie uns über den Anmeldevorgang für die Uniapp-Applet-Autorisierung sprechen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!