查看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。