json - 如何使用“wp_insert_user”进行 Facebook 登录？

Question

我正在构建一个用户生成的内容共享主题，并且我想创建一个自定义的 Facebook 连接。经过研究，我发现了这段代码。

以下代码将应用程序添加到 Facebook 的用户个人资料中，但不会创建新用户，也不会让他们登录。

这是完整的代码（将在中添加functions.php）。

第 1 步 - 在标题区域初始化 javascript

function fb_head(){
    if( is_user_logged_in() ) 
        return;
    ?>
    <script type="text/javascript">
        window.fbAsyncInit = function(){
            FB.init({
                appId:'APP_ID', 
                status:true, 
                cookie:true, 
                xfbml:true, 
                oauth:true
            });
        };
    </script>
    <div id="fb-root"></div>
    <script type="text/javascript">
        (function() {
            var e = document.createElement('script');
            e.type = 'text/javascript';
            e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
            e.async = true;
            document.getElementById('fb-root').appendChild(e);
        }());
    </script>
    <?php
}
add_action( 'wp_head', 'fb_head' );

第 2 步 - 插入一个用于 facebook 登录的按钮

<button id="facebook_connect">Connect with facebook</button>

第 3 步 - 加载 Jquery 库

function mytheme_enqueue_scripts(){
    wp_enqueue_script( 'jquery' );
}
add_action( 'wp_enqueue_scripts', 'mytheme_enqueue_scripts');

第 4 步 - 为我们创建的按钮添加一个 jQuery on-click 功能

此代码将放置在 wp 页脚部分（在结束 body 标记之前）。

function fb_footer(){
    if( is_user_logged_in()):
        echo "<script type='text/javascript'> jQuery('#facebook_connect').hide(); </script>";
        return;
    endif;
    ?>
    <script type="text/javascript">
        jQuery('#facebook_connect').click(function(){
            FB.login(function(FB_response){
                if( FB_response.status === 'connected' ){
                    fb_intialize(FB_response);
                }
            },
            {scope: 'email'});
        });

        function fb_intialize(FB_response){
            FB.api( 
                '/me', 
                'GET', 
                {'fields':'id,email,username,verified,name'},
                function(FB_userdata){
                    jQuery.ajax({
                        type: 'POST',
                        url: 'AJAXURL',
                        data: {
                            "action": "fb_intialize", 
                            "FB_userdata": FB_userdata, 
                            "FB_response": FB_response
                        },
                        success: function(user){
                            if( user.error ){
                                alert( user.error );
                            }
                            else if( user.loggedin ){
                                window.location.reload();
                            }
                        }
                    });
                }
            );
        };
    </script>
    <?php
}
add_action( 'wp_footer', 'fb_footer' );

第 5 步 - 主要步骤：添加处理函数

