Most egy több szempontból is szokatlan bejegyzés következik. Először is a témája erősen Fronted-jellegű lesz, amivel általában nem szoktam foglalkozni. Másodszor ez a bejegyzés nem a WordPress szerkesztőjében született, hanem az új projektem honlapján.

Bevezetés

Bár a WordPress Block szerkesztője elég jó, bizonyos szempontból van néhány dolog, amivel problémája van. Ezek közül kettő engem kifejezetten bosszant: a matematikai jelölések nehézsége^[1] és a lábjegyzetelés hiánya. Addig-addig hergeltem magam rajta, amíg végül úgy döntöttem, megpróbálok írni valamit, ami kezeli ezeket a problémákat: egy gyors, hosszabb cikkek írására is alkalmas szövegszerkesztőt, amivel lehet különböző blog motorokba egyszerűen publikálni, sőt LaTeX dokumentumot meg normális PDF-et is lehet készíteni. Így született meg a μr2 projekt.

A fejlesztés során, amint azt említettem, célom volt közvetlenül publikálni különböző blog motorokba. Így egy kicsit jobban bele kellett mélyednem a WordPress.com működésébe. Annak, aki nem tudná, a WordPress Block editor egy JavaScript alkalmazás, ami RestAPI-n keresztül kommunikál a megoldás több részével. Innen meg adott, hogy lényegében bárki kommunikálhat a szerverrel, csak a megfelelő HTML üzeneteket kell elküldeni a megfelelő címekre.

Bejelentkezés a WordPress.com-ba

Szerencsére a WordPress fejlesztők nem hagyták teljesen nyitva mindenki prédájaként a ResTAPI címeket. Szóval ahhoz, hogy bármi érdemlegeset tudjunk tenni, először azonosítani kell magunkat. Ehhez regisztrálni kell először is magunkat WordPress.com alkalmazás fejlesztőjeként:

Ez elég egyértelmű:

• Name – az alkalmazás neve
• Description – egy rövid leírás, mit is csinál az alkalmazás
• Website URL – hol lehet több információt megtudni az alkalmazásról
• Redirect URLs – hova akarjuk magunkat visszairányítani a hitelesítés után

Ezután már csak egy hivatkozást kell elhelyeznünk a frontend kódunkban, mondjuk így:

<input onclick="window.location.href = 'https://public-api.wordpress.com/oauth2/authorize?response_type=token&client_id=xxxxx&redirect_uri=http://mur2.co.uk/editor';"  id="id_wpc_connect" type="radio" name="source_type" >
<label class="control-item " for="id_wpc_connect" title={{ _("Connect to WordPress.com") }} >
    {{ _("Connect to WordPress.com") }}
</label>  

Ami itt érdekes az client_id és a redirect_uri. Az elsőt a regisztrál alkalmazás oldalán találjuk meg:

A másodiknak pedig ugyanannak kell lennie, mit amit az alkalmazásnál beállítottunk.

Ezek után amikor valaki rákattint a hivatkozásra, meg fog jelenni neki egy WordPress.com bejelentkezési oldala:

Ahol a felhasználó jogosultságokat adhat az alkalmazásnak a saját blogján. Miután ezt megtette, vissza lesz irányítva a redirect_url címre. A visszairányítás során mint GET attribútumok be lettek állítva a bejelentkezési adatok. Személy szerint én nem szeretem, amikor a honlapcím így néz ki, szóval inkább elmentettem ezeket a beállításokat egy sütibe. Ezt a következő egyszerű JavaScripttel is megoldhatjuk:

<script type="text/javascript">
        // retrieve the access token from the URL
        var params = window.location.hash.substr(1),
            token = params.substr( params.indexOf( 'access_token' ) )
                   .split( '&' )[0]
                   .split( '=' )[1],
            siteID = params.substr( params.indexOf( 'site_id' ) )
                     .split( '&' )[0]
                     .split( '=' )[1];
 
        if ( token && siteID ) {            
            // save in cookie
            var value = getCookie("mur2_wpc_accesstoken");
            if (value == "") {
                setCookie("mur2_wpc_accesstoken", token, 365);
                setCookie("mur2_wpc_sideid", siteID, 365);
                window.location = "http://mur2.co.uk/editor";
            }
        }
</script>

Ami tetszik ebben az egész azonosítási megoldásban, hogy a felhasználó adatai soha nem mennek át az Alkalmazás szerverén.

Publikálás

Most, hogy a felhasználó megadta a jogot az Alkalmazásnak, lehetővé vált, hogy használjuk a WordPress RestAPI hívásait. Ezeknek elég jó dokumentációja van a WordPress.org fejlesztői oldalán, szóval nem mennék bele. A bejegyzések megtekintésétől a látogatói statisztikák lekérdezésén át nagyon sok mindent tudunk csinálni.
Ehhez nem kell mást tennünk, mint a megfelelő JSON POST adatokat elküldeni a szerver megfelelő RestAPI címére. Ez a cím WordPress.com esetén a következő:

https://public-api.wordpress.com/wp/v2/sites/' + address + restapi_address

Ahol:

• address – a felhasználó oldalának a címe, ahova publikálni szeretne. A fenti JavaScript kód a mur2_wpc_sideid sütibe mentette el ezt a címet.
• restapi_address – a RestAPI cím a dokumentációnak megfelelően.

Új begyezés publikálása esetén a restapi_address értéke /posts lesz. Tehát ha például a felhasználó blogjának a címe https://test.home.blog/, akkor a fenti cím a következő lesz:

https://public-api.wordpress.com/wp/v2/sites/test.home.blog/posts

Oké, most hogy tudjuk a címet, nézzük, milyen üzenetet vár ez a cím. Egy egyszerű JSON-t amibe a következő mezőknek kell minimum szerepelnie:

• title – a bejegyzés címe
• status – milyen állapotú a bejegyzés, pl: private
• content – maga a bejegyzés szövege, amit publikálni szeretnénk
• format – mi a bejegyzés formátum, pl: link, standard vagy gallery

A fentieken kívül még a korábban megkapott bejelentkezési jelszó kellenek nekünk. Ezek a HTML üzenet fejlécében kell beállítanunk, mint Bearer típusú Authorization, és a fenti script a mur2_wpc_accesstoken sütiben mentette.

A fenti feladatot bármelyik nyelven meg tudjuk valósítani szerintem, én most egy JavaScript megoldást mutatok:

// publish in WordPress.com
async function wordpress_publish() {
    var access_token = getCookie("mur2_wpc_accesstoken");
    var address = getCookie("mur2_wpc_sideid");
 
    var fd = new FormData();
    fd.append('title', 'Első RestAPI publikálás');
    fd.append('status', 'private');
    fd.append('content', 'Ez a szöveg');
    fd.append('excerpt', 'Ez a kivonat');
    fd.append('format', 'standard');
 
    var xhr = new XMLHttpRequest();
    xhr.open('post', 'https://public-api.wordpress.com/wp/v2/sites/' + address + '/posts', true);
    xhr.setRequestHeader('Authorization', 'Bearer ' + decodeURIComponent(access_token))
    xhr.send(fd);
    xhr.onload = function() {
        if (xhr.status != 201) { // analyze HTTP status of the response
            ; // valami, ha nem sikerült a publikálás
        } else {
            ; // valami, ha sikerült 
        }
    };
}

Ennyi is lenne. A kód futtatása után a felhasználó oldalán publikálásra kerül egy új magánjellegű bejegyzés.

Végjegyzetek