Beispiel für die Implementierung der Drittanbieter-Autorisierungsmethode von GitHub in Vue

Ich habe vor Kurzem mein Blogsystem verbessert und plötzlich kam mir die Idee, von der vorübergehenden Eingabe von Name und E-Mail zum Kommentieren auf die Verwendung der GitHub-Autorisierung zum Anmelden und Posten von Kommentaren umzusteigen.
Kommen wir ohne weitere Umschweife gleich zur Sache

Tipps: Dieser Artikel ist nur für persönliche Zwecke gedacht. Wenn Sie detailliertere Verwendungsmethoden erfahren möchten, können Sie die offizielle OAuth-Dokumentation besuchen.

Erstellen von OAuth-Apps

Zunächst benötigen Sie ein GitHub-Konto und gehen zu GitHub-Entwicklern. Nach dem Ausfüllen der erforderlichen Informationen werden automatisch die Client_ID und das Client Secret generiert, die in den folgenden Schritten verwendet werden.

Holen Sie sich den Code

//Verfahren
asynchrones githubLogin() {
 windows.location.href = 
    „https://github.com/login/oauth/authorize?client_id = Ihre_Client-ID&redirect_uri=Ihre_Redirect_uri“
}

<a href="https://github.com/login/oauth/authorize?client_id = Ihre_Client-ID&redirect_uri=Ihre_Weiterleitungs-URI">GitHub-Anmeldung</a>

Der Parameter redirect_uri in der Route ist optional. Wenn es weggelassen wird, leitet GitHub zum Rückrufpfad weiter, den Sie in Ihren OAuth-Apps konfiguriert haben. Falls angegeben, muss der von Ihnen eingegebene Redirect_URI ein Unterpfad des Rückrufpfads sein, den Sie in Ihren OAuth-Apps konfiguriert haben. wie folgt:

RÜCKRUF: http://xx.com/github
GUT: http://xx.com/github
GUT: http://xx.com/github/path/path
SCHLECHT: http://xx.com/git
SCHLECHT: http://xxxxx.com/Pfad

Wenn der Benutzer Ihre Anfrage akzeptiert, springt er zum Redirect-URI und wir können den Parametercode in der Route akzeptieren, um mit dem nächsten Schritt fortzufahren.

Ihre_Umleitungs-URI?Code=xxx

Zugriffstoken abrufen

Wir benötigen Client-ID, Client-Geheimnis und Code, um den Zugriffstoken zu erhalten.

/*
/githubAccessToken:https://github.com/login/oauth/access_token
*/
dies.$axios
 .get('/githubAccessToken',{
 Parameter: {
  client_id: Ihre_Client-ID,
  client_secret: Ihr_Client_Geheimnis,
  Code: Ihr_Code
  }
 })

Standardmäßig erhalten Sie eine Antwort wie diese:

Zugriffstoken=xxxxx&Tokentyp=Träger

Wenn Sie die Antwort in einem praktischeren Format erhalten möchten, können Sie die Accept-Header anpassen:

Akzeptieren: „application/json“
=> {"Zugriffstoken":xxxxx,"Tokentyp":Träger}

Abrufen von Benutzerinformationen

Nachdem wir den Zugriffstoken erhalten haben, können wir einige Informationen des Benutzers anfordern:

/*
/githubUserInfo:https://api.github.com/user
*/
dies.$axios
 .get('/githubUserInfo', {
  Überschriften: {
    "Inhaltstyp": "Anwendung/x-www-form-urlencoded",
    Akzeptieren: "application/json",
    Autorisierung: `token ${access_token}` //Erforderlich}
})

Anschließend können Sie die Benutzerinformationen abrufen.

Dies ist das Ende dieses Artikels über die Implementierung der Drittanbieterautorisierung von GitHub durch Vue. Weitere relevante Inhalte zur Implementierung der Drittanbieterautorisierung von GitHub durch Vue 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!