4.1.1.4. MojeID plugin pro OpenCart

Důležité

Níže uvedený návod ještě dále testujeme. Budeme rádi, pokud se s námi podělíte o svoje zkušenosti s ním.

4.1.1.4.1. Instalace rozšíření

  1. Stáhněte si OpenID Connect plugin.

  2. V administraci Opencartu přejděte do Extensions, v kategorii Installer klikněte na tlačítko Upload (šipka vzhůru) a nahrajte sem stažený archiv.

  3. V seznamu Installed Extensions najděte plugin OpenID Connect a klikněte u něj na zelené tlačítko +.

  4. V kategorii Extensions přejděte do Extensions a v rozbalovací nabídce Choose the extension type vyberte Modules.

  5. V seznamu Modules najděte OpenID Connect, aktivujte jej kliknutím na zelené tlačítko + a vstupte do nastavení kliknutím na ikonu tužky.

  6. Zkopírujte si řetězec Redirect URL vespodu stránky a záložku nezavírejte.

4.1.1.4.2. Konfigurace rozšíření

  1. V otevřené záložce OpenID Connect vyplňte ID klienta, které jste získali během registrace služby, do pole Client ID a tajemství klienta do pole Client secret.

  2. Vyplňte adresy endpointů v závislosti na tom, zda jde o testovací instanci, nebo o instanci jdoucí do produkce:

    Konfigurace testovacích endpointů

    • Authorization endpoint URL: https://mojeid.regtest.nic.cz/oidc/authorization/

    • Token endpoint URL: https://mojeid.regtest.nic.cz/oidc/token/

    • Userinfo endpoint URL: https://mojeid.regtest.nic.cz/oidc/userinfo/

    Konfigurace produkčních endpointů

    • Authorization endpoint URL: https://mojeid.cz/oidc/authorization/

    • Token endpoint URL: https://mojeid.cz/oidc/token/

    • Userinfo endpoint URL: https://mojeid.cz/oidc/userinfo/

  3. Vyplňte položku OpenID Scope v závislosti na tom, které informace po uživateli požadujete. Povinná je kategorie openid, pro přihlašování doporučujeme požadovat také email. Dalšími možnostmi jsou profile phone address, pro více informací navštivte dokumentaci OpenID Connect a Příloha č. 1 – Seznam údajů pro předání (OpenID Connect).

  4. Volitelně zaškrtněte možnost Require prompt, která při každém přihlášení vyzve uživatele k potvrzení předávaných informací. Tato možnost se hodí v případě, že uživatel nepovolil předání nezbytných informací, jako je například email, a zaškrtl možnost Předávat při každém přihlášení. MojeID si tuto volbu zapamatuje a při každém dalším pokusu o přihlášení proto dojde k chybě kvůli nepředaným informacím.

    Poznámka

    Tento problém může uživatel odstranit přihlášením do účtu MojeID a odstraněním služby v sekci Nastavení > Předávání údajů. Zde klikne na tlačítko — u příslušné služby a zvolí Uložit. Následně se může opět zkusit přihlásit a povolit předání všech potřebných informací.

  5. Nastavení potvrďte tlačítkem Save vespodu stránky.

4.1.1.4.3. Umístění tlačítka pro přihlášení

Tlačítko pro přihlášení pomocí MojeID musí být přidáno ručně do zdrojového kódu šablony stránky. Šablony můžete upravovat v záložce Design > Theme Editor > commmon.

4.1.1.4.3.1. Příklady implementace

Tlačítko v záhlaví stránky

Do šablony header.twig vložte mezi řádky 56 a 57 následující kód, v němž nahradíte example.com svou vlastní doménou:

<li><a href="http://example.com/index.php?route=extension%2Fopenidconnect%2Fmodule%2Fopenidconnect.login" class="dropdown-item">Přihlásit přes MojeID</a></li>

Důležité

Pokud jste již v šabloně dělali změny, číslo řádku se může lišit. Kód vložte do třídy dropdown-menu dropdown-menu-right mezi statementy {%if not logged%} a {%else%} a ujistěte se, že jej nevkládáte do jiné položky třídy dropdown-item. Těsně před Vámi vloženým kódem musí být html tag </li>.

Tlačítko v zápatí stránky

Stáhněte si balíček grafických prvků a obrázek tlačítka pro přihlášení nahrajte na server do složky image instance OpenCartu. Doporučujeme formát SVG.

Do šablony footer.twig vložte mezi řádky 43 a 44 následující kód, v němž nahradíte example.com svou vlastní doménou a X číslem obrázku, který chcete pro tlačítko použít:

{% if not logged %}
<li>
<a href="http://example.com/index.php?route=extension%2Fopenidconnect%2Fmodule%2Fopenidconnect.login">
<img src="/image/mojeid_tlacitko_Prihlasit_0X.svg" width=70%></a>
</li>
{% endif %}

Důležité

Pokud jste již v šabloně dělali změny, číslo řádku se může lišit. Kód vložte do třídy list-unstyled a ujistěte se, že jej nevkládáte do jiné položky této třídy. Těsně před Vámi vloženým kódem musí být html tag </li>.

Poznámka

Příklad ilustruje implementaci tlačítka s českým nápisem. Pokud chcete použít tlačítko s anglickým nápisem, upravte odpovídajícím způsobem cestu zdroje obrázku.