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í¶
Stáhněte si OpenID Connect plugin.
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.
V seznamu Installed Extensions najděte plugin OpenID Connect a klikněte u něj na zelené tlačítko
+
.V kategorii Extensions přejděte do Extensions a v rozbalovací nabídce Choose the extension type vyberte
Modules
.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.Zkopírujte si řetězec Redirect URL vespodu stránky a záložku nezavírejte.
4.1.1.4.2. Konfigurace rozšíření¶
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.
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/
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 jsouprofile phone address
, pro více informací navštivte dokumentaci OpenID Connect a Příloha č. 1 – Seznam údajů pro předání (OpenID Connect).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í.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.