I'm a beginner and I'm trying to integrate the facebook sdk into my custom login form to allow users to log in via social. I think I'm at a good point, the code responds perfectly to the commands but I have a problem.
First of all I'm using google chrome to do various tests. When I click on login with facebook I get the dialog with the message: Sorry, the application you are trying to use does not exist or has been disabled. In fact, I deleted the old facebook login app some time ago. But now I have a new one and I've included it in my project.
When the social login dialog opens, in the address bar I get: https://www.facebook.com/login.php?skip_api_login=1&api_key=My_old_key_xxx
Why do I still get old api_key ? I have tried with firefox and this is not happening, in fact, the app works fine and login as expected. I thought it was a cache problem, so I cleared the cache and cookies but the problem persists.
I hope someone can shed some light on this, I appreciate any help.
I leave my Javascript and php code below, I'm working with wordpress and what you see below is a plugin I created especially for my project.
// Facebook SDK
window.fbAsyncInit = function() {
FB.init({
appId : 'MY_NEW_APP_ID', //of course i set it up with my facebook app id
cookie : true,
xfbml : true,
version : 'v15.0'
});
};
PHP Code
// Actions Plugin
add_action( 'wp_ajax_login', 'login_handler' );
add_action( 'wp_ajax_nopriv_login', 'login_handler' );
add_action( 'wp_ajax_facebook_login', 'facebook_login_handler' );
add_action( 'wp_ajax_nopriv_facebook_login', 'facebook_login_handler' );
add_action( 'wp_ajax_google_login', 'google_login_handler' );
add_action( 'wp_ajax_nopriv_google_login', 'google_login_handler' );
// Shortcodes
add_shortcode('login_form', 'render_login_form');
// LOGIN FORM FUNCTIONS
// Render login-form temlate inside shortcode
function render_login_form(){
if ( is_user_logged_in() ) {
return __( 'You are already signed in.' );
} else {
$template = require( plugin_dir_path( __FILE__ ) . 'templates/login-form.php' );
}
}
// Ajax action handler for login-form.php
function login_handler() {
$recaptcha_response = $_POST['recaptcha_response'];
$recaptcha_url = 'https://www.google.com/recaptcha/api/siteverify';
$recaptcha_secret = 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx';
$recaptcha_data = array(
'secret' => $recaptcha_secret,
'response' => $recaptcha_response
);
$recaptcha_options = array(
'http' => array (
'method' => 'POST',
'content' => http_build_query($recaptcha_data)
)
);
$recaptcha_context = stream_context_create($recaptcha_options);
$recaptcha_verify = file_get_contents($recaptcha_url, false, $recaptcha_context);
$recaptcha_response = json_decode($recaptcha_verify);
if(!$recaptcha_response->success) {
wp_send_json_error( array('message' => __( 'Invalid reCAPTCHA.', 'text-domain' ) ) );
}
if ( !wp_verify_nonce( $_POST['nonce'], 'login-form-nonce' ) ){
wp_send_json_error( array('message' => __( 'Invalid security token.', 'text-domain' ) ) );
}
// rest of the login code
$creds = array();
$creds['user_login'] = $_POST['username'];
$creds['user_password'] = $_POST['password'];
$creds['remember'] = $_POST['remember'];
$user = wp_signon( $creds, false );
if ( is_wp_error($user) ){
wp_send_json_error( array('message' => __( 'Invalid username or password.', 'text-domain' ) ) );
} else{
wp_send_json_success();
}
wp_die();
}
//** Facebook Login AJAX Handler **/
function facebook_login_handler() {
// Verify ID token
$facebook_id = $_POST['facebook_id'];
$access_token = $_POST['access_token'];
$email = $_POST['email'];
$username = $_POST['username'];
$response = wp_remote_get( 'https://graph.facebook.com/v3.3/' . $facebook_id . '?access_token=' . $access_token );
$facebook_response = json_decode( wp_remote_retrieve_body( $response ), true );
if ( ! isset( $facebook_response['id'] ) ) {
$response = array(
'success' => false,
'message' => 'Invalid Facebook ID token'
);
echo json_encode( $response );
wp_die();
}
// Check if the user already exists in our database
$user = get_user_by( 'email', $email );
if ( ! $user ) {
$user = get_user_by( 'login', $username );
}
if ( $user ) {
// Update user meta with Facebook ID
update_user_meta( $user->ID, 'facebook_id', $facebook_id );
// Log the user in
wp_set_current_user( $user->ID );
wp_set_auth_cookie( $user->ID );
$response = array(
'success' => true,
'message' => 'Login successful'
);
} else {
// If the user does not exist, create a new account
$user_data = array(
'user_login' => $username,
'user_email' => $email,
'user_pass' => wp_generate_password()
);
$user_id = wp_insert_user( $user_data );
if ( is_wp_error( $user_id ) ) {
$response = array(
'success' => false,
'message' => $user_id->get_error_message()
);
echo json_encode( $response );
wp_die();
} else {
update_user_meta( $user_id, 'facebook_id', $facebook_id );
wp_set_current_user( $user_id );
wp_set_auth_cookie( $user_id );
$response = array(
'success' => true,
'message' => 'Registration and login successful'
);
}
}
echo json_encode( $response );
wp_die();
}
// Google Login AJAX Handler
function google_login_handler() {
$id_token = $_POST['id_token'];
$response = wp_remote_get( 'https://oauth2.googleapis.com/tokeninfo?id_token=' . $id_token );
$google_response = json_decode( wp_remote_retrieve_body( $response ), true );
if ( ! isset( $google_response['sub'] ) ) {
$response = array(
'success' => false,
'message' => 'Invalid Google ID token'
);
echo json_encode( $response );
wp_die();
}
// Check if the user already exists in our database
$user = get_user_by( 'email', $google_response['email'] );
if ( $user ) {
// Update user meta with Google ID
update_user_meta( $user->ID, 'google_id', $google_response['sub'] );
// Log the user in
wp_set_current_user( $user->ID );
wp_set_auth_cookie( $user->ID );
$response = array(
'success' => true,
'message' => 'Login successful'
);
} else {
// If the user does not exist, create a new account
$user_data = array(
'user_login' => $google_response['email'],
'user_email' => $google_response['email'],
'user_pass' => wp_generate_password()
);
$user_id = wp_insert_user( $user_data );
if ( is_wp_error( $user_id ) ) {
$response = array(
'success' => false,
'message' => $user_id->get_error_message()
);
} else {
update_user_meta( $user_id, 'google_id', $google_response['sub'] );
wp_set_current_user( $user_id );
wp_set_auth_cookie( $user_id );
$response = array(
'success' => true,
'message' => 'Registration and login successful'
);
}
}
echo json_encode( $response );
wp_die();
}
Javascript and Html Form
<script src="https://www.google.com/recaptcha/api.js"></script>
<script async defer src="https://connect.facebook.net/en_US/sdk.js"></script>
<script src="https://apis.google.com/js/platform.js"></script>
<!-- <div class="social-login">
<button class="facebook-login">Login con Facebook</button>
<button class="google-login">Login con Google</button>
</div> -->
<form id="login-form" method="post">
<label for="username">Username o Email:</label>
<input type="text" id="username" name="username" required>
<label for="password">Password:</label>
<input type="password" id="password" name="password" required>
<label for="remember">Ricordami</label>
<input type="checkbox" id="remember" name="remember">
<div class="g-recaptcha" data-sitekey="xxxxxxxxxxxxxxxxxxxxxxxx"></div>
<div id="login-form-message"></div>
<button type="submit">Accedi</button>
<div id="facebook-login-button"></div>
<div id="google-login-button"></div>
</form>
<script>
// Manage Login Form
jQuery(document).ready(function($) {
$('#login-form').submit(function(e) {
e.preventDefault(); // stop the form from submitting the normal way
// Add Regex Data validation for input fields email, username and password
// Add escape with "encodeURIComponent".
var form = $(this);
var username = encodeURIComponent(form.find('#username').val());
var email = encodeURIComponent(form.find('#email').val());
var regex = /^[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,}$|^[A-Za-z0-9._-]+$/;
var isValid = regex.test(username) || regex.test(email);
// Error Message if Wrong email or password
if (!isValid) {
$('#login-form-message').html("Username o email non validi");
return;
}
// Google ReCaptcha Verification
var recaptcha_response = grecaptcha.getResponse();
if(recaptcha_response.length == 0) {
$('#login-form-message').html("Per favore completa il recaptcha");
return;
}
// Data Object
var data = {
'action': 'login',
'username': username,
'password': encodeURIComponent(form.find('#password').val()),
'remember': encodeURIComponent(form.find('#remember').val()),
'nonce': encodeURIComponent(form.find('input[name="nonce"]').val()),
'recaptcha_response': recaptcha_response
};
$.ajax({
type: 'POST',
url: '<?php echo admin_url( 'admin-ajax.php' ); ?>',
data: data,
success: function(response) {
if (response.success) {
location.reload();
} else {
$('#login-form-message').html(response.data.message);
}
}
});
});
/* Manage Social Login Script */
// Facebook SDK
window.fbAsyncInit = function() {
FB.init({
appId : 'MY_NEW_APP_ID', //of course i set it up with my facebook app id
cookie : true,
xfbml : true,
version : 'v15.0'
});
};
// Render Facebook Login button
FB.getLoginStatus(function(response) {
if (response.status === 'connected') {
// Utente già connesso, mostra bottone di logout
document.getElementById('facebook-login-button').innerHTML = '<button id="facebook-logout-button">Logout</button>';
document.getElementById('facebook-logout-button').addEventListener('click', function() {
FB.logout(function(response) {
location.reload();
});
});
} else {
// Utente non connesso, mostra bottone di login
document.getElementById('facebook-login-button').innerHTML = '<button id="facebook-login-button-real">Login with Facebook</button>';
document.getElementById('facebook-login-button-real').addEventListener('click', function() {
FB.login(function(response) {
if (response.authResponse) {
FB.api('/me', {fields: 'name,email'}, function(response) {
var data = {
'action': 'facebook_login',
'facebook_id': response.id,
'access_token': FB.getAuthResponse().accessToken,
'email': response.email,
'username': response.name
};
jQuery.post('<?php echo admin_url( 'admin-ajax.php' ); ?>', data, function(response) {
if (response.success) {
location.reload();
} else {
document.getElementById('login-form-message').innerHTML = response.message;
}
});
});
} else {
document.getElementById('login-form-message').innerHTML = 'User cancelled login or did not fully authorize.';
}
}, {scope: 'email'});
});
}
});
(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 = "https://connect.facebook.net/en_US/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
// Google SDK
gapi.load('auth2', function() {
gapi.auth2.init({ client_id: 'YOUR_CLIENT_ID',
scope: 'profile email'
});
// Render Google Login button
var googleLoginButton = document.getElementById('google-login-button');
var googleAuth = gapi.auth2.getAuthInstance();
if (googleAuth.isSignedIn.get()) {
googleLoginButton.innerHTML = '<button id="google-logout-button">Logout</button>';
document.getElementById('google-logout-button').addEventListener('click', function() {
googleAuth.signOut().then(function() {
location.reload();
});
});
} else {
googleLoginButton.innerHTML = '<button id="google-login-button-real">Login with Google</button>';
document.getElementById('google-login-button-real').addEventListener('click', function() {
googleAuth.signIn().then(function(googleUser) {
var id_token = googleUser.getAuthResponse().id_token;
var data = {
'action': 'google_login',
'id_token': id_token
};
jQuery.post('<?php echo admin_url( 'admin-ajax.php' ); ?>', data, function(response) {
if (response.success) {
location.reload();
} else {
document.getElementById('login-form-message').innerHTML = response.message;
}
});
});
});
}
});
});
</script>
