Laravel\Socialite 的 Facebook“继续为”按钮答案

【问题标题】：Facebook "Continue as" button with Laravel\SocialiteLaravel\Socialite 的 Facebook“继续为”按钮
【发布时间】：2020-05-13 00:03:41
【问题描述】：

我正在使用Laravel Socialite 进行 Google 和 Facebook 身份验证。然而，不是简单的按钮，像这样：

<a href="{{ route('auth.facebook')}}" class="btn btn-primary">Login with Facebook</a>

我想使用图片中的 Facebook 和 Google 的自定义按钮：

我该怎么做？提前致谢！

P.s:

我添加了这段代码

<div class="fb-login-button" data-size="large" data-button-type="login_with" data-auto-logout-link="false" data-use-continue-as="true"></div>

但是我希望它转到{{ route('auth.facebook')}}

【问题讨论】：

你不能乱用那些按钮；它们是固定的。
这是用于登录 Facebook (docs)。这使用 Facebook 的 JavaScript SDK，因此您将无法使用这种样式的按钮来触发社交名流身份验证流程。

标签： laravel facebook google-authentication laravel-socialite

【解决方案1】：

敲了几个小时的头后，我找到了解决办法。在 FAQs Facebook Docs 中说：

https://developers.facebook.com/docs/facebook-login/web/login-button/ 您可以，但是您仍然需要部分使用 JavaScript SDK。通过单击按钮启动的登录过程完成后，SDK 将可以使用 FB.getLoginStatus() 访问 authResponse 对象。您可以使用此函数将响应对象传递给您的服务器端代码，以完成那里存在的任何注册。

因此，您需要添加此脚本以在从 facebook 成功登录后重定向您：

<script>
    window.fbAsyncInit = function() {
        FB.init({
            appId   : 'YOUR_APP_ID',
            session : SESSION_JSON, //optional
            status  : true,
            cookie  : true,
            xfbml   : true,
            version : 'v9.0',
        });

        // whenever the user logs in, we refresh the page
        FB.Event.subscribe('auth.facebook', function() {
            window.location.reload();
        });


        FB.login(function(response) {
            if (response.authResponse) {
                console.log('Welcome!  Fetching your information.... ');
                window.location = "{{ YOUR_SOCIALITE_FACEBOOK_LOGIN_LINK }}";
            } else {
                console.log('User cancelled login or did not fully authorize.');
            }
        });

    };

</script>

【讨论】：