javascript - 调试 AllAuth : social account not logging user in despite connecting successfully

Question

单击登录表单中的 facebook 登录按钮会正确显示 fb 登录弹出窗口，但在输入凭据后弹出窗口关闭并且没有任何反应。

在不重新加载页面的情况下再次单击按钮确认 fb 帐户已连接，因为浏览器控制台打印:

FB.login() called when user is already connected.

然而，用户数据库中没有新条目出现，用户没有被重定向，也没有登录。所以问题似乎出在 AllAuth 处理事情的方式上。但是在后端的任何地方都没有出现任何调试信息，这使得这有点难以弄清楚。

这是 allauth 设置:

LOGIN_REDIRECT_URL = '/'
LOGOUT_REDIRECT_URL = '/'
DEFAULT_FROM_EMAIL = "[removed for stackoverflow]"

ACCOUNT_EMAIL_REQUIRED = True
SOCIALACCOUNT_EMAIL_REQUIRED = True
ACCOUNT_UNIQUE_EMAIL = True
ACCOUNT_EMAIL_VERIFICATION = 'mandatory'
SOCIALACCOUNT_EMAIL_VERIFICATION = "mandatory"

SOCIALACCOUNT_QUERY_EMAIL = True
SOCIALACCOUNT_PROVIDERS = \
    {'facebook':
       {'METHOD': 'oauth2',
        'SCOPE': ['email','public_profile', 'user_friends'],
        'AUTH_PARAMS': {'auth_type': 'reauthenticate'},
        'FIELDS': [
            'id',
            'email',
            'name',
            'first_name',
            'last_name',
            'verified',
            'locale',
            'timezone',
            'link',
            'updated_time'],
        'EXCHANGE_TOKEN': True,
        'VERIFIED_EMAIL': False,
        'VERSION': 'v2.4'}}

这是登录页面上的js:

<script>
  window.fbAsyncInit = function() {
    FB.init({
      appId      : '[removed for stackoverflow]',
      xfbml      : true,
      version    : 'v2.10'
    });
    FB.AppEvents.logPageView();
  };

  (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_US/sdk.js";
     fjs.parentNode.insertBefore(js, fjs);
   }(document, 'script', 'facebook-jssdk'));
</script>

Answer 1

Django-allauth Facebook 登录

首先，安装django-allauth

$(venv) pip3 install django-allauth

现在将这些代码放在您安装的应用程序中的 settings.py 中

'django.contrib.sites',
'allauth',
'allauth.account',
'allauth.socialaccount',
'allauth.socialaccount.providers.facebook',

此外，将代码放在您的 settings.py 中

AUTHENTICATION_BACKENDS = (
    'allauth.account.auth_backends.AuthenticationBackend',
    'django.contrib.auth.backends.ModelBackend',
)

也把这些放在settings.py中

SOCIALACCOUNT_PROVIDERS = \
    {'facebook':
       {'METHOD': 'oauth2',
        'SCOPE': ['email','public_profile', 'user_friends'],
        'AUTH_PARAMS': {'auth_type': 'reauthenticate'},
        'FIELDS': [
            'id',
            'email',
            'name',
            'first_name',
            'last_name',
            'verified',
            'locale',
            'timezone',
            'link',
            'gender',
            'updated_time'],
        'EXCHANGE_TOKEN': True,
        'LOCALE_FUNC': lambda request: 'kr_KR',
        'VERIFIED_EMAIL': False,
        'VERSION': 'v2.4'}}

ID and Key can be found at https://developers.facebook.com/ create an app and go to DashBoard, you’ll see your’s

#facebook
SOCIAL_AUTH_FACEBOOK_KEY = 'secret!'  # App ID
SOCIAL_AUTH_FACEBOOK_SECRET ='secret!' #app key

你可能想添加这个

LOGIN_REDIRECT_URL = "/" 
#if you succeed in login, you'll be redirected to the main page.

现在我们需要修改urls.py 将这段代码添加到你的urlpatterens

url(r'^accounts/',include('allauth.urls')),

Now go back to https://developers.facebook.com/ go to settings ,click “Add platform”, click website, put http://localhost:8000/ and click the quick start button. keep going and do what dev.facebook leads to.

现在你需要在settings.py中设置你的站点id

#site id
SITE_ID = <your local host site id> #i.e http://localhost:8000
# for the dev mode, you need to use localhost's id facebook does not support the name 127.0.0.1:8000
#little options for your page's signup.
ACCOUNT_EMAIL_REQUIRED=True

我们需要在我们的 django 管理中注册我们的站点 ID 和社交应用程序先做migration & runserver

$(venv) python3 manage.py migrate

转到http://localhost:8000/admin/然后点击站点 ID将 example.com 更改为 http://localhost:8000 (如果您已经处于生产级别，您可能只使用页面的 IP 或域。)

保存应用程序后，我们就可以使用 facebook 登录了。将这些模板标签放在您希望用户登录的 html 顶部。

{% load socialaccount %}
{% providers_media_js %}

你可以在你想做登录按钮的地方写下这个确切的位置

<a href="{% provider_login_url "facebook" method="js_sdk" %}">Login Button image</a>

这会将您的请求发送到处理您的登录程序的帐户/登录页面。

Reference: https://medium.com/@jinkwon711/django-allauth-facebook-login-b536444cbc6b