Тема авторизации через социальные сети очень актуальна, ведь это очень удобно для пользователей.

Для примера мы авторизуемся в фейсбуке с помощью джанги, а также вытащим аватарку из фейсбука. Вообще говоря это относительно простая задача, потому что у фейсбука в документации авторизация очень подробно описана.

Теория

Сначала немножко теории для общего понимания.

1) Создаем приложение в фейсбуке.

2) В настройках приложения указываем домен и сайт нашего скрипта авторизации.

3) Пользователь кликает на кнопку нашего сайта «войти через фейсбук», при этом его браузер направляется на страницу фейсбука вида

https://www.facebook.com/dialog/oauth?client_id=23454325335&scope=email&redirect_uri=http://example.com/login/facebook/

Здесь client_id и есть ID нашего приложения, а redirect_uri адрес нашего скрипта авторизации.

4) Если пользователь разрешил авторизацию, то он будет перенаправлен на наш скрипт (редирект 302), причем методом GET будте передан параметр code.

5) Зная параметр code, а также ID приложения и секретный код приложения, на стороне сервера делаем запрос к фейсбуку для получения токена.

https://graph.facebook.com/oauth/access_token?

    client_id=YOUR_APP_ID
   &redirect_uri=YOUR_REDIRECT_URI
   &client_secret=YOUR_APP_SECRET
   &code=CODE_GENERATED_BY_FACEBOOK

6) Получив токен мы даелаем запрос на получение данных профиля пользователя.

https://graph.facebook.com/me?access_token=dgsdf64364456sfg46"

7) Вытаскиваем аватарку.

Практика

Создаем приложение в фейсбуке

Первое что нам нужно сделать — это создать приложение в фейсбуке, делается это в пару кликов. Переходим сюда и жмем кнопку «Создать новое приложение».
В поле «App Domains» укажите домен сайта на котором вы делаете авторизацию — «example.com».
В поле «Website with Facebook Login» указываем тот же адрес в таком виде — «http://example.com»

Обратите внимания на следующие параметры приложения, они нужны для авторизации.
App ID: 23454325335
App Secret: sdkf678324hjghdsf7ds6f423dsfg

Кнопка «Войти черзе фейсбук»

Кнопка может быть просто ссылкой:

https://www.facebook.com/dialog/oauth?client_id=23454325335&scope=email&redirect_uri=http://example.com/login/facebook/

Главное подставьте свои параметры.

Код на Джанге

Когда пользователь первый раз входит через фейсбук, мы автоматически будем создавать пользователя User, а также Profile в котором мы будем хранить facebook_id пользователя и аватарку. При последующей авторизации используется User у которогоProfile.facebook_id совпадает текущим.

Дописываем в settings.py следующие строчки.

AUTH_PROFILE_MODULE = 'accounts.Profile'

FACEBOOK_APP_ID = 23454325335
FACEBOOK_REDIRECT_URL = 'http://example.com/login/facebook/'
FACEBOOK_SECRET = 'sdkf678324hjghdsf7ds6f423dsfg'

Созданим теперь уже джанговское приложение accounts.

models.py

# coding: utf-8
from django.db import models
from django.contrib.auth.models import User
from django.db.models.signals import post_save

from sorl.thumbnail import ImageField

class Profile(models.Model):
    user = models.OneToOneField(User)
    image = ImageField(u"Изображение", upload_to=upload_to, blank=True, null=True, max_length=255)
    facebook_id = models.BigIntegerField(null=True)

def create_user_profile(sender, instance, created, **kwargs):
    if created:
        Profile.objects.get_or_create(user=instance)

# благодаря сигналам, профиль будет автоматически создаваться при создании пользователя
post_save.connect(create_user_profile, sender=User)

Тут вроде все понятно, привычный джанговский профиль пользователя и сигналы.

views.py

# coding: utf-8
import datetime
from StringIO import StringIO
import urllib
import urlparse

from django.conf import settings
from django.contrib import messages
from django.shortcuts import redirect, render
from django.views.generic import View
from django.utils import simplejson
from django.contrib.auth import authenticate, login, logout
from django.contrib.auth.models import User
from django.core.files.uploadedfile import InMemoryUploadedFile
from django.views.generic.simple import direct_to_template

