21. Django 1.8 Server Build - CentOS 7 hosted (VPS) on Linode - User Authentication 8 (Facebook/Google/Twitter login buttons)
With what we've done so far, the user can login with the user's Facebook/Google/Twitter account. In this tutorial, we'll simply add buttons for each of the app.
So, it will look like this:
We need to be sure our settings.py has STATIC_URL defined:
STATIC_URL = '/static/'
Also, django.contrib.staticfiles should be in INSTALLED_APPS:
INSTALLED_APPS = (
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'car',
'tinymce',
'pages',
'driver',
'django.contrib.admin',
'social.apps.django_app.default',
)
We may also want to convert the text links as image links in base.html:
<html>
<head>
<link rel="stylesheet" type="text/css" href="/static/css/car.css" />
{% block extrahead %}{% endblock %}
</head>
<body>
<div id="pageContainer">
<div id="nav_top_right">
{% if user.is_authenticated %}
<p>Hello {{ user.get_full_name|default:user.username }}!</p>
<p><a href="/logout/">Logout</a></p>
{% else %}
<p><a href="/login/">Login</a></p>
{% load staticfiles %}
<p><a href="{% url 'social:begin' 'facebook' %}?next={{ request.path }}"><img src="{% static "images/Facebook-Login-Icon-50.png" %}"/></a></p>
<p><a href="{% url 'social:begin' 'google-oauth2' %}?next={{ request.path }}"><img src="{% static "images/Google-Login-Icon-50.png" %}"/></a></p>
<p><a href="{% url 'social:begin' 'twitter' %}?next={{ request.path }}"><img src="{% static "images/Twitter-Login-Icon-50.png" %}"/></a></p>
{% endif %}
</div>
{% block content %}
{% endblock %}
</div>
</body>
</html>
In our templates, we can either hardcode the url like /static/my_app/myexample.jpg or, preferably, use the static template tag to build the URL for the given relative path by using the configured STATICFILES_STORAGE storage (this makes it much easier when you want to switch to a content delivery network (CDN) for serving static files) - Managing static files (CSS, images).
Here are the files we've created so far:
Ph.D. / Golden Gate Ave, San Francisco / Seoul National Univ / Carnegie Mellon / UC Berkeley / DevOps / Deep Learning / Visualization
My YouTube channel