django-rest-auth + django-allauth + angular2

Posted 2023-02-23

【中文标题】django-rest-auth + django-allauth + angular2

【英文标题】：

【发布时间】：2017-01-31 06:15:30

【问题描述】：

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

【参考方案1】：

查看python-social-auth。它是 django-allauth 的替代品，但更易于使用。根据您的问题，为了启用 facebook 登录，您需要从 angular2 向 facebook api 发出的请求中捕获 access token 并将其传递给您的后端。对于您的 django 后端，实现一个 api使用django-rest-framework。您可以通过以下步骤来解决此问题：

在facebook developers page注册您的应用程序。在设置中，将应用程序域留空并将站点网址设置为http://localhost:8000。设置成功后，获取app secret和app id。稍后您将使用它。

在您的 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>

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

添加登录功能

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

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

在您的 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'

在您的视图中添加以下装饰器。这将在每个需要身份验证的请求上调用。请务必将permission_classes = (IsAuthenticated,) 添加到需要保护的视图中。

` 从 social.apps.django_app.utils 导入 load_backend、load_strategy、psa 从 social.apps.django_app.views 导入 _do_login 从 rest_framework.permissions 导入 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。