Authorization through the new API site Vkontakte.ru

The army of potential users of your site registered in the social network Vkontakte.ru will certainly appreciate your efforts to introduce registration with the help of their favorite social sphere. I thought about creating such an opportunity today in the morning and, without delay, decided to turn desire into reality.

It made the implementation of two facts easier: the first is that the Open API reminded me a lot of Facebook Connect, with which I was already working. The second fact was still weightier - I already have a library in which each authorization option (OpenID, OAuth, FacebookConnect) are separate backends and write an additional one, much less similar to FC, did not look like a difficult task. In the end, we can say that in fact it really turned out to be a playful thing.

So, what is needed for authorization on Vkontakte.ru?

1. Python 2.5+
2. Django r11807 (best of all download the latest version from the trunk)
3. django-annoying
4. django-publicauth
')
In principle, the description of the installation and settings is on the django-publicauth library wiki pages, but I’ll focus on Vkontakte.ru and describe the instructions again, but in Russian.

Let's start with the fact that you need to create your application on the website vkontakte.ru.
A small disappointment for me was the inability to specify the connection address in the settings of the application in the form of localhost : 8000 /. I had to specify the real domain on which the application will spin and change / etc / hosts on the home computer, as well as launch the site on port 80. There is no such problem on Facebook.
Next, you need to register the generated keys and passwords in the settings.py file, it looks like this:

1. VKONTAKTE_APP_ID = XXXX
2. VKONTAKTE_API_KEY = 'XXXX'
3. VKONTAKTE_SECRET_KEY = 'XXXXXXXXX'

Now you need to insert the following html / javascript piece into your login page template:

Copy Source | Copy HTML <a onclick= "return vk_login();" href= "#" >.ru</a>< <script src= "http://vkontakte.ru/js/api/openapi.js" type= "text/javascript" charset= "windows-1251" ></script> <script type= "text/javascript" > VK.init({ apiId: xxxxx, nameTransportPath: '{% url publicauth-vkontakte-xdreceiver %}' }); function vk_login() { VK.Auth.login(testMe); return false ; } function testMe(response) { if (response.status == "connected" ) { window.location = "{% url publicauth-complete 'vkontakte' %}" } }; </script>

