Aanmelden en inloggen via sociale accounts met allauth

We kiezen Google en LinkedIn uit de tientallen providers die allauth ondersteunt. Over het algemeen heeft allauth een client-ID en een geheime sleutel van elke provider nodig, daarnaast moet je bij elke provider een geldige callback-URL voor je toepassing instellen. Voor Google zijn de instructies hier. Een kort overzicht hier; er zijn een aantal stappen:

je moet je domein registreren bij Google en dat toevoegen in de Google-console; hiervoor heb je toegang nodig tot de instellingen van je domeinregistrar
in de Google console moet je een nieuw project aanmaken
voor dit project moet je het OAuth-toestemmingsscherm invullen, met informatie zoals applicatienaam en logo, de scope van de toegang die je nodig hebt van Google (alleen e-mail en profiel, wat standaard is), een link naar de startpagina en de privacybeleid
nog steeds in de console, op het tabblad Credentials moet je nieuwe credentials maken; kies OAuth Client ID, dit creëert de client-ID en de client-secret die je nodig hebt

Het verificatieproces van Google kan 4-6 weken duren, dus het is een goed idee om vroeg te beginnen.

Voor LinkedIn zijn de instructies hier. Stappen:

ga naar de ontwikkelaarspagina van LinkedIn en maak een nieuwe app
naast informatie zoals naam, logo, link naar privacybeleid, moet je de app koppelen aan een bedrijf dat aanwezig is op LinkedIn; dus als het jouwe dat nog niet is, moet je dat eerst doen
wanneer de app is gemaakt, is deze beschikbaar op de apps-pagina en de client-ID en de client-secret zijn te vinden op het tabblad Auth

Zodra alles is ingesteld op Google en LinkedIn, ga je naar je instellingenbestand (in ons project base.py) en vertel je Django over de sociale accounts door het volgende in INSTALLED_APPS te plaatsen:

'allauth.socialaccount.providers.google',
'allauth.socialaccount.providers.linkedin_oauth2',

De client-ID's en client secrets moeten worden ingevuld via de admin, in sociale accounts / sociale applicaties. Hoewel de documenten ook de mogelijkheid vermelden om ze op te geven via een APP-parameter in de instellingen, ging dat bij mij niet altijd goed. Hoewel niet strikt noodzakelijk, zullen we SOCIALACCOUNT_PROVIDERS definiëren in onze instellingen voor de Google- en LinkedIn-parameters. Bijv. voor Google is de scope 'profile' en 'e-mail', omdat we toegang willen tot het e-mailadres om in te loggen (ACCOUNT_EMAIL_REQUIRED = True in allauth-configuratie). Dus zet het volgende in je instellingenbestand:

SOCIALACCOUNT_PROVIDERS = {
    'google': {
        'SCOPE': [
            'profile',
            'email',
        ],
        'AUTH_PARAMS': {
            'access_type': 'online',
        },
    },
    'linkedin': {
        'SCOPE': [
            'r_basicprofile',
            'r_emailaddress'
        ],
        'PROFILE_FIELDS': [
            'id',
            'first-name',
            'last-name',
            'email-address',
            'picture-url',
            'public-profile-url',
        ],
    },
}

Het standaardgedrag van de aanmelding voor sociale accounts is dat allauth probeert de gebruiker in te loggen nadat de verbinding met de sociale account is gemaakt. Dit is iets wat misschien ongewenst is, wanneer je de gebruiker een aantal verplichte velden wilt laten invullen die het sociale account niet kan verstrekken (bijv. displaynaam). Om dit te wijzigen, zet je in de instellingen:

SOCIALACCOUNT_AUTO_SIGNUP = False

Hierdoor wordt een aanmeldingsformulier getoond dat de gebruiker moet invullen voordat hij zich aanmeldt.

Tijd om de links naar de providers toe te voegen aan onze aanmeldings- en inlogsjablonen. De logica hiervoor kan worden gekopieerd uit het login.html-bestand van allauth. Voeg het volgende toe aan je login.html:

{% load socialaccount %}

{% get_providers as socialaccount_providers %}

{% if socialaccount_providers %}
    <br>
    <p>{% blocktrans with site.name as site_name %}or sign in with one of your existing third party accounts:{% endblocktrans %}</p>
    {% include "socialaccount/provider_list.html" with process="login" %}
{% endif %}

Dit toont een lijst met sociale accountproviders (indien aanwezig). We willen onze gebruikers ook de mogelijkheid geven om zich aan te melden met sociale accounts, dus voeg dit fragment ook toe aan signup.html; wijzig de regel or sign in with … in or sign up with … Kopieer nu de snippets/provider_list.html van allauth. De url-naam provider_login_url zorgt voor het aanmeldingsproces. Merk op dat we in onze inlogsjabloon process = "login" hebben ingesteld, wat voor nieuwe gebruikers is.

In provider_list.html zijn de links naar namen van providers teksten: {{ brand.name }} en {{ provider.name }}. Hier zullen we deze vervangen door afbeeldingen:

<img border="0" alt="{{ brand.name }}" src="{% static 'images/'%}{{ brand.name }}logo" width="40" height="40">
<img border="0" alt="{{ provider.name }}" src="{% static 'images/' %}{{ provider.name }}logo" width="40" height="40">

We hebben de logo's van Google en LinkedIn gedownload en hernoemd naar Googlelogo.png en LinkedInlogo.png. Zet ze in de images/ submap van de static/ map van je app; maak de directory aan als deze er nog niet is. Vergeet niet om de images/ directory in uw instellingen te registreren met (onze app heet userauth):

STATICFILES_DIRS = [
    …
    os.path.join(BASE_DIR, 'userauth/static/userauth/'),
]

We kunnen ook bestaande gebruikers aanbieden om hun account te koppelen aan een sociaal account. In een eerdere tutorial hebben we een template update.html gemaakt. Voeg hier de volgende code aan toe:

<div>
    <p>{% blocktrans with site.name as site_name %}Connect your account with one of your existing third party accounts:{% endblocktrans %}</p>
    {% include "socialaccount/provider_list.html" with process="connect" %}
</div>

Opnieuw gebruiken we de template provider_list.html maar nu met het proces connect. Nadat een gebruiker met een bestaand account succesvol verbinding heeft gemaakt met een van zijn sociale accounts, wordt hij / zij naar een overzichtspagina socialaccount/connections.html gebracht. Kopieer en restyle dit bestand ook.

Probeer nu uit te loggen op /accounts/login/, meld je aan op /accounts/signup/ en koppel een sociaal account aan je bestaande account op de updatepagina; alles zou moeten werken zoals verwacht.

Het pakket allauth kan veel meer, zoals het beheren van meerdere e-mailadressen en signalering, maar we laten het hierbij. Als je authenticatie in meerdere talen wilt hebben, lees dan verder.