{"componentChunkName":"component---src-templates-blog-post-js","path":"/hands-on-assignment-custom-user-model-and-login-via-facebook-f6358a50ac3348cd90f8b7b32a8bcd51/","result":{"data":{"site":{"siteMetadata":{"title":"CommonLounge Archive"}},"markdownRemark":{"id":"e636a0e4-1309-5504-99f6-41385361a996","excerpt":"Welcome to your first project with Django. One of the most common things you’ll do as you begin to design your own web applications is to manage user…","html":"

Welcome to your first project with Django. One of the most common things you’ll do as you begin to design your own web applications is to manage user authentication. We covered the generic user creation process earlier that Django provides, but now we’ll delve a little deeper by creating our own custom user model to replace the default one that Django provides. We’ll also integrate social login so that you can login via Facebook into your application!

\n

Project Goals

\n\n

1. Set up Packages

\n

We will start off from where the last tutorial left off but without any of the database or migrations (since we will be modifying some of the models). You can find the starter code here. (If you’re using Django 1.11, use the starter code here). Alternatively if you want to use your own code from the previous tutorials, just delete all the files in the myblog/blog/migrations folder and delete the db.sqlite3 file at myblog/db.sqlite3.

\n

Python Packages Requirements File

\n

We need to make sure we install all the python packages we need. Remember that earlier we manually installed Django by running pip install django~=1.11.0 in the command prompt inside our virtual environment. When we have a lot of packages to manage, we create a requirements.txt file that just lists the name and versions of all the packages.

\n

Create this file at the root of your folder, i.e. at proj1-starter/requirements.txt.

\n
django==2.0.6\ndjango-allauth==0.35.0
\n
\n

If you’re using Django 1.11, you should use the following instead:

\n
django==1.11.0\ndjango-allauth==0.35.0
\n
\n

[django-allauth](https://django-allauth.readthedocs.io/en/latest/index.html) (allauth for short) is the package we are doing to use to help us integrate Login via Facebook into our application. There is a huge ecosystem of packages available that you can simply plug into your Django application. When you find a package that matches your needs, it’s often a better idea to use it rather than re-invent the wheel every time.

\n

Let’s go ahead and install these packages. Remember that you may have to use a different command to start the virtual environment depending on whether you’re on Windows, OSX, or Linux, as we did here.

\n
python3 -m venv myvenv\nsource myvenv/bin/activate
\n

Install the packages. -r simply denotes the path to the file that has all the package information.

\n
pip install -r requirements.txt
\n

Perfect, on to step 2!

\n

2. Create Custom User Model & UserManager

\n

We will begin by creating a custom user model that will add some fields and remove others from Django’s default user model. We’d like to

\n\n

To override the default user model, we need to create our own user class that subclasses both AbstractBaseUser and PermissionsMixin.

\n
\n

[AbstractBaseUser](https://docs.djangoproject.com/en/1.11/topics/auth/customizing/#django.contrib.auth.models.AbstractBaseUser) provides the core implementation of a user model, including hashed passwords and tokenized password resets.

\n
\n
\n

To make it easy to include Django’s permission framework into your own user class, Django provides [PermissionsMixin](https://docs.djangoproject.com/en/1.11/topics/auth/customizing/#django.contrib.auth.models.PermissionsMixin). This is an abstract model you can include in the class hierarchy for your user model, giving you all the methods and database fields necessary to support Django’s permission model.

\n
\n

Let’s go ahead and create a new app that will hold our user model.

\n
python manage.py startapp custom_auth
\n

CLUser Model

\n

Now to define our new user model. Go to custom_auth/models.py and create a class called CLUser.

\n
from django.db import models\nfrom django.contrib.auth.models import PermissionsMixin\nfrom django.contrib.auth.base_user import AbstractBaseUser\nfrom .managers import CLUserManager\nclass CLUser(AbstractBaseUser, PermissionsMixin):\n    email = models.EmailField(unique=True)\n    first_name = models.CharField(max_length=40, blank=True)\n    last_name = models.CharField(max_length=40, blank=True)\n    profile_image_url = models.URLField(null=True, blank=True)\n    is_staff = models.BooleanField(default=False)\n    is_active = models.BooleanField(default=True)\n    date_joined = models.DateTimeField(auto_now_add=True)\n    objects = CLUserManager()\n    USERNAME_FIELD = 'email'\n    REQUIRED_FIELDS = []\n    def get_full_name(self):\n        '''\n        Returns the first_name plus the last_name, with a space in between.\n        '''\n        full_name = '%s %s' % (self.first_name, self.last_name)\n        return full_name.strip()\n    def get_short_name(self):\n        '''\n        Returns the short name for the user.\n        '''\n        return self.first_name
\n

A few important things to note here:

\n\n

CLUserManager

\n

Let’s create a file called managers.py inside the custom_auth app and put in the code for our custom CLUserManager.

\n
# custom_auth/managers.py\nfrom django.contrib.auth.models import BaseUserManager\nclass CLUserManager(BaseUserManager):\n    def _create_user(self, email, password,\n                     is_staff, is_superuser, **extra_fields):\n        \"\"\"\n        Creates and saves a User with the given email and password.\n        \"\"\"\n        if not email: raise ValueError('The given email must be set')\n        email = self.normalize_email(email)\n        user = self.model(email=email,\n                          is_staff=is_staff, is_active=True,\n                          is_superuser=is_superuser,\n                          **extra_fields)\n        user.set_password(password)\n        user.save(using=self._db)\n        return user\n    def create_user(self, email, password=None, **extra_fields):\n        return self._create_user(email, password, False, False,\n                                **extra_fields)\n    def create_superuser(self, email, password, **extra_fields):\n        return self._create_user(email, password, True, True,\n                                **extra_fields)
\n

Here, we provide implementations for create_user and create_superuser both of which use a _create_user helper method.

\n

Our _create_user helper method takes in email, password, is_staff, and is_superuser, as well as a dictionary of extra_fields.

\n
\n

**var_name is simply a shorthand in Python for passing keyword arguments in python. var_name in this case refers to a dictionary of key-value pairs. So for example, calling _create_user(email, password, is_staff, is_superuser,{'profile_image_url' : 'http://www.example.com'}) would pass profile_image_url to `createuserand give it a value of’http://www.example.com’`. Read more here.

\n
\n

You can see that create_user sets both is_staff to False and is_superuser to False. create_superuser sets is_staff to True and is_superuser to True.

\n

Let’s talk about the _create_user method in a little more detail. We first make sure that an email is passed in. Remember that we’re trying to get rid of the username and make the email the default! Next we normalize the email by calling the BaseUserManager’s normalize_email method which just lowercases the domain portion of the email address (i.e. GOOGLE.com would normalize to google.com.

\n

We then go ahead and create the user with self.model → this is just a reference to our CLUser model. Finally, we set the password using set_password, save the user, and return it.

\n

Whew! That was a lot to digest. Take a moment before continuing on :).

\n

Add the new User to the admin

\n

We now register the CLUser with the admin. Copy the following into custom_auth/admin.py:

\n
# custom_auth/admin.py\nfrom django.contrib import admin\nfrom .models import CLUser\n# Register your models here.\nadmin.site.register(CLUser)
\n

Update settings

\n

In our settings.pyfile located inside the mysite folder, we need to add the custom_auth app after the blog app in the INSTALLED_APPS variable. We also set the AUTH_USER_MODEL to the CLUser model we just created.

\n
INSTALLED_APPS = [\n    ...\n    'blog',\n    'custom_auth'\n]\nAUTH_USER_MODEL = 'custom_auth.CLUser'
\n

Update the Blog App to point to our new user

\n

Change the author field inside of the Post class in blog/models.py to point to our new user model. It’s considered good practice to refer to the model by using the AUTH_USER_MODEL settings variable we just defined above instead of referring to the User class directly using custom_auth.CLUser. Import settings by writing from django.conf import settings (line 3), and then use it to modify line 6 as shown below.

\n
from django.db import models\nfrom django.utils import timezone\nfrom django.conf import settings\nclass Post(models.Model):\n    author = models.ForeignKey(settings.AUTH_USER_MODEL, on_delete=models.CASCADE)\n    ...
\n

Migrate

\n

Let’s finally run our migrations. Go to the command prompt and type in the following:

\n
python manage.py makemigrations\npython manage.py migrate
\n

Go ahead and create a superuser as well. Don’t forget the email and password!

\n
python manage.py createsuperuser
\n

Check that everything is running by starting our server: python manage.py runserver.

\n

3. Serve your local site to the world using Ngrok

\n

When you try to integrate Facebook login into your app, you will see that Facebook requires your site to be served over https. When we’re running everything locally, our website is being served over normal http.

\n

Ngrok is a free service allows you to expose your website from your localhost to a url that is generated for you. This means that you can now give a link to your local website to your friend and they can see it!

\n

Install Ngrok

\n

Go to Ngrok and download their software. You will have to create an account to get your auth_token to be able to use the software. Follow the instructions to unzip and set up your auth token. Once that is done, start ngrok by running:

\n
./ngrok http 8000
\n
\n

./ just says to run the ngrok program in the directory you’re in. So make sure you’re in the directory wherever you downloaded ngrok! (Remember you can use cdto change your directory).

\n
\n

After running the above, you should see the following output (with different account name and urls of course):

\n
Session Status                online\nAccount                       James M (Plan: Free)\nVersion                       2.2.8\nRegion                        United States (us)\nWeb Interface                 http://127.0.0.1:4040\nForwarding                    http://db4da85e.ngrok.io -> localhost:8000\nForwarding                    https://db4da85e.ngrok.io -> localhost:8000
\n

Modify settings.py

\n

Add the https forwarding url (https://db4da85e.ngrok.io) to your ALLOWED_HOSTS in settings.py so that Django doesn’t complain about it.

\n
ALLOWED_HOSTS = ['127.0.0.1', 'localhost', '.pythonanywhere.com', 'db4da85e.ngrok.io']
\n

Note that anytime you stop the above ngrok process (by closing your command prompt, killing the process with ctrl+c, etc.), your urls will change when you restart it (unless you’ve paid ngrok). So we advise that while you’re testing this and getting it all set up, keep this process running (maybe in a new command prompt or tab).

\n

4. Setting up allauth

\n

Finally! We’re getting to the part where we will start integrating Facebook Login into our application :).

\n

We will make several changes to your settings.py file located at proj1-starter/settings.py.

\n

Add Authentication Backends

\n

We need to let Django know to use the the authentication backend provided by django-allauth. An authentication backend just implements two required methods. These include get_user(user_id) and authenticate(request,**credentials). Add this to your settings.py file.

\n
AUTHENTICATION_BACKENDS = (\n    # Needed to login by username in Django admin, regardless of `allauth`\n    'django.contrib.auth.backends.ModelBackend',\n    # `allauth` specific authentication methods, such as login by e-mail\n    'allauth.account.auth_backends.AuthenticationBackend',\n)
\n

Add allauth related settings

\n

Next, we add some more apps to INSTALLED_APPS. We need to add several apps from allauth as well as django.contrib.sites.

\n

The sites app is a built in Django feature that allows your Django installation to power more than one site — it is useful if you need to differentiate between those sites in some way. allauth uses the sites framework so that it is easy to switch between development and production setups and to support multi-domain projects. We won’t be delving deeper into this but you’re welcome to check out the documentation if you’d like to know more here.

\n

The allauth apps we’re adding include management for SocialAccount (i.e. the actual user social accounts for different providers) as well as the SocialApplication (contains configuration information like api keys for different providers such as Facebook or Twitter). Add the following to your INSTALLED_APPS list in your settings.py file. We’ve denoted the additions with ######.

\n
INSTALLED_APPS = [\n    'django.contrib.admin',\n    'django.contrib.auth',\n    'django.contrib.contenttypes',\n    'django.contrib.sessions',\n    'django.contrib.messages',\n    'django.contrib.staticfiles',    \n    ####################\n    'django.contrib.sites',\n    'allauth',\n    'allauth.account',\n    'allauth.socialaccount',\n    'allauth.socialaccount.providers.facebook',\n    #####################\n    'blog',\n    'custom_auth'\n]
\n

We need to also add configuration settings for allauth. The explanations for each variable are below. Add these to your settings.py file as well.

\n
## Allauth\n# No username field exists\nACCOUNT_USER_MODEL_USERNAME_FIELD = None\n# No username field required\nACCOUNT_USERNAME_REQUIRED = False\n# We require email\nACCOUNT_EMAIL_REQUIRED = True\n# We authenticate via email\nACCOUNT_AUTHENTICATION_METHOD = 'email'\n# Do all auth over https (necessary for facebook login)\nACCOUNT_DEFAULT_HTTP_PROTOCOL = 'https'\n# No need to verify email for now\nACCOUNT_EMAIL_VERIFICATION = \"none\"\n# This is just the default site that will be created when you\n# run migrate below (because we included it in INSTALLED_APPS).\nSITE_ID = 1
\n

You can now run migrations. Go to the command prompt and type in the following. You may have to quit the server if it’s already running with Ctrl + C.

\n
python manage.py makemigrations\npython manage.py migrate
\n

Modify the urls.py

\n

We need to makes sure the authentication urls for logging in, out, and connecting to social providers like Facebook are properly set up. Open up mysite/urls.py, and delete the old accounts/login and accounts/logout url configurations. We’ve commented them out below so you can see what was there. Instead we replace it with allauth.urls like below.

\n

If you’re using Django 2.0 and above, use the following:

\n
#mysite/urls.py\n...\nurlpatterns = [\n    path('admin/', admin.site.urls),\n    # path('accounts/login/', views.login, name='login'),\n    # path('accounts/logout/', views.logout, name='logout', kwargs={'next_page': '/'}),\n    path('accounts/', include('allauth.urls')),\n    path('', include('blog.urls')),\n]
\n
\n

If you’r using Django 1.11, use the following:

\n
#mysite/urls.py\n...\nurlpatterns = [\n    url(r'^admin/', admin.site.urls),\n    # url(r'^accounts/login/$', views.login, name='login'),\n    # url(r'^accounts/logout/$', views.logout, name='logout', kwargs={'next_page': '/'}),\n    url(r'^accounts/', include('allauth.urls')),\n    url(r'', include('blog.urls')),\n]
\n

5. Setting up our Facebook App

\n

Create the Facebook App

\n
    \n
  1. Go to Facebook Developers and log in using your Facebook account.
    2. \n
  2. Go to My Apps, and click Add New App.
    3. \n
  3. Choose any Display Name you’d like and enter your Contact Email.
    4. \n
  4. On the Add a Product page, select Facebook Login, by clicking on Set Up.
    5. \n
  5. Ignore the Quickstart menu and go directly to Facebook Login → Settings from the left hand menu.
    6. \n
  6. Add the following Valid OAuth Redirect URIs:
    7. \n
  7. https://db4da85e.ngrok.io/
    8. \n
  8. https://db4da85e.ngrok.io/accounts/facebook/
    9. \n
  9. https://db4da85e.ngrok.io/accounts/facebook/login/callback/
    10. \n
\n

Replace https://db4da85e.ngrok.io/ with whatever your url was from ngrok output above.

\n

Hit Save Changes at the bottom.

\n
    \n
  1. Go to the overall app Settings → Basic on the left-hand menu.
    2. \n
\n

\n

You should see your App Id and App Secret at the very top. We are now going to configure allauth to use these two values.

\n

Create the Social Account in our Admin

\n

Go to http://localhost:8000/admin/. Sign in using the superuser email and password from earlier. Under the SOCIAL ACCOUNTS heading click on the + Add next to the Social applications row. You should see something that looks like this:

\n

\n

Select:

\n\n

Now hit save.

\n

6. Integrating

\n

Requesting the appropriate information from Facebook

\n

Now we need a way to tell facebook exactly what information we want to request from the user. Some permissions don’t require the user’s explicit approval such as their public profile information (name, profile picture, etc.)

\n

Fortunately allauth allows us to specify exactly what we need, so add the SOCIALACCOUNT_PROVIDERS configuration to your settings.py file (full documentation). Comments are below.

\n
SOCIALACCOUNT_PROVIDERS = {\n    'facebook': {\n         # requesting the user's email and public profile\n         'SCOPE': ['email', 'public_profile'],\n         # The fields to fetch from Facebook's Graph API. We won't\n         # use all of these but just wanted to show you a sample\n         'FIELDS': [\n            'id',\n            'email',\n            'name',\n            'first_name',\n            'last_name',\n            'verified',\n            'locale',\n            'timezone',\n            'link',\n            'gender',\n            'updated_time',\n            'picture'\n        ],\n    }\n}
\n

Modifying the default allauth flow

\n

Now when the user goes through the facebook flow, allauthwill automatically store all this information and create our CLUser object for us. We do however want to explicitly add the users profile_image_url so we need a way to tell allauth exactly how to modify the user object before it’s saved.

\n

Because of allauth’s great architecture, this is easy to do! It has adapters that we can override for any operation. One in particular is the populate_user(self, request, sociallogin, data) function. It is a hook that can be used to further populate the user instance (available via sociallogin.account.user). Here, data is a dictionary of common user properties (first_name, last_name, email, name) that the provider already extracted for you.

\n

Let’s create an adapter.py file at custom_auth/adapter.py. This will be pretty simple. We will extend the DefaultSocialAccountAdapter class that allauth provides and override the populate_user method from above.

\n
from django.conf import settings\nfrom allauth.socialaccount.adapter import DefaultSocialAccountAdapter\nclass CustomSocialAccountAdapter(DefaultSocialAccountAdapter):\n    def populate_user(self, request, sociallogin, data):\n      user = super(CustomSocialAccountAdapter, self).populate_user(request, sociallogin, data)\n      url = sociallogin.account.extra_data.get('picture', {}).get('data', {}).get('url')\n      if url: user.profile_image_url = url\n      return user
\n

On line 7, we first let the default method do its modifications to the user object. In Python, we can easily do this by invoking the same function in the parent class by calling super. Now that we have the modified user object, we just have to add a profile_image_url to it.

\n

The passed in sociallogin object will contain extra_data available via sociallogin.account.extra_data. extra_data will be a dictionary that will look something like:

\n
{\n  \"id\": \"1703333330834\",\n  \"email\": \"test@test.com\",\n  \"name\": \"James Mat\",\n  \"first_name\": \"James\",\n  \"last_name\": \"Mat\",\n  \"verified\": True,\n  \"locale\": \"en_US\",\n  \"timezone\": -7,\n  \"link\": \"https://www.facebook.com/app_scoped_user_id/1703333330834/\",\n  \"gender\": \"male\",\n  \"updated_time\": \"2018-04-18T17:12:54+0000\",\n  \"picture\": {\"data\": {\"height\": 50, \"is_silhouette\": False, \"url\": \"https://lookaside.facebook.com/platform/profilepic/?asid=17027334asdf333&height=50&width=50&ext=15233ad329&hash=A33ag31ar4bD35uJ\", \"width\": 50}}\n}
\n

On line 8, we simply extract the url, and if it exists, on line 9, we set it on the user object.

\n

Great! We’ve now added the users profile picture to the CLUser model.

\n

The final step before we get to integrating all this new stuff into our templates is to let allauth know where to find this adapter class we wrote.

\n

Just go to settings.py and add the SOCIALACCOUNT_ADAPTER variable.

\n
SOCIALACCOUNT_ADAPTER = 'custom_auth.adapter.CustomSocialAccountAdapter'
\n

Modifying Templates

\n

Now let’s actually integrate everything into the template. We need to show the right urls in our template, add the user’s first name, and show their profile picture.

\n

Open up base.html in blog/templates/blog/base.html. We’re going to load the allauth static files right after the {% load staticfiles %} like below.

\n
{% load staticfiles %}\n{% load socialaccount %}\n{% load account %}
\n

Next we’re going to change the login and logout urls to point to the ones allauthgenerates.

\n

So we’ll make the following changes:

\n\n

Your final file should look like the one below.

\n
{% load staticfiles %}\n{% load socialaccount %}\n{% load account %}\n<html>\n    <head>\n        <title>My Blog</title>\n        <link rel=\"stylesheet\" href=\"//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css\">\n        <link rel=\"stylesheet\" href=\"//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css\">\n        <link href='//fonts.googleapis.com/css?family=Lobster&subset=latin,latin-ext' rel='stylesheet' type='text/css'>\n        <link rel=\"stylesheet\" href=\"{% static 'css/blog.css' %}\">\n    </head>\n    <body>\n        <div class=\"page-header\">\n            {% if user.is_authenticated %}\n                <a href=\"{% url 'post_new' %}\" class=\"top-menu\"><span class=\"glyphicon glyphicon-plus\"></span></a>\n                <a href=\"{% url 'post_draft_list' %}\" class=\"top-menu\"><span class=\"glyphicon glyphicon-edit\"></span></a>\n                <img class=\"top-menu\" src=\"{{user.profile_image_url}}\"></img>\n                <p class=\"top-menu\">Hello {{ user.username }} <small>(<a href=\"{% url 'account_logout' %}\">Log out</a>)</small></p>\n            {% else %}\n            <a href=\"{% provider_login_url \"facebook\" method=\"oauth2\" %}\" class=\"top-menu\"><span class=\"glyphicon glyphicon-lock\"></span></a>\n            {% endif %}\n            <h1><a href=\"/\">My Blog</a></h1>\n        </div>\n        <div class=\"content container\">\n            <div class=\"row\">\n                <div class=\"col-md-8\">\n                {% block content %}\n                {% endblock %}\n                </div>\n            </div>\n        </div>\n    </body>\n</html>
\n

7. Testing

\n

To test, we need to load the site using our https ngrok link. For example, you may navigate to something like https://dbxee81e.ngrok.io. Now click the lock icon, to be redirected to facebook, where you’ll see a page like the one below.

\n

\n

Click the big blue “Continue” button and you should be all logged in! You should see both your first name and profile picture displayed in the top bar.

\n
\n

Congratulations 🎉 🎉 !

\n

The final code is also available here for your reference. If you’re using Django 1.11, use the final code here.

\n

Note that, you’ll have to run the following commands after downloading the above project.

\n
python3 -m venv myvenv\nsource myvenv/bin/activate\npip install -r requirements.txt\npython manage.py makemigrations\npython manage.py migrate\npython manage.py createsuperuser
\n

You’ll also have to create the social account in the admin again!

","frontmatter":{"title":"Hands-on Assignment: Custom User Model & Login via Facebook","date":"May 17, 2018","description":""}}},"pageContext":{"slug":"/hands-on-assignment-custom-user-model-and-login-via-facebook-f6358a50ac3348cd90f8b7b32a8bcd51/","previous":{"fields":{"slug":"/your-first-django-project-0d5679ddef8e4d3ba072fa7fc50eb196/"},"frontmatter":{"title":"Your First Django Project!"}},"next":{"fields":{"slug":"/introduction-to-the-command-line-interface-65a8a4ba99124bc1ba2c79931a3e4fff/"},"frontmatter":{"title":"Introduction to the Command-line Interface"}}}},"staticQueryHashes":["2841359383","2969095810"]}