django-rest-auth + django-allauth + angular2

Я пытаюсь настроить социальную регистрацию (google, facebook, twitter) в своем веб-приложении. Я использую Django Rest Framework для внутреннего интерфейса и Angular2 для внешнего интерфейса. Стандартная регистрация хорошо работает с django-rest-auth. Я хотел бы настроить часть социальной авторизации с помощью django-allauth. Сценарий социальной аутентификации:

  • Пользователь нажимает кнопку «Войти через Facebook»
  • Он его перенаправил на страницу авторизации Facebook.
  • Он принимает запрос на авторизацию в Facebook.
  • Он перенаправляется обратно в мое веб-приложение при входе в систему

Но сначала я не знаю, как перенаправить пользователя на страницу авторизации facebook. Когда я перехожу к http://localhost:8000/rest-auth/facebook/, Обязательными данными формы являются «Токен доступа» и «Код». Но чтобы установить эти данные, мне нужно получить их со страницы авторизации facebook. Я прав? Как я могу это сделать? Как я могу перенаправить пользователя на страницу авторизации в социальных сетях (facebook, google, twitter)?


angular django-rest-framework django-allauth django-rest-auth
person Ben    schedule 22.09.2016    source источник

Ответы (1)


arrow_upward
5
arrow_downward

Ознакомьтесь с python-social-auth. Это альтернатива django-allauth, но более простая в использовании. Из вашего вопроса, чтобы включить вход в facebook, вам необходимо захватить токен доступа из запроса, сделанного angular2 в API facebook, и передать его своему бэкэнду. Для вашего бэкэнда django реализуйте api используя django-rest-framework. Вы можете сделать это, выполнив следующие действия:

  1. Зарегистрируйте свое приложение на странице разработчиков facebook. В настройках оставьте домен приложения пустым и установите URL-адрес сайта на http://localhost:8000. После успешной настройки получите секрет приложения и идентификатор приложения. Вы будете использовать его позже.

  2. В файле index.html приложения angular2 добавьте в тело следующий скрипт.

<script>(function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/en_GB/sdk.js#xfbml=1&version=v2.7&appId=1622731728039944"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk')); </script>

  1. npm установите ng2-facebook-sdk и в конструкторе th для вашего компонента инициализируйте sdk

`импортировать {FacebookService, FacebookLoginResponse, FacebookInitParams} из 'ng2-facebook-sdk / dist';

@Component(...)
export class MyComponent {
  constructor(private fb: FacebookService) {
    let fbParams: FacebookInitParams = {
                                   appId: '123456789',
                                   xfbml: true,
                                   version: 'v2.6'
                                   };
    this.fb.init(fbParams);
  }
}
  1. Добавить функцию входа в систему

login() { this.fb.login({ scope: 'public_profile', return_scopes: true }).then( (response: FacebookLoginResponse) => { status = response['status']; var userId = response['authResponse'].userID; if (status == 'connected') { let access_token = response['authResponse']['accessToken']; localStorage.setItem('id_token', access_token); this.router.navigate(['/home']); } }, (error: any) => console.error(error) ); }

  1. Затем в каждый запрос, который вы делаете к своему бэкэнду, включайте токен доступа в заголовок. Это позволит аутентифицировать пользователя в вашем бэкэнде. если пользователя не существует, он будет создан. например var headers = new Headers(); headers.append('Content-Type', 'application/x-www-form-urlencoded'); headers.append('Authorization', 'Bearer facebook ' + localStorage.getItem('id_token')); return this.http.post(this.url + '/api/images/edits/' + thumbId + '/', null, { headers: headers }) .map(res => res.json());

  2. В вашем django backend, pip install django-rest-framework-social-oauth2 и добавьте их в установленные приложения в settings.py. INSTALLED_APPS = ( ... 'oauth2_provider', 'social.apps.django_app.default', 'rest_framework_social_oauth2',)

    Добавьте его в класс аутентификации для restframework

REST_FRAMEWORK = { 'DEFAULT_AUTHENTICATION_CLASSES': ( 'oauth2_provider.ext.rest_framework.OAuth2Authentication', 'rest_framework_social_oauth2.authentication.SocialAuthentication', ), }

И установите бэкэнды аутентификации. Добавьте facebook и любой другой бэкэнд социальной аутентификации, который вам нужен.

AUTHENTICATION_BACKENDS = ( 'social.backends.facebook.FacebookAppOAuth2', 'social.backends.facebook.FacebookOAuth2', 'rest_framework_social_oauth2.backends.DjangoOAuth2', 'django.contrib.auth.backends.ModelBackend', ) PROPRIETARY_BACKEND_NAME = 'Facebook' SOCIAL_AUTH_FACEBOOK_SECRET = 'blablabla'

  1. На ваш взгляд, добавьте следующего декоратора. Это будет вызываться при каждом запросе, требующем аутентификации. Не забудьте также добавить permission_classes = (IsAuthenticated,) к представлениям, которые необходимо защитить.

`from social.apps.django_app.utils import load_backend, load_strategy, psa from social.apps.django_app.views import _do_login from rest_framework.permissions import IsAuthenticated

@psa('social:complete')
def auth_by_fb_token(request, backend):
    token = request.GET.get('access_token')
    user = request.backend.do_auth(token)
    if user:
        return user

Таким образом, токен доступа, который вы передаете API, будет использоваться для аутентификации и создания пользователя в вашем бэкэнде. Перенаправление на страницу аутентификации, например facebook, выполняется из внешнего интерфейса, поскольку ваш сервер является api.

person Jack Wachira    schedule 25.09.2016