Scenario:
Ensure not currently logged into Facebook
Navigate to webapp on localhost
Click "login" and it properly takes you to the Facebook login screen without using a pop-up
Login using valid credentials
Automatically redirect back to localhost
Doesn't appear to be logged in and auth.user is null
Click login again and the request is cancelled automatically by firebase
Navigate to facebook (and may need to refresh) and you are logged in, so the login did "work"
If you use preferRedirect:false the entire scenario works as expected
Versions:
angular and angular-route: 1.3.0-b14
firebase, firebase-simple-login, and angularfire: 1.0.17
Code snippets
/* html snippet */
<div id="login">
<span ng-show="auth.user">
{{auth.user.id}} | Logout
</span>
Login
</div>
/* javascript snippet */
angular.module('<removed_for_this_post>', ['ngRoute', 'firebase'])
.value('firebaseURL', 'https://<removed_for_this_post>.firebaseio.com/')
.factory('FirebaseData', function(firebaseURL) {
return (new Firebase(firebaseURL));
})
.config(function($routeProvider) {
$routeProvider
.when('/', {
controller:'HomeCtrl',
templateUrl:'home.html'
})
.otherwise({
redirectTo:'/'
});
})
.controller('HomeCtrl', function($scope, $firebase, FirebaseData, $firebaseSimpleLogin) {
var ref = new Firebase("https://<removed_for_this_post>.firebaseio.com/");
$scope.auth = $firebaseSimpleLogin(ref);
/* Login using facebook */
$scope.facebookLogin = function() {
$scope.auth.login('facebook', {
rememberMe: true,
preferRedirect: true
});
};
/* Logout using facebook */
$scope.facebookLogout = function() {
$scope.auth.$logout();
};
});
Any thoughts on what I am doing wrong here?
Thanks!
Related
I have used the official button for Google SignIn:
SignIn Page:
<div class="g-signin2" data-onsuccess="AuthenticateGoogleUser"></div>
function AuthenticateGoogleUser(googleUser){
.....
capture the user info and redirect to Home page
.....
}
When configuring for the credentials, I have set the redirection URL to the signin page.
This is how the Signout happens for the app:
function SignOutGoogleUser() {
if (gapi != null && gapi != undefined &&
gapi.auth2 != null && gapi.auth2 != undefined) {
var auth2 = gapi.auth2.getAuthInstance();
auth2.signOut().then(function () {
auth2.disconnect();
....Redirect to Home page...
});
}
}
The methods work fine. If I signout, will be redirected to home page.
But, when I manually browse the SignIn page after signout, the AuthenticateGoogleUser method is triggered and I am auto signed into the app (with google account).
The AuthenticateGoogleUser method should be only triggered on the button click. Is that right.
But here it is being triggered on load of SignIn page. Is that expected. Can this be stopped.
I'm using MVC C# as backend.
Without seeing all of your code, I am working on the assumption that you have not placed the function in a document ready wrapper and made sure to only kick it off on a button click or other event from which you would like to have it fire. As it stands now, it will fire on that page load.
$(document).ready(function(){
$("btnLogin").click(function(){
AuthenticateGoogleUser(googleUser);
});
});
navbar.template.html
<div id="g_id_onload"
data-client_id="832#################m921.apps.googleusercontent.com"
data-cancel_on_tap_outside="false"
data-login_uri="http://localhost:3010/auth/g-one-tap"
data-callback="handleCredentialResponse">
</div>
The API get the response I am able to validate the user and return the validated JWT token, how can I capture the response and avoid the redirection of the page to http://localhost:3010/auth/g-one-tap
How can I us some click function to be used in typsecript file which can help in following the normal login flow which I am using earlier with google login button.
public socialSignIn(responseData) {
this.googleSubscription = this._globalService.googleLogin(responseData)
.subscribe(
data => {
if (data['success']) {
const token = data['data']['token'];
if (this.platformId === 'browser') {
// login to save the token
}
}
},
error => {
console.log('error');
}
);
}
As mentioned here, you should not use both data-login_uri and data-callbck attributes at the same time.
You need to remove the data-login_uri attribute in you code.
And povide an implementation for the callback function (whose name is handleCredentialResponse in your code) if not yet.
In my website, I have a button for "facebook connect", which when clicked on, triggers the following code:
<script type="text/javascript">
$(document).ready(function(){
console.log(<?=(isLoggedIn()+0)?>);
$("#fbconnect").click( function(){
FB.login(function(response) {
alert(JSON.stringify(response.authResponse));
if (response.authResponse) {
window.location = window.location;
alert('Welcome! Fetching your information.... ');
} else {
alert('User cancelled login or did not fully authorize.');
}
}, {scope: 'email,user_likes'});
} );
});
</script>
The button works well: it shows the facebook login dialog, and then alerts the appropriate message. However, when I refresh the page, the user is still logged out both server-side and client-side. Do I need to handle the access token and cookies myself or does the javascript SDK take care of that? If the latter, then why doesn't this code work?
Thank you.
UPDATE 1:
It works perfectly on localhost with Firefox, and on the server with all browsers. So the problem exists only for chrome and on localhost. Is there some chrome security setting that prevents cookies from being saved for localhost?
I trye to use Facebook JS SDK and I fell on a problem.
I want that after the page load, the user click on the FB button, and then,
if he is already logged I change location,
if not,
it trigger the fb loggin popup
here is my code "
window.fbAsyncInit = function() {
// init the FB JS SDK
FB.init({
appId : '<?php echo $action->appId; ?>', // App ID from the app dashboard
status : true, // Check Facebook Login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // Look for social plugins on the page
});
FB.Event.subscribe('auth.authResponseChange', function(response) {
if (response.status === 'connected') {
$(location).attr('href','nexPage.php');
} else if (response.status === 'not_authorized') {
FB.login();
} else {
FB.login();
}
});
My problem come with the fact that the facebook authResponseChange trigger onload so if the user is already logged and just arrive on the page he is directly send to the next page, and I don't want that !
I want the user to see the page first, click, then login/or not and go to the next page
Does somebody have an idea how to do that ?
(and no click event possible cause after the user logged, FB reload the page)
found !
put the status to false
FB.init({
appId : '<?php echo $action->appId; ?>', // App ID from the app dashboard
status : false, // Check Facebook Login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // Look for social plugins on the page
});
Sorry for disturb
I was trying to integrate facebook login feature in my sencha touch 2 application and I found the instructions on debvelopers.facebook.com. I was able to integrate the feature using that but the login window opens as a popup. Is there a way to make that login window open in the same tab and not as a popup.
here is my code for index.html
<script src="//connect.facebook.net/en_US/all.js"></script>
<script>
window.fbAsyncInit = function() {
console.log("FB.init")
FB.init({
appId : '***************', // App ID
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
});
(function(d){
var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
if (d.getElementById(id)) {return;}
js = d.createElement('script'); js.id = id; js.async = true;
js.src = "//connect.facebook.net/en_US/all.js";
ref.parentNode.insertBefore(js, ref);
}(document));
}
</script>
this is the part of the code I used in aap.js which I got from debvelopers.facebook.com
FB.Event.subscribe('auth.authResponseChange', function(response) {
// Here we specify what we do with the response anytime this event occurs.
if (response.status === 'connected') {
// The response object is returned with a status field that lets the app know the current
// login status of the person. In this case, we're handling the situation where they
// have logged in to the app.
} else if (response.status === 'not_authorized') {
// In this case, the person is logged into Facebook, but not into the app, so we call
// FB.login() to prompt them to do so.
// In real-life usage, you wouldn't want to immediately prompt someone to login
// like this, for two reasons:
// (1) JavaScript created popup windows are blocked by most browsers unless they
// result from direct interaction from people using the app (such as a mouse click)
// (2) it is a bad experience to be continually prompted to login upon page load.
} else {
// In this case, the person is not logged into Facebook, so we call the login()
// function to prompt them to do so. Note that at this stage there is no indication
// of whether they are logged into the app. If they aren't then they'll see the Login
// dialog right after they log in to Facebook.
// The same caveats as above apply to the FB.login() call here.
}
});