Overig: Klanten laten inloggen via Google en/of Facebook

Duur: 30-40 minuten | Moeilijkheid: Moeilijk

In dit artikel gaan we je uitleggen hoe je Google of Facebook integreert met jouw website, zodat klanten zonder het aanmaken van een account direct kunnen inloggen!

In dit artikel vind je

Google Client ID aanmaken

1. Open de Google Developer Console, login met je Google account indien nodig
2. Klik vervolgens op Selecteer een project
3. Klik hierna op Nieuw Project
4. Geef je project een naam en klik hierna op Maken (wij gebruiken als voorbeeld de projectnaam Login formulier, maar idealiter de naam van je website!)
   
5. Als je project eenmaal is aangemaakt, en je in het dashboard terug bent gekomen ga je naar API's en Services -> oAuth-toestemmingscherm
6. Eenmaal aangekomen op deze pagina vul je hier vervolgens de Appnaam in
   En bij Gemachtigde domeinen de URL van je website
   Klik vervolgens onderaan op Opslaan als je dit hebt gedaan
7. Als je dit hebt gedaan kom je op een pagina waar je klikt op Inloggegevens makenHierna klik je op Client-ID OAuth
8. Je word omgeleid naar een nieuwe pagina. Hier selecteer je als app-type de optie Webapp
   Geef vervolgens wederom een naam op, en de website die je hiervoor wil gebruiken.Tevens vul je bij Geautoriseerde omleidings-URL's de URL in waar je je bezoekers, als ze zijn ingelogd, naar wilt doorsturen.Klik vervolgens op Maken als je klaar bent.
   
9. Als je dit correct hebt gedaan word je omgeleid naar een pagina waar je direct inzicht krijgt in je client-ID en clientgeheim. Voor het inlogformulier hebben we enkel het client-ID nodig. Kopieer deze, en sla hem op. Deze gaan we namelijk gebruiken in de volgende stappen Login formulier instellen & weergeven

Facebook App ID aanmaken

1. Open de Developer pagina van Facebook en klik rechtsbovenaan op Get started
   
2. Klik op Next, en loop vervolgens de stappen af om je account te registreren voor de Developer sectie van Facebook.
   
3. Wanneer er word gevraagd Which of these best describe what you do selecteer dan de optie Developer
4. Als je eenmaal bent ingelogd klik op My AppsGevolgd door de optie Create App
5. Geef je project een naam en vul je e-mail in (wij gebruiken als voorbeeld de projectnaam Login formulier, maar idealiter de naam van je website!)
   Klik vervolgens op Create App ID
6. Je word doorgestuurd naar een pagina, vind hier vervolgens Facebook Login en klik rechtsonderaan op Set Up
7. Klik vervolgens op de Web optie
8. Vul op deze pagina de URL van je website in, klik hierna op Save
   
9. Klik nu op Settings onder Facebook Login
   En vul op deze pagina onder Valid OAuth Redirect URLs de URL in waar je je bezoekers, als ze zijn ingelogd, naar wilt doorsturen.
10. Klik vervolgens in de linker sidebar op Settings gevolgd door BasicHier vind je bij App ID & App Secret de codes die je nodig hebt. Kopieer deze, en sla ze op. Deze gaan we namelijk gebruiken in de volgende stappen Login formulier instellen & weergeven
    

Login formulier instellen & weergeven

1. Open SYSitor op de pagina waarop je het login formulier wilt weergeven
2. Sleep vervolgens het Login formulier element in de pagina
   
3. Selecteer vervolgens de optie Social Login en vink aan welke service (Google en/of Facebook) je wilt gebruiken
4. Klik op één van de linkjes om Facebook en/of Google te integreren met je website
   
5. Zoek vervolgens de opties Inloggen met Google of Inloggen met Facebook op deze nieuwe pagina, en vul hier je gegevens in die je in de bovenstaande stappen hebt aangemaakt.Klik hierna vervolgens op Wijzigingen opslaan als je klaar bent. Als je alles nu goed hebt ingesteld is het nu mogelijk om in te loggen met de ingestelde diensten!