DRFSAMV — Django Rest Framework + Social Auth + Mongo + VueJS (Part 1)

Hello!

The “tutorial” is splitted to few parts, where I’m showing how I solved the problem with RESTfull social authentication via Google with Django and VueJS.

Part 1 — Setting up Django with databases — PostgreSQL and MongoDB
Part 2 — Setting up VueJS
Part 3 — Configure Google API
Part 4 — Setting up backend social auth API
Part 5 — Communicate with API from VueJS
Part 6 — Raw project ready to use

How does it start?

I was fighting with merging two absolutelly awesome frameworks I used last time — VueJS and Django designed for frontend and backend development respectivelly. I also faced the problem with RESTFull, social authentication (using Google) and found how to fix these lacks in Django and VueJS.

Also I was asking community how to solve similar problem and in the result i got “write your own authentication, it’s not so hard” or “don’t use other packages” or mostly “I don’t know, never tried”. So instead of reinventing wheel, I decided to fix one a bit and show the way I found the solution.

I’m aware of that, there might be more suitable soultions for such apps like Flask, Tornado at the backend and React or Angular at the frontend.

I faced with many problems in case of building my own REST webapp (using DjangoRestFramework) to develop quickly, store datas in the Mongo Database and PostgreSQL alongside for further modeling and develop front using VueJS and backend when I can, in the way I want to with working social authentication. Now it works like a charm and I’d like to show you how to achieve that.

I decided to split it into two databases — first relational PostreSQL for social auth and MongoDB for BIG STUFFS, so we won’t have mess in the future.

What I’m using?

  • Python 3.5
  • NodeJS
  • Virtualenv
  • VueJS
  • and bought hosting where I could create MongoDB and serve datas (even the cheapest one).

Important info: all was cooked on the Windows 10, so if you’re using Unix OS, please check out the documentation what to do in your case. I assume also you know at least in a tiny bit how to work with Python/Django and VueJS.

If you’re interested about stack I’m using, at the end of this part, I’m sharing with links to read more.

Music plays on!

In this case let’s start, with avoiding surfing on the internet, StackOverflow and wondering with cup of coffee “what the hell is happening there”…

and let’s make two separated folders, which can be uploaded to two different servers — folder frontend and backend.

mkdir frontend
mkdir backend

and now, move into backend folder

cd backend

and built with virtualenv our backend app — to create separated Python environment which won’t mess with global python and installed packages, we’ll also prepare for further communication with frontend apps.

virtualenv venv
venv\Scripts\activate

Let’s install all packages we will need for that:

Note: in the newest wersion of Django (2.0) psycopg2 has been replaced to django.db.backends.postgresql but here we’re not using that.

With a command (including additional packages like markdown django-filters and so on):

pip install django==1.11.7 djangorestframework markdown django-filter django-cors-headers django-rest-framework-mongoengine rest-social-auth psycopg2 django-rest-framework-social-oauth2

and separatedly:

pip install -U mongoengine

you can also check under the command

pip freeze

to check out if you have list like that, which qualifies to go further with tutorial:

certifi==2018.1.18
chardet==3.0.4
defusedxml==0.5.0
Django==1.11.7
django-braces==1.12.0
django-cors-headers==2.1.0
django-filter==1.1.0
django-oauth-toolkit==1.0.0
django-rest-framework-mongoengine==3.3.1
django-rest-framework-social-oauth2==1.0.8
djangorestframework==3.7.7
idna==2.6
Markdown==2.6.11
mongoengine==0.15.0
oauthlib==2.0.6
psycopg2==2.7.3.2
PyJWT==1.5.3
pymongo==3.6.0
python3-openid==3.1.0
pytz==2017.3
requests==2.18.4
requests-oauthlib==0.8.0
rest-social-auth==1.2.0
six==1.11.0
social-auth-app-django==1.2.0
social-auth-core==1.6.0
urllib3==1.22

Building simple app

Still in the backend folder, call the command below to create django project:

django-admin startproject _main

and let’s move from the folder _main another folder _main and file manage.py to folder backend, so finally we should have in backend folder:

  • folder _main, which contains settings.py, urls.py, wsgi.py and __init__.py
  • our venv folder
  • and file manage.py

in the end your backend structure should look like:

─ ${root}
├── _main
├── backend
│ ├── _main
│ │ ├── __init__.py
│ │ ├── settings.py
│ │ ├── urls.py
│ │ ├── wsgi.py
│ ├── venv
│ └── manage.py
└── frontend

Setting up the PostgreSQL Database

At the first, let’s take care of our PostgreSQL connection. In file settings.py find lines DATABASES, like:

DATABASES = {
'default': {
'ENGINE': 'django.db.backends.sqlite3',
'NAME': os.path.join(BASE_DIR, 'db.sqlite3'),
}
}

and replace to:

DATABASES = {
'default': {
'ENGINE': 'django.db.backends.postgresql_psycopg2',
'NAME': 'databasename',
'USER': 'databaseuser',
'PASSWORD': 'yourpassword',
'HOST': 'localhost',
'PORT': 22222,
}
}

Given port is of course an example. Put the correct one and check if the database is connecting properly by just running local server:

python manage.py runserver

If you experienced errors in the console — reconfigure database or check if the datas you put to connect with the database are correct.

Setting up the MongoDB

Put these lines at the top of the settings.py file:

from mongoengine import *

and from the server you bought you have to create new MongoDB database, get name, login, passoword, IP (or http adress) and port and put:

connect(
db='databasename',
username='username',
password='passowrd',
host='address to database like mongodb:// and ip here',
port=27017,
alias="mongo"
)

the field alias is the name of database we want to connect with, pushing new datas. So, if you have multiple Mongo databases, like:

connect(
db='databasename',
username='username',
password='passowrd',
host='address to database like mongodb:// and ip here',
port=27017,
alias="mongo"
)
connect(
db='databasename_2',
username='username_2',
password='passowrd_2',
host='address to database like mongodb:// and ip here',
port=27017,
alias="mongo_2"
)

you can precisely point to which one database you want to store data, mongo or mongo_2.

Next step is setting up simple frontend environment, using VueJS. I’ll tell also a bit about Mixins, how to use it and Route Guards to prevent not logged in users to go into parts of site we don’t want to. Also we will setup our login configuration for GoogleOAuth2.

Next Part:
Part 2 — Setting up VueJS