OAuth-Spaß mit OAuth1

Dies ist der zweite Artikel in einer dreiteiligen Serie über die Verwendung der WP API, um etwas zu erreichen, das ich „Remote Control WordPress“ nenne – ein Lebensstil, bei dem Sie Netzwerkeinstellungen auf einer „Kontroll“-Installation verwalten und andere „Client“-Installationen ihre Einstellungen von der Kontrollinstallation beziehen. Der Vorteil davon ist, dass Sie die Einstellungen für viele WordPress-Installationen an einem einzigen Ort verwalten können. Der erste Artikel legte dar, wie Netzwerkseinstellungen als benutzerdefinierter Endpunkt in der WP API registriert werden, stoppte aber, bevor gezeigt wurde, wie diese Einstellungen abgerufen werden, wenn sie durch eine Berechtigungs-Callback geschützt sind, was sie sein sollten. Dieser Artikel greift diesen Faden auf und demonstriert, wie OAuth-Anmeldeinformationen an die WP API übergeben werden.

OAuth ist knifflig. Beim Erlernen des Prozesses war ich anfangs ungläubig angesichts der Menge und Komplexität der beteiligten Schritte. Wenn Sie wie ich sind, ist das Lesen der Spezifikation ein ziemlich uninspiriertes Anfangsziel. Die OAuth1 Plugin-Dokumente sind ausgezeichnet, aber die Details sind ohne den gesamten Prozess schwer zu würdigen. Ich hoffe, Ihnen ein funktionierendes Beispiel zu geben, das Sie nach Belieben refaktorieren oder aufbrechen können, damit Sie die verschiedenen Schritte lebendig sehen können. Damit können Sie zurückgehen und die Feinheiten in den Dokumenten und der Spezifikation würdigen.

Was Sie für diesen Artikel benötigen

Im ersten Artikel habe ich erklärt, dass wir zwei WordPress-Installationen benötigen würden, um dies zu bewerkstelligen

1. Die Kontrollinstallation
2. Eine Client-Installation

Bisher haben wir nur die Kontrollinstallation genutzt, aber in diesem Artikel werden wir beide verwenden.

Wir benötigen auch eine Handvoll Plugins, die ich angeben werde, wenn sie benötigt werden.

Wie bei allen Artikeln dieser Serie verwende ich das Twentysixteen-Theme, obwohl das eigentlich keine Rolle spielen sollte.

Vorbereitung der Kontrolle

Im ersten Artikel haben wir das WP REST API V2 Plugin auf der Kontrollinstallation installiert. Während dieses Plugin immer noch notwendig ist, schauen Sie sich /wp-json an, das Metadaten über die API zurückgibt. Wenn Sie ctrl+f für oauth verwenden, erhalten Sie keine Ergebnisse.

OAuth? Mehr wie KEIN AUTH, oder?

Hüstel. Daher wäre jetzt ein guter Zeitpunkt, das OAuth1 Plugin auf der Kontrollinstallation zu installieren und netzwerkweit zu aktivieren und diese URL erneut zu versuchen. Voila.

Perfekt. Die Kontrollinstallation kann jetzt OAuth-Anfragen bearbeiten.

Eine weitere Funktion des OAuth1-Plugins ist die Möglichkeit, Anwendungen zu registrieren, was genau das ist, was unsere Client-Installationen sind. Überprüfen Sie in wp-admin /wp-admin/users.php?page=rest-oauth1-apps und registrieren Sie Ihre Client-Installation. Die eingegebenen Details sind überhaupt nicht wichtig – ernsthaft, sie können einfach nur Unsinn sein – aber die resultierenden consumer_secret und consumer_key sind entscheidend. Sie werden sie in Kürze benötigen.

Wenn es sich anfühlt, als würden wir Plugins über Plugins stapeln, verstehe ich Ihren Schmerz (ich habe anderswo über dieses Gefühl geschrieben, falls Sie interessiert sind). Leider wird das nur noch schlimmer, also halten Sie die Nase zu und machen Sie sich bereit für mehr Abhängigkeiten!

Vorbereitung des Clients

Jetzt wechseln wir zur Client-Installation, was das erste Mal ist, dass wir dies in der Serie tun. Meine Client-Installation ist zufällig mein lokales MAMP. Nur eine Erinnerung, tatsächlich der gesamte Zweck dieses Artikels: In der Produktion könnten Sie viele, viele Client-Installationen haben. Im echten Leben habe ich ungefähr 30, aber für diese Demo verwende ich nur mein lokales MAMP.