from accounts.models import Profile

class FacebookLoginView(View):
    """ http://developers.facebook.com/docs/authentication/ """

    def get(self, request):
        access_token = self.get_access_token()
        facebook_data = self.get_facebook_data(access_token)
        try:
            profile = Profile.objects.get(facebook_id=facebook_data['id'])
        except Profile.DoesNotExist:
            user = self.create_user(facebook_data)
        else:
            user = profile.user

        user.backend = 'django.contrib.auth.backends.ModelBackend'
        if user.is_active:
            login(request, user)
        else:
            messages.error(request, 'Ваша учетная запись заблокирована!')
        return redirect('/')

    def get_access_token(self):
        code = self.request.GET.get('code','')
        graph_url = u"https://graph.facebook.com/oauth/access_token?" + urllib.urlencode({
            'client_id': settings.FACEBOOK_APP_ID,
            'redirect_uri': settings.FACEBOOK_REDIRECT_URL,
            'client_secret': settings.FACEBOOK_SECRET,
            'code': code
        })

        response = urllib.urlopen(graph_url)
        content = response.read()
        data = dict(urlparse.parse_qsl(content))
        return data['access_token']

    def get_facebook_data(self, access_token):
        graph_url = "https://graph.facebook.com/me?" + urllib.urlencode({'access_token':access_token})
        response = urllib.urlopen(graph_url)
        content = response.read()
        data = simplejson.loads(content)
        return data

    def create_user(self, facebook_data):
        username = facebook_data['first_name'] + ' ' + facebook_data['last_name']
        password = User.objects.make_random_password()

        now = datetime.datetime.now()

        user = User(
            username=username,
            email=facebook_data.get('email', None),
            first_name = facebook_data['first_name'],
            last_name = facebook_data['last_name'],
            is_staff=False,
            is_active=True,
            is_superuser=False,
            last_login=now,
            date_joined=now
        )
        user.set_password(password)
        user.save()

        profile = user.get_profile()
        profile.facebook_id = facebook_data['id']
        try:
            profile.image = self.get_facebook_avatar(facebook_data['id'])
        except Exception:
            pass
        profile.save()
        return user

    def get_facebook_avatar(self, facebook_id):
        url = "http://graph.facebook.com/%s/picture?type=large" % facebook_id
        response = urllib.urlopen(url)
        content = response.read()
        f = StringIO(content)
        upload = InMemoryUploadedFile(
            file=f,
            field_name=None,
            name = u'avatar_%s.png' % facebook_id,
            content_type = response.headers['content-type'],
            size = int(response.headers['content-length']),
            charset=None,
        )
        response.close()
        return upload

Многовато получилось кода для примера, но ничего страшного начните раскручивать с метода get и все станет ясно.

 

Авторизация через Facebook пример для Django

 

 

Как создать iFrame приложение в Facebook?

Шаг 1. Регистрация нового приложения

Приложения в Facebook могут использоваться для:

  1. витрина сайта в виде приложения, игр
  2. вкладка для странице
  3. интеграция Facebook и сайта
  4. интеграция Facebook в мобильное приложение для Android, iOS

Если у вас уже есть что-то из этого, вы можете использовать существующее приложение. Просто перейдите к шагу 2.

 

A: Итак, чтобы создать новое приложение, перейдите в футере сайта по ссылкеРазработчикам (Developers) или введите в строке браузера http://developers.facebook.com

B: В верхнем меню выберите My Apps.

C: Нажмите Set Up New App на странице.

D: Введите название приложения, подтвердите что вы согласны с правилами размещения приложений, и нажмите Создать приложение (Create App).

 

Теперь подтвердите капчу и ваше приложение будет создано.

P.S. Правила размещения приложений лучше все же прочитать 😉

 

Шаг 2. Общие настройки

Если вы сделали все правильно, то перед вами должна быть страница “Редактировать ”, а в строке браузера подобная строка http://www.facebook.com/developers/editapp.php?app_id=193136937375413 только с вашим ID приложения. Сейчас у вас слева активна вкладкаAbout. Давайте посмотрим какие настройки вы можете сделать на этой странице.

 

 

