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

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

In third part we’re going to get all important data from our Google app to make logging via Django Rest Framework possible, so, step-by-step.

Creating Google Project

Let’s make a new project in the Google Console for Developers. Here I called it “SocialAuthTest”.

Creating Project for getting API Interface in Google Cosole Developers

At the next time we have to go to set credentials under the link: https://console.developers.google.com/apis/credentials/consent?createClient&project=socialauthtest-appID

NOTE: appID is that blurred one on the image above.

And let’s set there our OAuth Consent Screen

Remember about setting URL which leads to our Vue local server

0. And under the first panel — Credentials, choose OAuth Client ID, then select first option which is Web application.

Creating credentials for app

1. Set Authorized JavaScript Origins
http://127.0.0.1:8080
2. Set Authorized redirect URI
http://localhost:8080/
3. Save Public Client ID and Client Secret shown in the pop-up

Confirmation after creating the Web application with client ID and client secret

4. Go to the Library and there look for Google+ API, select it and enable.
We will need that to get e-mails, names in the easy way.

Google+ API to enable

And that’s all. We have all important informations, setted up all URLs which Google will handle for us and that’s the best moment to take a sip of coffee…

And move to the last part which is applying given informations in our web app both on the frontend and backend sides and also, preparing Django to get Social auth infomations, based on tokens.

Next part:
Part 4 — Setting up backend social auth API

Previous part:
Part 2 — Setting up VueJS