Laden Sie mein CSS-Tricks WP API Client Plugin von GitHub herunter und aktivieren Sie es netzwerkweit. Es wird mit einem Shortcode zur Demonstration von OAuth-Anfragen geliefert: [css_tricks_wp_api_client meta_key='site_name']. Fügen Sie diesen Shortcode zum Inhalt einer Seite hinzu. In diesem Beispiel frage ich nach dem Wert der Einstellung, deren Meta-Schlüssel site_name ist. Sie können hier jeden Netzwerknamen als Option angeben.

Sie können diesen Shortcode gerne im Frontend durchsuchen, aber machen Sie sich keine Hoffnungen.

Das ist die Art von Sache, bei der man ein Plugin von GitHub herunterlädt, aber dann einige eigene Werte hartkodieren muss. Beachten Sie die Haupt-Plugin-Datei, wo Sie aufgefordert werden, die Lücken zu füllen. Die erste ist eine URL für unseren network_settings Endpunkt, den wir im ersten Artikel dieser Serie etabliert haben. Die anderen vier sind für OAuth.

Es lohnt sich, kurz innezuhalten und zu wiederholen, warum wir überhaupt OAuth brauchen. Sie erinnern sich vielleicht aus dem ersten Artikel dieser Serie, dass dies auf die permission_callback zurückzuführen ist, die nur Anfragen von authentifizierten Benutzern zulässt. Deshalb müssen wir einen OAuth-Header mit unserer Anfrage bereitstellen, und wir haben das so eingerichtet, dass nicht alle unsere Netzwerkeinstellungen für jedermann abrufbar sind.

Daher ist es Zeit, einige OAuth-Anmeldeinformationen zu erstellen. Wenn Sie wie ich sind, war dies der Teil, den Sie verwirrend fanden; deshalb sind Sie hier. Ich kann es nicht klarer sagen: Machen Sie sich bereit, durch einen Haufen Reifen zu springen, um OAuth zu nutzen.

Postman liefert

Die Bereitstellung eines OAuth-Headers ist ein komplizierter Prozess, der durch die Tatsache erschwert wird, dass es eine Reihe von Möglichkeiten gibt, ihn zu erreichen.

1. Sie könnten WP-CLI verwenden. Ich habe dieses Tutorial selbst nicht ausprobiert, aber es sieht vielversprechend aus.
2. Sie könnten eine Menge Code schreiben und ein wirklich cooles Interface erstellen, das direkt im Webbrowser funktioniert. Dieser Gist hat mir geholfen, einen Einblick in OAuth zu bekommen.
3. Sie könnten einen HTTP-Client wie Postman verwenden. Ich wurde durch dieses großartige Tutorial zur Verwendung von Postman zum Erstellen von OAuth-Anmeldeinformationen eingeführt.

Wir werden Nummer drei tun (ich greife hauptsächlich einen Teil dieses Tutorials wieder auf), da dies die einfachste Methode zu sein scheint. Laden Sie also Postman auf Ihren Computer herunter und installieren Sie es. Sobald Postman installiert ist, werden wir eine HTTP-Anfrage an die Kontrollinstallation stellen, wie folgt:

Es gibt drei Parameter, die Sie ausfüllen müssen. Der Rest wird von Postman generiert, was tatsächlich ein großer Teil des Wertes der Verwendung von Postman für diese Übung ist. Die drei Werte, um die Sie sich kümmern müssen, sind:

1. Die URL. Besuchen Sie /wp-json auf der Kontrollinstallation und ctrl+F für „request“. Sie finden eine URL ähnlich wie http:\/\/example.com\/oauth1\/request. Kopieren, einfügen, entschrägken, fertig.
2. Der Consumer-Schlüssel. Diesen haben Sie zuvor im Tutorial auf der Kontrollinstallation unter /wp-admin/users.php?page=rest-oauth1-apps generiert. In dieser Benutzeroberfläche heißt er „Client-Schlüssel“ im Gegensatz zu „Consumer-Schlüssel“, aber diese beiden Begriffe sind hier synonym.
3. Das Consumer-Geheimnis. Wie in Schritt zwei, nur dass es in wp-admin „Client-Geheimnis“ heißt, im Gegensatz zu „Consumer-Geheimnis“.

Postman antwortet mit sogenannten „temporären Anmeldeinformationen“, die Sie aus der Konsole kopieren müssen. Meine sehen so aus:

oauth_token=n33mdfL8TU5VP44pqxJffntL&oauth_token_secret=KRDKxqIpE7yratkW3LONQxgGDctaB4ieg73UKVyitSwp0GMY&oauth_callback_confirmed=true

