Question

我知道如何使用自定义按钮作为Facebook登录。

现在我想将onlogin事件绑定到自定义按钮，但我不知道该怎么做。

原始代码

<fb:login-button scope="public_profile,email" onlogin="afterLogin();">
</fb:login-button>

<script>
    /* Assume that Facebook SDK loaded asyncronously and initilized */

    function afterLogin() {
        // Do stuff
    }
</script>

我的代码

<button id="cusomized-button" onclick="fbLogin();" onlogin="afterLogin();">
    Customized button
</button>

<script>
    /* Assume that Facebook SDK loaded asynchronously and initialized */

    // Show facebook login modal
    function fbLogin() {
        FB.login(function() {}, {
            scope: 'email,public_profile'
        });
    };

    function afterLogin() {
        // Do stuff
    }
</script>

Answer 1

假设您使用的是Graph API 2.4版，您可以订阅一个名为auth.login的事件，只要登录状态发生变化就会触发该事件。

因此，如果您想对用户登录时做出反应，您可以执行此操作，并在用户登录您的应用后调用名为afterLogin的函数：

FB.Event.subscribe('auth.login', afterLogin);

请注意，Facebook建议所有人都要收听auth.statusChange，否则您的应用程序将无法知道用户是否已注销或取消该应用程序，这将使令牌无效。

以下是使用auth.statusChange的示例，传递给函数的response参数包含响应对象which is detailed here：

FB.Event.subscribe('auth.statusChange', function(response) {
    if(response.status === 'connected') {
    // `connected` means that the user is logged in and that your app is authorized to do requests on the behalf of the user
    afterLogin();
    } else if(response.status === 'not_authorized') {
    // The user is logged in on Facebook, but has not authorized your app
    } else {
    // The user is not logged in on Facebook
    }

});

作为替代方案，FB.login的第一个参数是在用户从Facebook返回后调用的函数，因此您可以执行以下操作：

FB.login(function(response) {
    if (response.authResponse) {
        afterLogin();
    } else {
        // The user cancelled the login or did not authorize your app
    }
}, {
    scope: 'email,public_profile'
});

Answer 2

这是您最初想要的使用TypeError: snapshot.changed is not a function at exports.sendEmailConfirmation.functions.database.ref.onWrite (/user_code/index.js:38:17) at Object.<anonymous> (/user_code/node_modules/firebase-functions/lib/cloud-functions.js:112:27) at next (native) at /user_code/node_modules/firebase-functions/lib/cloud-functions.js:28:71 at __awaiter (/user_code/node_modules/firebase-functions/lib/cloud-functions.js:24:12) at cloudFunction (/user_code/node_modules/firebase-functions/lib/cloud-functions.js:82:36) at /var/tmp/worker/worker.js:758:24 at process._tickDomainCallback (internal/process/next_tick.js:135:7)的替代方法。

您可能需要这样做有一个微妙的原因：

您使用Facebook登录名只是一种登录自己的网站的方式
用户已经连接（以前已连接到FB）
用户未登录您的网站。
您不想仅仅因为某人已“连接”就神奇地登录某人，这不是一种良好的用户体验。
因此，您向他们显示“登录”按钮，然后单击它们即可在本地登录用户（前提是您之前已建立链接）。

在这种情况下，请在按钮代码中执行以下操作。

onlogin()

然后根据您的环境，您需要在代码中的某个位置在onlogin="window.fbOnLogin()"上创建一个函数。我正在使用Angular服务并执行以下操作。这是打字稿，因此，如果您使用的是纯JS，请省略window部分。

<any>

现在，您可以向用户显示按钮（您已经秘密地知道他们是用户，因为constructor() { // Pure JS // window.fbOnLogin = this.onLogin; // Typescript (use lambda to keep 'this') (<any>window).fbOnLogin = () => this.onLogin(); } onLogin() { call_my_server_to_login(token); alert('Thanks for logging in with Facebook'); }事件（或auto.authResponseChange）告诉您他们是FB.getLoginStatus()。

注意：如果您仅单击按钮，则所有事件（包括"connected"）都不会被触发。

一旦他们单击它，FB将立即返回（因为您已经登录并连接）并调用您的函数。然后，您用自己的网站登录用户（您必须进行服务器端查找以确保他们之前已经登录）。如果您不知道该用户是谁，则必须执行“关联用户名”页面之一。

如何将Facebook onlogin事件绑定到自定义按钮？

2 个答案: