Django 2.0 – Facebook login with allauth – Can't Load URL: The domain of this URL isn't included in the app's domains

Question:

I´m doing a small project that requires login with facebook. I´m working locally, on https://localhost:8000/

The technologies used are Django 2.0, django-allauth and, in order to avoid an error that I was having for not using an SSL connection, I´m using Django-sslserver as a development server.

When I click on the facebook-login button on my website, I´m bein redirected to this address:
https://www.facebook.com/v2.12/dialog/oauth?client_id=160259374640207&redirect_uri=https%3A%2F%2Flocalhost%3A8000%2Fsocial-auth%2Ffacebook%2Flogin%2Fcallback%2F&scope=email+user_friends+public_profile&response_type=code&state=pavN29C9zMgo&auth_type=reauthenticate

I´m having this error:

Can’t Load URL: The domain of this URL isn’t included in the app’s
domains. To be able to load this URL, add all domains and subdomains
of your app to the App Domains field in your app settings.

Part of my settings.py file:

# SECURITY WARNING: don't run with debug turned on in production!
DEBUG = True

ALLOWED_HOSTS = ['mysite.com', 'localhost']


# Application definition
INSTALLED_APPS = [
    # My Apps
    'account',

    # Django Apps
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'django.contrib.sites',

    # Third party Apps
    'sslserver',
    'allauth',
    'allauth.account',
    'allauth.socialaccount',
    'allauth.socialaccount.providers.facebook',
]

MIDDLEWARE = [
    'django.middleware.security.SecurityMiddleware',
    'django.contrib.sessions.middleware.SessionMiddleware',
    'django.middleware.common.CommonMiddleware',
    'django.middleware.csrf.CsrfViewMiddleware',
    'django.contrib.auth.middleware.AuthenticationMiddleware',
    'django.contrib.messages.middleware.MessageMiddleware',
    'django.middleware.clickjacking.XFrameOptionsMiddleware',
]

ROOT_URLCONF = 'django_social_website.urls'

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [os.path.join(BASE_DIR, 'templates')]
        ,
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
                # allauth specific context processors
                # "allauth.account.context_processors.account",
                # "allauth.socialaccount.context_processors.socialaccount",
            ],
        },
    }
]

WSGI_APPLICATION = 'django_social_website.wsgi.application'

SITE_ID = 1


SOCIALACCOUNT_PROVIDERS = {
    'facebook': {
        'METHOD': 'oauth2',
        'SCOPE': ['email', 'public_profile', 'user_friends'],
        'AUTH_PARAMS': {'auth_type': 'reauthenticate'},
        'INIT_PARAMS': {'cookie': True},
        'FIELDS': [
            'id',
            'email',
            'name',
            'first_name',
            'last_name',
            'verified',
            'locale',
            'timezone',
            'link',
            'gender',
            'updated_time',
        ],
        'EXCHANGE_TOKEN': True,
        'LOCALE_FUNC': 'path.to.callable',
        'VERIFIED_EMAIL': False,
        'VERSION': 'v2.12',
    }
}

# facebook
SOCIAL_AUTH_FACEBOOK_KEY = '****************'  # App ID
SOCIAL_AUTH_FACEBOOK_SECRET = '***********************************'  # app key


# little options for your page's signup.

ACCOUNT_EMAIL_REQUIRED = True
ACCOUNT_USERNAME_REQUIRED = True

part of the login.html template file:

{% extends "base.html" %}
{% load socialaccount %}
{% providers_media_js %}

<div class="social">
        <ul>
            <li class="facebook"><a href="{% provider_login_url "facebook" method="oauth2" %}">Login with Facebook</a></li>
        </ul>
    </div>

Main project urls.py file:

from django.contrib import admin
from django.urls import path, include
from django.conf import settings
from django.conf.urls.static import static

urlpatterns = [
    path('admin/', admin.site.urls),
    path('account/', include('account.urls', namespace='account')),
    path('social-auth/', include('allauth.urls'), name='social-begin'),
]