Die „temporären Anmeldeinformationen“ sind eigentlich nur eine Query-Zeichenkette, die Sie an eine spezielle URL anhängen. Ähnlich wie zuvor durchsuchen Sie wp-json, finden aber diesmal die authorize URL. Sie fügen diese (und ein Fragezeichen) vor die Query-Zeichenkette von Postman, was zu folgender URL führen sollte:

http://example.com/oauth1/authorize?oauth_token=n33mdfL8TU5VP44pqxJffntL&oauth_token_secret=KRDKxqIpE7yratkW3LONQxgGDctaB4ieg73UKVyitSwp0GMY&oauth_callback_confirmed=true

Sie werden nicht erraten, was wir mit dieser URL tun werden. Geben Sie sie in eine seltsame HTTP-App ein? Im Moment nicht. Leiten Sie sie durch eine bizarre Verschlüsselungsfunktion? Nein, Sir. Chanten Sie sie dreizehnmal vor einem Spiegel? Für unseren Anwendungsfall nicht notwendig. Starten Sie einfach einen Webbrowser und besuchen Sie sie. Ich glaube, Sie werden begeistert sein.

Wenn Sie nicht gerade bei der Kontrollinstallation angemeldet sind, werden Sie zunächst aufgefordert, dies zu tun.

Sobald Sie auf autorisieren klicken, erhalten Sie ein Token.

Wenn Sie Ihr Benutzerprofil in wp-admin auf der Kontrollinstallation durchsuchen würden, sähen Sie jetzt eine Liste der von Ihnen genehmigten Apps zusammen mit einer Benutzeroberfläche zum Widerrufen.

Nehmen Sie das Token zurück zu Postman und stellen Sie die folgende Anfrage:

Es gibt fünf Parameter, die Sie angeben müssen.

1. Die URL. Unter wp-json suchen Sie nach der access URL und fügen das gerade erhaltene Token als URL-Variable für oauth_verifier hinzu. Mit anderen Worten, Ihre URL würde ungefähr so aussehen:

   http://example.com/oauth1/access?oauth_verifier=zDWqvZ4VNAd86wBWp6IJPKkV

   Wie komme ich auf oauth_verifier für die URL-Variable? Ich habe wirklich keine Ahnung. Ich hatte Glück und habe es im Abschnitt „Token Exchange“ des Tutorials gefunden, das ich zuvor erwähnt habe. Das scheint einfach das zu sein, was man tun muss. Vielleicht gibt es mehrere Möglichkeiten, diesen Schritt zu erreichen. Ich sehe in dem Dokumentationsabschnitt zum Token-Austausch nichts über das Hinzufügen dieses Wertes als URL-Variable per se. Ich habe jedoch festgestellt, dass es auch in Ordnung zu funktionieren scheint, wenn Sie oauth_verifier im body Ihrer Anfrage übergeben. Egal?

2. Der Consumer-Schlüssel. Diesen haben Sie in wp-admin erhalten, als Sie Ihre App registriert haben. Es ist derselbe Wert, den Sie hier in der vorherigen Postman-Anfrage verwendet haben.
3. Das Consumer-Geheimnis. Auch dies haben Sie in wp-admin erhalten, als Sie Ihre App registriert haben. Wie der Consumer-Schlüssel ist es derselbe Wert, den Sie hier in der vorherigen Postman-Anfrage verwendet haben.
4. Das Token. Dies ist eine temporäre Anmeldeinformation aus der Antwort der vorherigen Postman-Anfrage.
5. Das Token-Geheimnis. Dies ist ebenfalls eine temporäre Anmeldeinformation aus der Antwort der vorherigen Postman-Anfrage.

Postman wird mit Ihrem oauth_token und oauth_token_secret antworten. Glückwunsch! Wir haben jetzt alles, was wir brauchen, um OAuth-fähige HTTP-Anfragen zu stellen!

Zurück zur Client-Installation

Im vorherigen Abschnitt haben wir eine Menge verschiedener Token, Geheimnisse, Schlüssel und allerlei seltsame Dinge gesammelt. Es ist Zeit, diese Werte einzusetzen. Knacken Sie die Haupt-Plugin-Datei für mein CSS-Tricks WP API Client-Plugin und kodieren Sie sie wie im Quellcode angegeben.

Viel Arbeit, ja, aber wir haben es geschafft! Laden Sie das Frontend erneut und sehen Sie das resultierende JSON.

Es hat funktioniert! Wir haben gerade eine Einstellung, in diesem Fall site_name, von der Kontrollinstallation abgerufen.

Sicher, es funktioniert in der Praxis, aber funktioniert es auch in der Theorie?

