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オンクリック関数を追加します

このコードは、wpフッターセクション（終了ボディタグの前）に配置されます。

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>

誰かがそれを試している場合は、アプリIDを置き換えてください。

score 5 · Accepted Answer

コードをありがとう！チャームのように働いた。しかし、私が発見した本当に重要なセキュリティの問題が1つあります。

コンソールでは、ajaxリクエストを送信する前にFacebook変数を変更しただけで、全員のfbアカウントでログインできました（Facebook IDを知っている場合）。次の数行もfbトークンをチェックし、ログインが本当に有効かどうかを検証します。

したがって、wp_ajax_fb_intialize関数では、次の2行を明確に追加する必要があります。

$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のユーザーメタがまだ存在するため、FacebookIDが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オンクリック関数を追加します

ステップ5-メインステップ：ハンドラー関数を追加する

2 に答える 2

Related

Reference