Jak na to: Drupal 8 a přihlašování přes sociální sítě

Tématu jsem se v minulosti už věnoval. Mám tu článek o přihlašování v Drupalu 7 s modulem HybridAuth Social Login. Nebo starší, popisující modul Drupal for Facebook. Doba pokročila a je potřeba mít nějaké řešení pro Drupal 8 a zanedlouho i nastupující devítku.

I v současném Drupalu můžete samozřejmě přihlašování přes sociální sítě využít. Všechny se točí okolo Drupal Social Initiative a modulu Social API. K dnešnímu dni jsem napočítal 31 modulů, které na Social API staví a nabízejí přihlašování. Viz domovská stránka modulu.

Kromě toho, že Social API slouží jako základ pro napojení na sociální sítě a přihlašování, lze jej obohatit i o možnost posílat příspěvky na sociální sítě přímo z Drupalu. Aktuálně na LinkedIn, Twitter, Facebook nebo na Slack.

V článku ale zůstanu jenom u využití přihlašovacích údajů.

Přihlášení do Drupalu 8 pomocí Facebooku

Kromě základního Social API budete potřebovat i modul Social Auth Facebook. Modul závisí ještě na dalších PHP knihovnách pro komunikaci s Facebookem a jediná spolehlivá metoda, jak vše nainstalovat a rozběhnout na první dobrou, je instalace přes Composer:

composer require drupal/social_auth_facebook

Příkaz vám do Drupalu stáhne oba moduly i jejich potřebné závislosti. Pak už jen zapněte modul přes drush nebo klasicky přes administrační rozhraní Drupalu 8.

Podpora pro Ludwig bohužel zatím chybí, takže pokud nemáte k dispozici hosting s příkazovým řádkem nebo virtuální server, rozběhněte si to na lokále a poté překopírujte přes FTP.

1. Po instalaci modulu přejděte do administrační části Nastavení > Social API settings > User authentication. Uvidíte zde aktivovaná přihlášení přes Social API, zatím tedy jen to Facebookové. Přepněte se na jeho záložku.
2. Zde najdete formulář, ve kterém je nutné vyplnit několik údajů, jako jsou Application ID nebo App Secret. Získáte je na odkazu, který je u formuláře uveden. Jinými slovy, musíte jít na adresu developers.facebook.com/apps, kde si zřídíte novou Facebookovou aplikaci.
3. Klepněte na tlačítko pro vytvoření nové aplikace, zadejte její název shodný s názvem webu a po vytvoření přidejte Facebook Login tlačítkem Set Up. V nabídce platforem pak vyberte, že bude sloužit pro přihlašování přes web. Zadejte jeho adresu a další nastavení jenom odklikejte.
4. Poté se vlevo přepněte do nastavení Facebook Loginu. Upřesněte mu adresu v políčku Valid OAuth Redirect URIs. Co sem napsat, najdete v nastavovacím formuláři Drupalu, kde je předvyplněné políčko se stejným názvem.
5. Nyní do Drupalu překopírujte získané APP ID. Hodnotu pro App Secret najdete v aplikaci na Facebooku tak, že se přepnete na Settings > Basic a poté si odkryjete údaj v políčku App Secret. Překopírujete jej do Drupalu. Doporučuji vyplnit i další informace, které jsou v nastavení na Facebooku k dispozici.

Nahoře si přepněte aplikaci do stavu On a přihlášení by vám mělo pomalu začít fungovat.

Přihlášení do Drupalu 8 pomocí Google

Postup je podobný jako pro Facebook a na webu samozřejmě můžete mít obojí, resp. kterékoli z dalších dostupných přihlašování, které Social Auth prostřednictvím doplňkových modulů podporuje.

Instalace opět probíhá přes Composer následujícím příkazem, který stáhne do Drupalu vše potřebné:

composer require drupal/social_auth_google

1. Po zapnutí modulu přejděte do Nastavení > Social API > User authentication > Google. I zde bude nutné, abyste si zřídili údaje Client ID a Client Secret pro přihlašování. Doklikáte se k nim na adrese console.developers.google.com.
2. Vytvořte si zde nahoře novou aplikaci. Poté se v ní přepněte vlevo na položku OAuth Consent Screen a nastavte použití pro veřejnost. Pokračujte přepnutím na Credentials. Klikněte na tlačítko Create Credentials a z nabídky vyberte OAuth Client ID.
3. Vyplňte položky s adresami, jejichž přesné znění opět najdete ve formuláři v Drupalu. Do něj poté naopak překopírujte získané řetězce Client ID a Client Secret.

A samotné přihlášení? Blok nebo úprava stávajícího formuláře

Nastavení bychom tedy měli hotové. Když se podíváte na přihlašovací formulář v Drupalu, tak vás teď zřejmě zarazí, že tam nikde přihlášení přes Facebook ani Google není vidět. To je v pořádku.

Celé řešení počítá s tím, že si do nějakého regionu zapnete blok s názvem Social Auth Login. Ten zobrazí odpovídající loga pro přihlašování.

Alternativním řešením, které já mám raději, je prostě použití odkazů směřujících na adresy /user/login/facebook, resp. /user/login/google.

Ty můžete dostat do přihlašovacího formuláře například úpravou twigové šablony nebo pomocí funkce theme_form_alter() v souboru *.theme ve vašem tématu vzhledu. Nezapomeňte si ji přejmenovat místo theme_ na vasetema_.

Jednoduchá ukázka implementace takové funkce:

function vasetema_form_alter(&$form, \Drupal\Core\Form\FormStateInterface $form_state, $form_id) {

  switch ($form_id){   

    case 'user_register_form':

      $form['social']['#markup'] = '<a href="/user/login/facebook" class="fb-link">'.t('Přihlášení přes Facebook').'</a>';

      $form['social']['#markup'] .= '<a href="/user/login/google" class="google-link">'.t('Přihlášení přes Google').'</a>';

    break;     

    case 'user_login_form':

      $form['social']['#markup'] = '<a href="/user/login/facebook" class="fb-link">'.t('Přihlášení přes Facebook').'</a>';

      $form['social']['#markup'] .= '<a href="/user/login/google" class="google-link">'.t('Přihlášení přes Google').'</a>';

    break;     

  }

}

Jak takto upravený přihlašovací a registrační formulář vypadá v praxi, se můžete podívat například na eshopech zČech.cz nebo Popstore.cz.