A: Задайте Название и Описание вашего приложения.

B: Загрузите значок и логотип вашего приложения. Сейчас стоит уделить внимание именно значку, так как это он будет той “красивой иконкой”, которая будет у вашей вкладки на странице. Не забудьте, что размер значка 16х16 пикселей, а логотипа - 75х75.

Сравните пример значка Home вкладки и значок старого Static FBML app.

 

 

 

C: Выберите родной язык приложения (наверное, русский). Ниже вы можете добавить администраторов и разработчиков в ваше приложение.

D: Не забудьте сохраниться!

 

После того, как вы сохранили все изменения - вам будут показана страница с информацией про ваше приложение.

 

 

Запомните ID приложения, а также вам нужно знать две ссылки: Изменить настройки иСтраница профиля приложения.

 

Первая позволяет вернуться к окну, где можно изменить все настройки приложения, а вот вторая понадобится нам ниже (чуть позже). Если коротко: Facebook создает для каждого приложения свою страницу (Page), такую же как обычная но с дополнительными возможностями.

 

Если вы помните заметку про iframes приложения, то для вас не будет новостью, что теперь вам еще понадобится хостинг для ваших страниц (скриптов) и домен. В своих проектах и соответственно тут я буду использовать язык PHP для написания серверных скриптов. Поэтому я использую обычный платный хостинг. Если у вас его нет, и вы пока не знаете - нужен ли он вам, вы можете зарегистрировать бесплатный тестовый период на большинстве хостингов (при этом вам дадут домен третьего уровня). Либо если вы пишите на языке Python - можете использовать Google App Engine.

 

Шаг 3. Настройка приложения и вкладки страницы

A: Нажмите Изменить настройки и перейдите на вкладку Facebook Integration.

 

 

B: Заполните поля Canvas Page и Canvas URL. В первое - впишите “короткий линк” для вашего приложения. Во втором нужно вписать место, где будут хостится файлы вашего приложения (пока не конкретной вкладки, а именно приложения apps.facebook.com/...). Я специально создал в корневой директории своего домена для этого папку facebook.

C: Ниже вы должны настроить Вкладки страницы.

 

 

Для начала задайте Имя вкладки - название, которое будет отображаться на странице (см. выше примеры отличий значков вкладок). Дальше вам нужно задать Tab URL - место где хранятся скрипты для вкладки. Они отсчитываются от Canvas URL, поэтому в папке facebook у себя на хостинге я создал папку page-tab.

D: Сохраните изменения!

 

Создавать папки и загружать файлы можно как через веб интерфейс панели администрирования хостингом, так и через FTP клиенты, используя адрес хоста, логин и пароль. Вы можете попробовать файловый менеджер Total Commander. Если вы не пишете код в блокноте, а используете удобный редактор и хотите загружать файлы прямо через него на FTP - погуглите Notepad++.

 

У меня получилась такая структура на своем сайте:

 

 

Шаг 4. Создаем и загружаем скрипты приложения

