django-rest-auth + django-allauth + angular2

Question

我正在尝试在我的 Web 应用程序中设置社交注册（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）授权页面？

Answer 1

查看python-social-auth。它是 django-allauth 的替代品，但更易于使用。根据您的问题，为了启用 facebook 登录，您需要从 angular2 向 facebook api 发出的请求中捕获访问令牌并将其传递给您的后端。对于您的 django 后端，使用django-rest-framework实现一个 api 。您可以按照以下步骤进行操作：

1. 在facebook 开发者页面注册您的应用程序。在设置中，将应用程序域留空并将站点 url 设置为http://localhost:8000。设置成功后，获取app secret和app id。稍后您将使用它。

2. 在您的 angular2 应用 index.html 文件中，将以下脚本添加到您的正文中。

<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>

3. npm install ng2-facebook-sdk并在您的组件的构造函数中初始化 sdk

`从'ng2-facebook-sdk/dist'导入{FacebookService，FacebookLoginResponse，FacebookInitParams}；

@Component(...)
export class MyComponent {
  constructor(private fb: FacebookService) {
    let fbParams: FacebookInitParams = {
                                   appId: '123456789',
                                   xfbml: true,
                                   version: 'v2.6'
                                   };
    this.fb.init(fbParams);
  }
}

4. 添加登录功能

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) ); }

5. 然后在您向后端发出的每个请求中，在标头中包含访问令牌。这将在您的后端验证用户。如果用户不存在，他将被创建。例如 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());

6. 在您的 django 后端， 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'

7. 在您的视图中添加以下装饰器。这将在每个需要身份验证的请求上调用。一定还要添加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。