Normalerweise lerne ich am liebsten mit etwas Kontext und Theorie, bevor ich mich in ein Beispiel vertiefe. OAuth ist nicht so. Es ist einfach zu seltsam. Deshalb habe ich ein Beispiel durchlaufen, ohne Theorie zu liefern. Wenn es um OAuth geht, ist das Verhältnis von Theorie zu Praxis völlig aus dem Ruder gelaufen. Ich denke, die meisten von uns hier können einen Artikel im Codex lesen und sich eine allgemeine Vorstellung davon machen, was wir tun und warum. Mit OAuth funktioniert das nicht so. Zumindest nicht für mich.

Aber ich sage Ihnen, was ich tun werde. Erlauben Sie mir, ein paar Abschnitte meines Plugin-Codes mit ihrer entsprechenden Behandlung in den OAuth1-Dokumenten abzugleichen, damit Sie Ihr eigenes kritisches Denken bei der Implementierung von OAuth anwenden können.

Öffnen Sie meine OAuth-Klasse und lesen Sie sie. Sie ist stark kommentiert. Die Klasse erwartet ein Argument, den meta_key für die Option, die wir abfragen, und bietet eine öffentliche Funktion, get_response(), zum Durchführen von OAuth-fähigen HTTP-Anfragen. Der Konstruktor ruft eine ganze Reihe von Funktionen auf, um Ihre Geheimnisse und Token in einen Auth-Header umzuwandeln, den ich jetzt durchgehen werde.

Der Signaturschlüssel

Die Dokumente weisen uns an, einen Signaturschlüssel zu erstellen, indem wir das Consumer-Geheimnis und das Token-Geheimnis nehmen, jedes URL-kodieren und dann mit & zu einem String verketten. Genau das macht meine Funktion. Dieser Wert wird später verwendet, um die OAuth-Signatur selbst zu erstellen.

Die Header (Beim ersten Mal)

Wir können die meisten OAuth-Header zu diesem Zeitpunkt festlegen und müssen dies sogar tun, um nachfolgende Schritte auszuführen. Hier ist mein Code, der die Header erstellt. Der scharfsinnige Leser wird bemerken, dass diese Funktion später noch einmal aufgerufen wird, sobald wir die Signatur haben. Ich werde darauf gleich zurückkommen. Vorerst sind wir jedoch bereit, den Basis-String zu erstellen.

Der Basis-String

Der Basis-String ist eine Verkettung aller Teile der Anfrage, einschließlich der HTTP-Methode, aller OAuth-Header außer der Signatur und aller Variablen, die wir übergeben. Hier ist mein Code, der dies tut. Wie der Signaturschlüssel werden wir den Basis-String gleich verwenden, um die Signatur zu erstellen.

Die Signatur

Wir erstellen die Signatur, indem wir den Basis-String und den Signaturschlüssel kombinieren und hashen. Mein Code führt ihn auch durch base64_encode(), was erforderlich ist, aber die Hashing-Funktion von PHP tut dies nicht automatisch.

Die Header (Nochmal)

Nachdem wir die Signatur haben, können wir sie zu unseren OAuth-Headern hinzufügen. Die Header werden dann auf eine sehr spezifische Weise verkettet. Schließlich, herrlich, sind sie bereit, in unserer get_response() Funktion verwendet zu werden. Der Shortcode ruft diese Funktion auf, wenn er die Kontrollinstallation kontaktiert.

Einige verbleibende Bedenken, vielleicht?

Ich habe Ihnen ein funktionierendes Beispiel gegeben und gezeigt, wie ich zu diesem Beispiel gekommen bin, aber ich fühle mich schlecht. Ich habe ehrlich gesagt nicht erklärt, was der größte Teil dieses Mist ist. Token, Signaturen, Schlüssel – ehrlich gesagt, ich kann kaum den Überblick behalten. Wenn Sie wirklich wissen müssen, wie das funktioniert, werde ich es nicht besser erklären können als die Spezifikation.Ich habe das Interesse an meinem eigenen Tutorial verloren!Es ist... ähm... außerhalb des Umfangs dieses Tutorials. Viel Glück.

Was kommt als Nächstes?

Im ersten Artikel haben wir Netzwerkeinstellungen zur WP API hinzugefügt. In diesem Artikel haben wir gezeigt, wie man sie abruft. Im dritten und letzten Artikel werden wir meine Abstraktionsschicht untersuchen, damit wir nicht den gesamten Prozess in all unseren Feature-Plugins wiederholen müssen, und wir werden ein kleines Feature-Plugin als Beispiel für die Verwendung dieser Abstraktion schreiben.