Inscription et connexion via des comptes sociaux avec allauth

On choisit Google et LinkedIn parmi les dizaines de fournisseurs pris en charge par allauth. En général, allauth a besoin d'un ID client et d'une clé secrète de chaque fournisseur, en outre, vous devez définir une URL de rappel valide pour votre application avec chaque fournisseur. Pour Google, les instructions sont ici. Juste un bref aperçu ici; il y a quelques étapes:

vous devez enregistrer votre domaine auprès de Google et l'ajouter dans la console Google; pour cela, vous devez accéder aux paramètres de votre bureau d'enregistrement de domaine
dans la console Google, vous devez créer un nouveau projet
pour ce projet, vous devez remplir l'écran de consentement OAuth, avec des informations telles que le nom et le logo de l'application, l'étendue de l'accès dont vous avez besoin de Google (uniquement l'e-mail et le profil, qui est la valeur par défaut), un lien vers la page d'accueil et le déclaration de confidentialité
toujours dans la console, dans l'onglet Informations d'identification, vous devez créer de nouvelles informations d'identification; choisissez OAuth Client ID, cela créera l'ID client et le secret client dont vous avez besoin

Le processus de vérification de Google peut prendre de 4 à 6 semaines, c'est donc une bonne idée de commencer tôt.

Pour LinkedIn, les instructions sont ici. Étapes:

accédez à la page des développeurs de LinkedIn et créez une nouvelle application
outre les informations telles que le nom, le logo, le lien vers la déclaration de confidentialité, vous devez associer l'application à une entreprise présente sur LinkedIn; donc si le vôtre ne l'est pas encore, vous devez d'abord le faire
lorsque l'application est créée, elle est disponible sur la page des applications et l'ID client et le secret client peuvent être trouvés dans l'onglet Auth

Une fois que tout est configuré sur Google et LinkedIn, accédez à votre fichier de paramètres (dans notre projet base.py) et informez Django des comptes sociaux en mettant les éléments suivants dans INSTALLED_APPS:

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

Les ID clients et les clés secrètes doivent être renseignés via votre admin, dans les comptes sociaux / applications sociales. Bien que la documentation mentionne également la possibilité de les spécifier via un paramètre APP, j'ai rencontré de comportement inattendu avec cela. Bien que cela ne soit pas strictement nécessaire, on définira SOCIALACCOUNT_PROVIDERS dans nos paramètres pour les paramètres Google et LinkedIn. Par exemple. pour Google, la portée est 'profil' et 'e-mail', car on veut accéder à l'adresse e-mail pour se connecter (ACCOUNT_EMAIL_REQUIRED = True dans la configuration allauth). Mettez donc ce qui suit dans votre fichier de paramètres:

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',
        ],
    },
}

Le comportement par défaut de l'inscription au compte social est que allauth essaie de se connecter à l'utilisateur une fois la connexion au compte social établie. C'est quelque chose que vous ne souhaitez peut-être pas, lorsque vous souhaitez que l'utilisateur remplisse certains champs obligatoires que le compte social ne peut pas fournir (par exemple, le nom d'affichage). Pour changer cela, mettez dans vos paramètres:

SOCIALACCOUNT_AUTO_SIGNUP = False

Cela fait apparaître un formulaire d'inscription que l'utilisateur doit remplir avant d'être inscrit.

Il est temps d'ajouter les liens vers les fournisseurs à nos modèles d'inscription et de connexion. La logique de ceci peut être copiée à partir du fichier login.html d'allauth. Ajoutez ce qui suit à votre 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 %}

Cela montre une liste de fournisseurs de comptes sociaux. On veut également donner à nos utilisateurs la possibilité de s'inscrire avec des comptes sociaux, alors ajoutez également cet extrait à signup.html; changez la ligne or sign in with … à or sign up with … . Copiez maintenant le fichier snippets/provider_list.html d'allauth. Le nom de l'url provider_login_url se chargera du processus de connexion. Notez que dans notre modèle de connexion, on a défini process = "login", qui est destiné aux nouveaux utilisateurs.

Dans provider_list.html, les liens vers les noms des fournisseurs sont des textes: {{ brand.name }} et {{ provider.name }}. Ici, on les remplacera par des images:

<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">

On a téléchargé les logos de Google et de LinkedIn et les a renommés Googlelogo.png et LinkedInlogo.png. Mettez-les dans le sous-répertoire images/ du répertoire static/ de votre application; créez le répertoire s'il n'y est pas encore. N'oubliez pas d'enregistrer le répertoire images/ dans vos paramètres avec (notre application s'appelle userauth):

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

On peut également proposer aux utilisateurs existants de connecter leur compte à un compte social. Dans un tutoriel précédent, on a créé un modèle update.html. Ajoutez-y le code suivant:

<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>

Encore une fois, on utilise le modèle provider_list.html mais maintenant avec le processus connect. Après qu'un utilisateur avec un compte existant s'est connecté avec succès à l'un de ses comptes sociaux, il est amené à une page de présentation socialaccount/connections.html. Copiez et modifiez également ce fichier.

Essayez maintenant de vous connecter à /accounts/login/, de vous inscrire à /accounts/signup/ et de connecter un compte social à votre compte existant sur la page de mise à jour; tout devrait fonctionner comme prévu.

Le package allauth peut faire beaucoup plus, comme gérer plusieurs adresses e-mail et la signalisation, mais on en reste là. Si vous souhaitez avoir votre authentification dans plusieurs langues, lisez plus.

Comptes sociaux pour la connexion à l'aide d'allauth