Мы только что настроили приложение, и я хотел проверить как оно работает (перейдя по ссылке http://apps.facebook.com/social-development/) Первое что я подумал - загрузить простой файл index.html содержащий всего одну строку:

 

 

Собственно так и сделал. Я создал файл и загрузил его в папку facebook. Когда я открывал его по ссылке http://rtplz.me/facebook/ все работало. Хостинг правильно определял, что если файл не указан, то он по умолчанию открывает index.html или index.php. При этом на моем экране на белом фоне появилась надпись: Hello world. Но когда я перешел по ссылке приложения я был удивлен:

 

 

На экране было такое сообщение. Собственно, первое что вы должны запомнить - размещать статичные файлы *.html у вас не получится (в большинстве случаев). Все из-за того, что подгружая в iframes приложение вашу страницу, Facebook передает ей массив параметров (методом POST). А статичные файлы просто не умеют их принимать и обрабатывать.

 

К счастью ничего не нужно переписывать - проблема решилась переименованием файла index.html в index.php.

 

 

Я специально не создавал ничего сложного. Это технический пример как сделать. В принципе все зависит от вашей фантазии, файл index.php может содержать тысячи строк кода, или просто обычный HTML - все зависит от того, какие задачи вам нужно решать. А нам нужно сделать так, чтобы с помощью этого приложения пользователи могли отправлять приглашения своим друзьям, и чтобы мы отделяли такие запросы и редиректили их на нужную нам страницу.

 

Вот код, который должен быть в приложении. Вся логика описана в комментариях в коде.

 

 

Шаг 5. Создание вкладки и добавление ее на страницу

Мы создали приложение, которое выводит “Посетите нашу страницу Social-playground”. При этом мы запрограммировали его так, что при отправке Request пользователем своим друзьям, переходя с них их (друзей) редиректили на нужную страницу.

 

Теперь мы должны создать файл, содержащий скрипт самой вкладки. Он располагается в папке page-tab и тоже называется index.php

 

 

Вот этот скрипт делает на странице кнопку, при нажатии на которую у пользователя поднимается окно приглашения всех друзей.

 

 

Когда он выбрал и отправил приглашения тем кому захотел, у этих пользователей появится следующее:

1. Уведомление о запросе, при нажатии на которое пользователя перебросит на заданную группу.

 

 

2. Запрос от приложения, делающий что и выше но более наглядный: с текстом который вы можете сами задать в коде.

 

 

Вы можете сами протестировать все на странице http://www.facebook.com/pages/Social-playground/200666556625523?sk=app_193136937375413 и понять, как это выглядит и как это работает.

 

Чтобы применить это у себя, вам нужно заменить:

  1. appId:'193136937375413' своим значением (берется из настроек приложения)
  2. message: и title:  на свой текст
  3. Вместо кнопки вы можете вызывать javascript функцию req() из любого места, например при щелчке на определенное изображение на странице

 

Содержание вкладки может быть другим, главное не удаляйте все, что до последнего тега !

 

Выводы

Предложенный инструмент является хорошым инструментом для приглашения участниками своих друзей на страницу. Однако нужно учесть следующий момент: если вы используете уже существующее приложение, которое отправляет свои Request - вы должны различать их. Это легко осуществляется добавлением параметра data в запрос. Так же с его помощью вы можете “различать” запросы, отправленные с разных элементов или страниц. И еще, при переходе на Request 2.0 (в настройках приложения) в первом случае после перехода запрос не удалится - это нужно делать автоматически самим. Хорошо то, что запросы такие живут всего 14 дней - после этого их сам Facebook удалит.

 

При грамотной реализации система позволяет как получить более гибкие настройки (выводить не весь список друзей, а только часть из них, либо сортировать определенными группами) и использовать этот инструмент для более широкого круга задач. Так, например, вы можете реализовывать конкурсы, где пользователь должен пригласить определенное количество пользователей и они потом должны совершить какое-то действие. Во-первых - вы можете узнать о всех Request’ах отправленными пользователями (от кого, кому, и какой статус: принят/отклонен). Ну и во-вторых - новые iframes приложения-вкладки позволяют использовать огромные возможности, включая авторизацию с помощью facebook, сохранение результатов в базу данных и прочее.

 

Пользуйтесь с удовольствием. Я надеюсь этот инструмент найдет свое применение на многих страницах. А в следующий раз я расскажу про то, как в новых вкладках можно разделить контент для фанатов и нет, и даже узнать конкретного пользователя, который зашел на вашу страничку и что-то с ним сделать (что - секрет).

 

P.S. Если к тому времени будет готова одна из страниц, которая будет максимально оптимизирована под возможности, которые дает Facebook, я расскажу вам о таком же простом инструменте, который в несколько раз “убойнее” и позволит вам бесплатно получить больше фанатов вашей страницы но не изменит ничего в вашей работе.

 

Скачать код использованные в примере.

 

http://www.facebook.com/note.php?note_id=193682654001816

 Leave a Reply

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

(required)

(required)

   
© 2012 Программирование в удовольствие Яндекс.Метрика Suffusion theme by Sayontan Sinha