angular - 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/ ，表单所需的数据是“访问 token ”和“代码”。但是要设置这些数据，我必须从 facebook 授权页面获取它们。我对吗？我该怎么做？如何将用户重定向到社交(facebook、google、twitter)授权页面？

Answer 1

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

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

2. 在您的 angular2 app 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>

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

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. 然后在您向后端发出的每个请求中，在 header 中包含访问 token 。这将在您的后端对用户进行身份验证。如果用户不存在，他将被创建。例如 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 后端，pip install django-rest-framework-social-oauth2 并将它们添加到您在 settings.py 中安装的应用程序。 ojit_代码

   将其添加到restframework的认证类中


INSTALLED_APPS = (
...
'oauth2_provider',
'social.apps.django_app.default',
'rest_framework_social_oauth2',)

并设置身份验证后端。添加 Facebook 和您需要的任何其他社交身份验证后端。

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

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

` 来自 social.apps.django_app.utils import 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 的访问 token 将用于在您的后端进行身份验证和创建用户。重定向到身份验证页面，例如 facebook 是从前端完成的，因为您的后端是一个 api。