geekynancy - Tumblr blog

[geekynancy]

[geekynancy]

[geekynancy]

When I started writing part 1, I didn’t expect it to turn into a book, but I like to figure things out and why not let you in on it?

I told you in part 1 that the easiest way to customize the templates is to just copy them to your own templates directory. You probably won’t need all of them but why not copy them all? You can always delete the ones you don’t need later.

On my machine the original allauth templates directory is located at /usr/local/lib/python2.7/site-packages/allauth/templates. These are not readonly files so you shouldn’t need administrator privileges to copy them.

To copy the whole folder and it’s contents use the command line.

From your templates directory.

$ cp -R /usr/local/lib/python2.7/site-packages/allauth/templates/*

Of course, your path may vary.

To add social buttons to your login page:

Edit both account/login.html and socialaccoount/snippets/provider_list.html

Where do I get a nice button?

I was not happy with the selection that Facebook gave me, so I made one with Inkscape.  You can download it here.  Inkscape did not have the font that Facebook uses, which is “HelveticaNeue-Light”.  So I placed the text on top of the image.  

In my provider_list.html template I added:

{% if provider.name == 'Facebook' %} <span id="{{provider.name}}_signin"></span> {% endif %}

and I added this to my css:

#Facebook_signin {   position: absolute;   left: 25%;   z-index: 100;   color: white;   top: 10%;   bottom: 10%;   font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;   text-decoration: none;   text-align: center;   font-size: 16px;  font-size: 1.5vw; }

Above is a screenshot of how mine ended up.  I can see that I might want to move the text up a bit.  You might need to make adjustments to the css to get the text to line up right or change the size. By the way, the StyleEditor tool in Firefox is a lifesaver. You can make changes to a css file live and then save it.

Where is all of this inline styling coming from?

If you are using the style editor on Firefox, you will see some inline styling.  That is coming from https://connect.facebook.net/en_US/sdk.js.  It shouldn't affect your page.

There are some lines in the html files that need explanation.

{% load account socialaccount %}

These load allauth template tags from allauth/account/templatetags/account.py and allauth/socialaccount/templatetags/socialaccount.py

{% get_providers as socialaccount_providers %}

Holds a list of social providers.

{% include “socialaccount/snippets/provider_list.html” with process=“login” %} 

provider_list.html is one of the templates that I suggested above. It inserts a list of providers.

You can skip this part. It is for the curious only:

{% get_providers as socialaccount_providers %} calls

get_providers is a template tag in socialaccount/templatetags which calls providers.registry.get_list()

providers is imported from allauth/socialaccount/providers/

registry is redefined in providers as ProviderRegistry()

ProviderRegistry() imports all of the modules in INSTALLED_APPS that contain “provider” (as a dictionary).  

get_list() returns a list of provider objects from the dictionary.  

allauth.socialaccount.providers.facebook.provider.FacebookProvider

is the Facebook entry. You can have a look at that at

allauth/socialaccount/providers/facebook/provider.py.

Okay, I'm back.

I hope you find this information helpful.  Let me know how it worked out for you.

[geekynancy]

Django-allauth with Django 1.8+ Part 2 Facebook Login

August 14, 2015

In my last post I answered some questions that I had while I was setting up django-allauth to work on my site. Now I am going to tell you what you need to know to implement signing in to Facebook.

Changes to your settings.py:

all of these need to be in your

INSTALLED_APPS:        'allauth',    'allauth.account',    'allauth.socialaccount',    'allauth.socialaccount.providers.facebook',

and

TEMPLATE_CONTEXT_PROCESSORS    'allauth.socialaccount.context_processors.socialaccount',

This section needs to be added:

SOCIALACCOUNT_PROVIDERS = {    'facebook': {        'METHOD': 'oauth2',        'SCOPE': ['email', 'public_profile', 'user_friends'],        'AUTH_PARAMS': {'auth_type': 'reauthenticate'},        'FIELDS': [            'id',            'email',            'name',            'first_name',            'last_name',             'verified',            'locale',            'timezone',            'link',            'gender',            'updated_time'],        'EXCHANGE_TOKEN': True,        'LOCALE_FUNC': lambda request: 'en_US',        'VERIFIED_EMAIL': False,        'VERSION': 'v2.4',    }, }

There is an explanation of these options in the official documentation under PROVIDERS.  If you live outside the US, you will have to find out what to put in LOCALE_FUNC.  There is an xml file that allauth uses at https://www.facebook.com/translations/FacebookLocales.xml

Then you will need to run migrate or syncdb depending on your version of Django.

In order to avoid getting this error message:

Given URL is not allowed by the Application configuration: One or more of the given URLs is not allowed by the App's settings. It must match the Website URL or Canvas URL, or the domain must be a subdomain of one of the App's domains.

You will have to do some set up work.  Fortunately, this will also take care of much of what will need to be done when you add other providers.

Facebook will not let you log in with 127.0.0.1 or localhost so you need to edit your /etc/hosts file.  (This is for Mac and Linux.  I don't know what or if you have to do for Windows.)  This is a readonly file so you need to access it with sudo from the terminal. For example, $ sudo vim /etc/hosts.  Add a line to the file that maps 127.0.0.1 to some made up url for testing like foobar.com or whatever.  

Then you need to go to Facebook and create an app. Facebook will talk you through filling in this form.  After you are signed up, navigate to the Dashboard for your app. Copy the App ID and App Secret because you will need them later.  

Then click Settings.  Change the site url to your testing url.  For example: http://foobar.com:8000/

Now go to your django admin page (still with 127.0.0.1:8000/admin).  Select Sites and add the domain name that you gave Facebook  but without the :8000 extension.  For example, foobar.com.

Save that and select Social Applications.  Then click add social application and fill in the form.  Put in the information that you copied earlier from Facebook and don't forget to add your new site to chosen sites. Save that.

At this point you should be all set up. Navigate to your site using the new url (i,e. foobar.com:8000/...).  

At this stage some people get an Improperly Configured error.  I did not run into this but the general consensus seems to go with changing SITE_ID. You can get the SITE_ID from django.contrib.sites.models import Site. The model for Site has the following fields ['redirect', 'domain', 'name', 'socialapp', 'flatpage', u'id'].

When you use the login for your site, it should have a Facebook link.  Success!

Once again, if you find any errors or omissions please leave me a comment.

[geekynancy]

Django-allauth with Django 1.8+

August 13, 2015

I just installed Django-allauth (0.23) for my project and I had some bumps.  Here are the solutions I have found to those.  The official documentation is here.  

ImportError: No module named context_processors

I ran into an error message that appears to be quite common with django-allauth. It led me to a lot of Googling, most of which led me to do the wrong thing.  I think those solutions might have worked at one time and my solution may not work in the future. For now, this is what worked in my settings.py.

TEMPLATE_CONTEXT_PROCESSORS = ( 'django.contrib.auth.context_processors.auth', 'django.template.context_processors.request', 'django.template.context_processors.debug', 'django.core.context_processors.static', 'django.contrib.messages.context_processors.messages', 'django.core.context_processors.request', 'allauth.socialaccount.context_processors.socialaccount' ) TEMPLATES = [ { 'BACKEND':'django.template.backends.django.DjangoTemplates', 'DIRS': ['templates', ], path to your templates folder 'APP_DIRS': True, 'OPTIONS': { 'context_processors': [ Already defined Django-related contexts here 'django.contrib.auth.context_processors.auth', `allauth` needs this from django "django.template.context_processors.request", "allauth.account.context_processors.account", "allauth.socialaccount.context_processors.socialaccount", "django.template.context_processors.static", ], }, }, ]

My own templates could not be found

As of this writing, the official documentation tells you to leave the ‘DIRS’ in TEMPLATES empty. That is wrong. Without the path to your own templates, they will not load. I changed that in the TEMPLATES entry above. This however led me to a different problem…

My templates load but the allauth templates do not

It turned out that I was using my own base.html in my templates, but allauth uses base.html as well. This caused a collision, so if my project’s base.html was found, it loaded my project’s template but if my project’s templates could not be found, it loaded the allauth template. This was easily solved by changing the name of my base.html and, of course, editing the templates that extended it.

What is the link to the allauth url?

This is something that really took me time to figure out. I tried account/login, /account/login/, accounts.login as well as other variations on this theme. I finally worked it out. You have to reference account + underscore + the page you want to link to. For example:` href=“{% url 'account_login’ %}”`. I could have figured this out sooner if I had looked at the allauth account app urls.py where these things are named. I parsed the urls.py in a spreadsheet that you can view here.

Where are the allauth source files?

If you want to look at urls.py as well as the other source files on you computer, they are located in your python site-packages folder. On my Mac, that path is: /usr/local/lib/python2.7/site-packages/allauth. I have put my edited version of the directory tree here.

How id I customize the Allauth templates?

The easiest way I found is to just copy them to a new folder named account in your project’s template folder. For example, MyProject/templates/account.

File not found – http://127.0.0.1:8000/accounts/profile/

This can be solved by adding `LOGIN_REDIRECT_URL = ’/’` to your settings.py. **Why does it go to accounts/profile?** Allauth is a wrapper for the Django authentication system and this is the default behavior of the Django login system. From the docs:

“If called via POST with user submitted credentials, it tries to log the user in. If login is successful, the view redirects to the URL specified in next. If next isn’t provided, it redirects to settings.LOGIN_REDIRECT_URL (which defaults to /accounts/profile/). If login is’t successful, it redisplays the login form.”

How do I redirect to a page that is not my home page?

You cannot accomplish this by putting the relative path in LOGIN_REDIRECT_URL. It will take you to /account/login/page_you_put_in. One way to accomplish this is through inheritance. Put this in one of your project’s files:

from allauth.account.adapter import DefaultAccountAdapter class MyAccountAdapter(DefaultAccountAdapter): def get_login_redirect_url(self, request): return relative_path_of_page

and make a reference to that in your settings.py, for example:

ADAPTER = "app.views.MyAccountAdapter" ACCOUNT_ADAPTER = "app.views.MyAccountAdapter"

How do I automatically redirect to the page the user was on when they clicked to log in?

After a successful login, I want to take the user back to where they were. Using “next” did not work for me. The way I ended up doing it is not pretty but here are the steps:

Make a simple page. I called mine goback.html. Don’t use a template. You will just add a layer of complexity. goback.html will just be some javascript that takes you back. You can use `location.back(-#)`, but the page won’t reload.

If you want to refresh the page, use a cookie. Choose pages that the user would want to return to after login and place a cookie containing the full path on page load. You can get the path of the current page using window.location.href. I used a cookie that I called 'breadcrumb’ which I used to keep track. In goback.html, retrieve the cookie and use location.assign(cookie) to navigate back. location.assign() will take you back and reload the page. here is a link to the html that you can copy.

In MyAccountAdapter (see above), return the relative path of goback.html.

In your urls.py add

url(’^goback/$’,views.goback)

to your patterns.

Add a view to your views.py.

Please leave a comment if you find errors on this page or a better way to do any of this.