function wp_ajax_fb_intialize(){
    @error_reporting( 0 ); // Don't break the JSON result
    header( 'Content-type: application/json' );

    if( !isset( $_REQUEST['FB_response'] ) || !isset( $_REQUEST['FB_userdata'] ))
        die( json_encode( array( 'error' => 'Authonication required.' )));

    $FB_response = $_REQUEST['FB_response'];
    $FB_userdata = $_REQUEST['FB_userdata'];
    $FB_userid = (int) $FB_userdata['id'];

    if( !$FB_userid )
        die( json_encode( array( 'error' => 'Please connect your facebook account.' )));

    global $wpdb;
    $user_ID = $wpdb->get_var( "SELECT user_id FROM $wpdb->usermeta WHERE meta_key = '_fbid' AND meta_value =  '$FB_userid'" );

    if( !$user_ID ){
        $user_email = $FB_userdata['email'];
        $user_ID = $wpdb->get_var( "SELECT ID FROM $wpdb->users WHERE user_email = '$user_email'" );

        if( !$user_ID ){
            if ( !get_option( 'users_can_register' ))
                die( json_encode( array( 'error' => 'Registration is not open at this time. Please come back later..' )));

            extract( $FB_userdata );

            $display_name = $name;
            $user_login = $username;

            if( empty( $verified ) || !$verified )
                die( json_encode( array( 'error' => 'Your facebook account is not verified. You hae to verify your account   before proceed login or registering on this site.' )));

            $user_email = $email;
            if ( empty( $user_email ))
                die( json_encode( array( 'error' => 'Please re-connect your facebook account as we couldnt find your email  address..' )));

            if( empty( $name ))
                die( json_encode( array( 'error' => 'empty_name', 'We didnt find your name. Please complete your facebook   account before proceeding..' )));

            if( empty( $user_login ))
                $user_login = sanitize_title_with_dashes( sanitize_user( $display_name, true ));

            if ( username_exists( $user_login ))
                $user_login = $user_login. time();

            $user_pass = wp_generate_password( 12, false );
            $userdata = compact( 'user_login', 'user_email', 'user_pass', 'display_name' );

            $user_ID = wp_insert_user( $userdata );
            if ( is_wp_error( $user_ID ))
                die( json_encode( array( 'error' => $user_ID->get_error_message())));

            update_user_meta( $user_ID, '_fbid', (int) $id );
        }
        else{
            update_user_meta( $user_ID, '_fbid', (int) $FB_userdata['id'] );
        }
    }

    wp_set_auth_cookie( $user_ID, false, false );
    die( json_encode( array( 'loggedin' => true )));
}
add_action( 'wp_ajax_nopriv_fb_intialize', 'wp_ajax_fb_intialize' );

这就是我添加 Facebook 按钮的方式：

 <button id="facebook_connect">Connect with Facebook</button>

如果有人正在尝试，请更换 App ID。

score 5 · Accepted Answer

感谢您的代码！像魅力一样工作。但是我发现了一件非常重要的安全事情！

在控制台中，我只是在发送 ajax 请求之前更改了 facebook 变量，我可以使用每个人的 fb 帐户登录（如果你知道他们的 facebook id）。接下来的几行还检查 fb 令牌并验证登录是否真的有效！

因此，在您的wp_ajax_fb_initialize函数中，您应该明确添加以下几行：

$FB_response = $_REQUEST['FB_response'];
$FB_userdata = $_REQUEST['FB_userdata'];
$FB_userid = (int) $FB_userdata['id'];

//NEW CODE INSERT - check if token is valid
$token = $FB_response['authResponse']['accessToken'];
$path = 'https://graph.facebook.com/me?access_token='.$token;
$content = @file_get_contents($path);
$fb_user = json_decode($content);
if ($fb_user->id != $FB_userdata['id'])
    die( json_encode( array( 'error' => 'FB login error' )));

我使用了 file_get_contents 但也可以使用 curl

score 4 · Accepted Answer

将ajax url从

url: 'AJAXURL',

至

url: '<?php echo admin_url('admin-ajax.php'); ?>',

我在测试时注意到的一件事是，如果我从 wp_users 表中删除用户，则具有 facebook id 的用户元数据仍然存在，因此您可能需要检查 facebook id 是否与您的 ajax 回调中的无效用户 id 相关联，例如

global $wpdb;
$user_ID = $wpdb->get_var( "SELECT user_id FROM $wpdb->usermeta WHERE meta_key = '_fbid' AND meta_value =  '$FB_userid'" );

// check if the user id is valid
if( false === ($check_user = get_userdata($user_ID)) )
{
  $user_ID = false; // set to false to force create a new user
}

您的其余代码工作正常。

json - 如何使用“wp_insert_user”进行 Facebook 登录？

第 1 步 - 在标题区域初始化 javascript

第 2 步 - 插入一个用于 facebook 登录的按钮

第 3 步 - 加载 Jquery 库

第 4 步 - 为我们创建的按钮添加一个 jQuery on-click 功能

第 5 步 - 主要步骤：添加处理函数

2 回答 2

Related

Reference