1. Copy Source | Copy HTML <a onclick= "return vk_login();" href= "#" >.ru</a>< <script src= "http://vkontakte.ru/js/api/openapi.js" type= "text/javascript" charset= "windows-1251" ></script> <script type= "text/javascript" > VK.init({ apiId: xxxxx, nameTransportPath: '{% url publicauth-vkontakte-xdreceiver %}' }); function vk_login() { VK.Auth.login(testMe); return false ; } function testMe(response) { if (response.status == "connected" ) { window.location = "{% url publicauth-complete 'vkontakte' %}" } }; </script>
4. Copy Source | Copy HTML <a onclick= "return vk_login();" href= "#" >.ru</a>< <script src= "http://vkontakte.ru/js/api/openapi.js" type= "text/javascript" charset= "windows-1251" ></script> <script type= "text/javascript" > VK.init({ apiId: xxxxx, nameTransportPath: '{% url publicauth-vkontakte-xdreceiver %}' }); function vk_login() { VK.Auth.login(testMe); return false ; } function testMe(response) { if (response.status == "connected" ) { window.location = "{% url publicauth-complete 'vkontakte' %}" } }; </script>
5. Copy Source | Copy HTML <a onclick= "return vk_login();" href= "#" >.ru</a>< <script src= "http://vkontakte.ru/js/api/openapi.js" type= "text/javascript" charset= "windows-1251" ></script> <script type= "text/javascript" > VK.init({ apiId: xxxxx, nameTransportPath: '{% url publicauth-vkontakte-xdreceiver %}' }); function vk_login() { VK.Auth.login(testMe); return false ; } function testMe(response) { if (response.status == "connected" ) { window.location = "{% url publicauth-complete 'vkontakte' %}" } }; </script>
6. Copy Source | Copy HTML <a onclick= "return vk_login();" href= "#" >.ru</a>< <script src= "http://vkontakte.ru/js/api/openapi.js" type= "text/javascript" charset= "windows-1251" ></script> <script type= "text/javascript" > VK.init({ apiId: xxxxx, nameTransportPath: '{% url publicauth-vkontakte-xdreceiver %}' }); function vk_login() { VK.Auth.login(testMe); return false ; } function testMe(response) { if (response.status == "connected" ) { window.location = "{% url publicauth-complete 'vkontakte' %}" } }; </script>
7. Copy Source | Copy HTML <a onclick= "return vk_login();" href= "#" >.ru</a>< <script src= "http://vkontakte.ru/js/api/openapi.js" type= "text/javascript" charset= "windows-1251" ></script> <script type= "text/javascript" > VK.init({ apiId: xxxxx, nameTransportPath: '{% url publicauth-vkontakte-xdreceiver %}' }); function vk_login() { VK.Auth.login(testMe); return false ; } function testMe(response) { if (response.status == "connected" ) { window.location = "{% url publicauth-complete 'vkontakte' %}" } }; </script>
8. Copy Source | Copy HTML <a onclick= "return vk_login();" href= "#" >.ru</a>< <script src= "http://vkontakte.ru/js/api/openapi.js" type= "text/javascript" charset= "windows-1251" ></script> <script type= "text/javascript" > VK.init({ apiId: xxxxx, nameTransportPath: '{% url publicauth-vkontakte-xdreceiver %}' }); function vk_login() { VK.Auth.login(testMe); return false ; } function testMe(response) { if (response.status == "connected" ) { window.location = "{% url publicauth-complete 'vkontakte' %}" } }; </script>
9. Copy Source | Copy HTML <a onclick= "return vk_login();" href= "#" >.ru</a>< <script src= "http://vkontakte.ru/js/api/openapi.js" type= "text/javascript" charset= "windows-1251" ></script> <script type= "text/javascript" > VK.init({ apiId: xxxxx, nameTransportPath: '{% url publicauth-vkontakte-xdreceiver %}' }); function vk_login() { VK.Auth.login(testMe); return false ; } function testMe(response) { if (response.status == "connected" ) { window.location = "{% url publicauth-complete 'vkontakte' %}" } }; </script>
11. Copy Source | Copy HTML <a onclick= "return vk_login();" href= "#" >.ru</a>< <script src= "http://vkontakte.ru/js/api/openapi.js" type= "text/javascript" charset= "windows-1251" ></script> <script type= "text/javascript" > VK.init({ apiId: xxxxx, nameTransportPath: '{% url publicauth-vkontakte-xdreceiver %}' }); function vk_login() { VK.Auth.login(testMe); return false ; } function testMe(response) { if (response.status == "connected" ) { window.location = "{% url publicauth-complete 'vkontakte' %}" } }; </script>
12. Copy Source | Copy HTML <a onclick= "return vk_login();" href= "#" >.ru</a>< <script src= "http://vkontakte.ru/js/api/openapi.js" type= "text/javascript" charset= "windows-1251" ></script> <script type= "text/javascript" > VK.init({ apiId: xxxxx, nameTransportPath: '{% url publicauth-vkontakte-xdreceiver %}' }); function vk_login() { VK.Auth.login(testMe); return false ; } function testMe(response) { if (response.status == "connected" ) { window.location = "{% url publicauth-complete 'vkontakte' %}" } }; </script>
13. Copy Source | Copy HTML <a onclick= "return vk_login();" href= "#" >.ru</a>< <script src= "http://vkontakte.ru/js/api/openapi.js" type= "text/javascript" charset= "windows-1251" ></script> <script type= "text/javascript" > VK.init({ apiId: xxxxx, nameTransportPath: '{% url publicauth-vkontakte-xdreceiver %}' }); function vk_login() { VK.Auth.login(testMe); return false ; } function testMe(response) { if (response.status == "connected" ) { window.location = "{% url publicauth-complete 'vkontakte' %}" } }; </script>
14. Copy Source | Copy HTML <a onclick= "return vk_login();" href= "#" >.ru</a>< <script src= "http://vkontakte.ru/js/api/openapi.js" type= "text/javascript" charset= "windows-1251" ></script> <script type= "text/javascript" > VK.init({ apiId: xxxxx, nameTransportPath: '{% url publicauth-vkontakte-xdreceiver %}' }); function vk_login() { VK.Auth.login(testMe); return false ; } function testMe(response) { if (response.status == "connected" ) { window.location = "{% url publicauth-complete 'vkontakte' %}" } }; </script>
16. Copy Source | Copy HTML <a onclick= "return vk_login();" href= "#" >.ru</a>< <script src= "http://vkontakte.ru/js/api/openapi.js" type= "text/javascript" charset= "windows-1251" ></script> <script type= "text/javascript" > VK.init({ apiId: xxxxx, nameTransportPath: '{% url publicauth-vkontakte-xdreceiver %}' }); function vk_login() { VK.Auth.login(testMe); return false ; } function testMe(response) { if (response.status == "connected" ) { window.location = "{% url publicauth-complete 'vkontakte' %}" } }; </script>
17. Copy Source | Copy HTML <a onclick= "return vk_login();" href= "#" >.ru</a>< <script src= "http://vkontakte.ru/js/api/openapi.js" type= "text/javascript" charset= "windows-1251" ></script> <script type= "text/javascript" > VK.init({ apiId: xxxxx, nameTransportPath: '{% url publicauth-vkontakte-xdreceiver %}' }); function vk_login() { VK.Auth.login(testMe); return false ; } function testMe(response) { if (response.status == "connected" ) { window.location = "{% url publicauth-complete 'vkontakte' %}" } }; </script>
18. Copy Source | Copy HTML <a onclick= "return vk_login();" href= "#" >.ru</a>< <script src= "http://vkontakte.ru/js/api/openapi.js" type= "text/javascript" charset= "windows-1251" ></script> <script type= "text/javascript" > VK.init({ apiId: xxxxx, nameTransportPath: '{% url publicauth-vkontakte-xdreceiver %}' }); function vk_login() { VK.Auth.login(testMe); return false ; } function testMe(response) { if (response.status == "connected" ) { window.location = "{% url publicauth-complete 'vkontakte' %}" } }; </script>
19. Copy Source | Copy HTML <a onclick= "return vk_login();" href= "#" >.ru</a>< <script src= "http://vkontakte.ru/js/api/openapi.js" type= "text/javascript" charset= "windows-1251" ></script> <script type= "text/javascript" > VK.init({ apiId: xxxxx, nameTransportPath: '{% url publicauth-vkontakte-xdreceiver %}' }); function vk_login() { VK.Auth.login(testMe); return false ; } function testMe(response) { if (response.status == "connected" ) { window.location = "{% url publicauth-complete 'vkontakte' %}" } }; </script>
20. Copy Source | Copy HTML <a onclick= "return vk_login();" href= "#" >.ru</a>< <script src= "http://vkontakte.ru/js/api/openapi.js" type= "text/javascript" charset= "windows-1251" ></script> <script type= "text/javascript" > VK.init({ apiId: xxxxx, nameTransportPath: '{% url publicauth-vkontakte-xdreceiver %}' }); function vk_login() { VK.Auth.login(testMe); return false ; } function testMe(response) { if (response.status == "connected" ) { window.location = "{% url publicauth-complete 'vkontakte' %}" } }; </script>
21. Copy Source | Copy HTML <a onclick= "return vk_login();" href= "#" >.ru</a>< <script src= "http://vkontakte.ru/js/api/openapi.js" type= "text/javascript" charset= "windows-1251" ></script> <script type= "text/javascript" > VK.init({ apiId: xxxxx, nameTransportPath: '{% url publicauth-vkontakte-xdreceiver %}' }); function vk_login() { VK.Auth.login(testMe); return false ; } function testMe(response) { if (response.status == "connected" ) { window.location = "{% url publicauth-complete 'vkontakte' %}" } }; </script>

Do not forget to replace xxxxx with the real application ID, and this should be an integer, so do not put quotes.

In principle, this can be stopped. By default, the publicauth library will ask you to fill in the additional username field after the first attempt at authorization, but if you don’t have such a field or you need other additional fields, simply specify the PUBLICAUTH_EXTRA_FORM setting in your settings.py with the value as a path to your form. The only rule is that the form must contain a save method which takes the following parameters:
save (self, request, identity, provider): pass and returns the created user.

You can view the site with a working example here .

UPDATE : at the request of workers, put a ready demo project with all possible authorization options. http://pyplanet.org/static/example.tar.gz

This is a regular Django site, unzip the archive and install all the necessary libraries via pip, and even better through virtualenv + pip. For this, I put a special script inside the project. If you have Linux, then just do ./buildenv.sh and everything will install itself, after which you will only need to activate the virtual environment (source venv / bin / acitvate) and make syncdb. If you do not want to use virtualenv, you can manually make pip install -r pipreq.txt

The settings I have done are a bit unusual, everything is in the settings / folder for you to specify the base (if you are not satisfied with sqlite3) you need to edit the file settings / local.py
Django-publicauth settings are in settings / publicauth.py

Its form with additional fields is the root of the project named custom_from.py.

In order for you to earn authorization on Vkontakte.ru, you can simply write a line in / etc / hosts
127.0.0.1 pyplanet.org
start the site on port 80 (python manage.py runserver 0.0.0.0:80) and go to this address.
Well, or create your own application on the VKontakte site with some other domain and insert your keys into the settings / publicauth.py settings file
The same scam is needed for Facebook.