Here you have a couple of screenshots of the settings on ‘developers.facebook.com’ website, to see how it´s configured at the moment. I´ve been trying lots of different options but any of them is working.
enter image description here
enter image description here

Thanks for your help!

Asked By: ralfillo

||

Answers:

Facebook requires what it considers a real URL to go to so you need to give it one, for example www.development.com and then within your hosts file (I don’t know what the file is on Mac or PC but it is hosts on Linux) add the line directly below or after localhost

www.development.com 127.0.0.1

That#s what I do and it works.

Answered By: HenryM

Finally, I´ve got it working, thanks to @HenryM and very kind colleagues on irc://irc.freenode.net/django.

On this website, you can see that Facebook has different requirements depending, if your site has been created before March 2018 or after:
https://wp-native-articles.com/blog/news/how-to-fix-facebook-apps-error-cant-load-url-domain-url-isnt-included-apps-domains/

And the right setup that made my app work is this answer:
Django 2.0 allauth Facebook 2018

1) You need ssl connetion:

I’ve used django-sslserver

2) Setup a domain diferent from localhost, for example ‘development.com

Using Windows, add ‘127.0.0.1 development.com’ if you want your local working domain to be ‘development.com’.

3) Setup on ‘developers.facebook.com’:

Settings Basic
– App Domains: “AnySite.com”
– Privacy policy URL: “https://AnySite.com/myprivacy/
– Website: “https://AnySite.com/
Settings Advanced
– Server IP Whitelist: let it blank
– Domain Manager: let it blank

Facebook login Settings
-Yes Client OAuth Login
-Yes Web OAuth Login
-Yes (new: forced) Use strict Mode for redicect URLs
-Yes Embeded Browser OAuth Login
-Yes Enforce HTTPS
-Valid OAuth Redirect URLs:
https://AnySite.com/accounts/facebook/login/callback/” (mandatory)

I hope it helps!

Answered By: ralfillo

I was also stuck to the same question and thanks to @ralfillo it cleared most of the thing. Here are the steps which I followed in order to complete this process.

  1. Install django-sslserver and add sslserver in your installed app list.
  2. Now if you are on Ubuntu then edit this file /etc/hosts and add this 127.0.0.2 development.com. Obviously you can use any other address but the domain name needs to be that.
  3. Now go back to facebook developer page on your app settings and then you need to add App domains to https://development.com:8000/ and at bottom website section add website url as https://development.com:8000/.
    Note: In Client OAuth settings only “Force Web OAuth Reauthentication ” Will be set to no else everything will be Yes.
  4. Save those changes and go to facebook login settings page and over there add Valid OAuth Redirect URIs as https://development.com:8000/accounts/facebook/login/callback/.
  5. Save those changes and then on terminal type python manage.py runsslserver 127.0.0.2:8000
  6. Go to your browser and enter url as https://development.com:8000/ and then you should be able to see your server running. Now do your facebook authentication and it will work fine.
Answered By: Shashank

I was also stuck with this problem for a few hours and this was my simple solution:

Assuming that you are using https://127.0.0.1:8000/ to run you web app in the browser and using django-sslserver to use "https" (don’t forget to add django-sslserver to installed apps), run the following command in the terminal:

"python manage.py runsslserver localhost:8000"

In the Facebook developer’s console make sure to have the following:

  1. In App settings -> Basic -> App Domains put "localhost"
  2. In Dashboard -> Customize adding a Facebook login button -> Quickstart -> web -> Site URL put "https://localhost:8000/"
  3. In Dashboard -> Customize adding a Facebook login button -> Settings -> Valid OAuth Redirect URLs" put the following 2 links:
    A. https://localhost:8000/
    B. https://localhost:8000/accounts/facebook/login/callback

Now the URL error should be gone 🙂 Hope this helps!

Answered By: David Lee