I am trying to use Firebase's Facebook authentication on a webpage, but I get this error:
Login failed Error: Invalid authentication credentials provided.
at Error (native)
at http://45.55.203.213/js/firebase.js:160:367
at e (http://45.55.203.213/js/firebase.js:140:400)
Here's my Javascript code:
var ref = new Firebase("https://fantasy-smash-bros.firebaseio.com/");
function FBLogin() {
ref.authWithOAuthPopup("facebook", function(error, authData) {
if (error) {
console.log("Login failed", error);
} else {
loginWithAuthData(authData);
}
});
}
function loginWithAuthData(authData) {
username = authData.facebook.displayName;
avatarURL = authData.facebook.cachedUserProfile.picture.data.url;
userID = authData.facebook.id;
}
function attemptLogin() {
var user = ref.getAuth();
if (user) {
loginWithAuthData(user);
} else {
$("#fb-login").click(function () {
FBLogin();
});
}
}
$(document).ready(function () {
attemptLogin();
});
Note: I have imported firebase.js. Here's a copy of the Javascript I used.
I believe I have setup everything correctly: adding Firebase's callback URL to my Facebook app's whitelist, enabling Facebook authentication on the Firebase app. But I am still stumped on what to do. Any help would be greatly appreciated.
Related
I am trying really hard to make MSAL work with Vanilla JavaScript, but it just doesn't work.
Whenever I am trying to click the Sign In button on the Login Page, the Login page just refreshes and nothing happens, the Microsoft Sign In Page is not being shown.
Also no errors are logged to console.
After clicking the Sign In button for like 200 or more times and page refreshing that many times, the Microsoft Sign In page shows up and then it works fine.
Script reference
<script type="text/javascript" src="https://alcdn.msauth.net/lib/1.4.4/js/msal.js" integrity="sha384-fTmwCjhRA6zShZq8Ow5ZkbWwmgp8En46qW6yWpNEkp37MkV50I/V2wjzlEkQ8eWD" crossorigin="anonymous"></script>
JS MSAL code
//Config
const msalConfig = {
auth: {
clientId: "{Client ID}",
authority: "{Authority}",
redirectUri: "{Base App URL}/Dashboard", //This URL is registered in Microsoft AAD
navigateToLoginRequestUrl: false
},
cache: {
cacheLocation: "localStorage",
storeAuthStateInCookie: true,
}
};
//Login Request Object
const loginRequest = {
scopes: ["User.Read"],
prompt: 'login',
};
//Initialize MSAL
var myMSALObj = new Msal.UserAgentApplication(msalConfig);
myMSALObj.handleRedirectCallback(authRedirectCallBack);
//Handle Callback
function authRedirectCallBack(error, response) {
if (error) {
console.log(error);
} else {
if (response.tokenType === "id_token") {
console.log("id_token acquired at: " + new Date().toString());
if (myMSALObj.getAccount()) {
showWelcomeMessage(myMSALObj.getAccount());
}
} else if (response.tokenType === "access_token") {
console.log("access_token acquired at: " + new Date().toString());
accessToken = response.accessToken;
try {
callMSGraph(graphConfig.graphMailEndpoint, accessToken, updateUI);
} catch (err) {
console.log(err)
}
} else {
console.log("token type is:" + response.tokenType);
}
}
}
$(document).on("click", "#btn-testing-msal", function () {
myMSALObj.loginRedirect(loginRequest);
});
Any help will be appreciated, Thanks in advance
Debug your frontend code like this, just trying to make sure where caused your problem, and it may have some help:
Here is some JS code, related to handling Parse users in a web app, with unexpected behaviour.
......
Parse.initialize(process.env.APP_ID);
Parse.serverURL = process.env.SERVER_URL;
Parse.User.logIn(req.body.usrname, req.body.password, {
success: user => {
console.log("OK-OK:"+user);
checkIfLoggedIn();
res.render('pages/index.ejs', {});
},
error: (user, error) => {
console.log("NG-NG:"+user, error);
checkIfLoggedIn();
res.render('pages/login.ejs', {});
},
});
......
function checkIfLoggedIn() {
var currentUser = Parse.User.current();
if (currentUser) {
console.log("Parse.User.current is A REAL USER -- logged in!!")
} else {
console.log("Parse.User.current is NULL -- login failed!!")
}
}
Now, below is the question.
When running the code above, the messages:
"OK-OK:" and "NG-NG:" both show up in the logs as expected. But the call to the function checkIfLoggedIn() always displays a failure:
Parse.User.current is NULL -- login failed!!
Why is that? Shouldn't it display a success when we reach "OK-OK:"?
I am trying to use token authentication with no success. I am wondering if anyone succeed in doing so, as the official ApiRTC documentation is weak on that topic.
1) I have activated secret key below from - Credentials screen
2) For token validation I have setup a service from API - Token authentication screen
3) I have the below code to create the user agent
function createUserAgent(token) {
ua = new apiRTC.UserAgent({
uri: 'token:' + token
});
ua.register({
id : useragentId
}).then(uaRegistered)
.catch(function (error) {
console.log("Registration error");
});
}
function uaRegistered(session) {
console.log("Registration OK");
}
4) This initializes a request to below address. And it fails with HTTP 401
GET https://cloud.apizee.com/api/v2/checkToken?token=eyJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJhNWQxN2M1ZTVjOWZkYmRiNDJhYTgzMTJlMWQxMmEwYiIsImF1ZCI6ImFwaVJUQyIsImp0aSI6ImE5ZjU4NmNlLTcxMDctNDgxMS04ODYwLTQ5MjY4ODY2NjhiYiIsImlhdCI6MTU1OTg5OTA5MSwiZXhwIjoxNTU5OTAyNjkxLCJncmFudHMiOnsiaWRlbnRpdHkiOiJjbGk5OTQxOTgxNTgifX0.ZfQs_HgUXOWhCAlXB6fTMKhbT-pFslb9MK_JvXu2U5A 401 (Unauthorized)
5) I have also seen that no requests are made to my token validation service.
Thanks
edit: updates according to the answer
function createUserAgent(token) {
apiRTC.setLogLevel(apiRTC.LOG_LEVEL_DEBUG);
var registerInformation = {};
registerInformation.id = useragentId;
registerInformation.token = token;
ua = new apiRTC.UserAgent({
uri: 'apzkey:a5d17c5e5c9fdbdb42aa8312e1d12a0b'
});
$("#sessionStatus").text("Waiting for register response ");
ua.register(registerInformation).then(uaRegistered)
.catch(function (error) {
debugger;
console.log("Registration error");
$("#sessionStatus").text("Failed to register UA");
});
}
function uaRegistered(session) {
debugger;
console.log("Registration OK");
connectedSession = session;
$("#useragentId").text(useragentId);
$("#sessionUsername").text(session.getUsername());
$("#sessionStatus").text("Connected");
debugger;
}
Thanks for pointing this issue in documentation, we have done a first update for using an external validation service here :
https://dev.apirtc.com/authentication/index
On client side, you need to use following code :
registerInformation.token = "myToken"
ua.register(registerInformation).then(function(session) {
// Save session
connectedSession = session;
}).catch(function(error) {
// error
console.error('User agent registration failed', error);
});
the usage of token in uri is for users authentication on Apizee offers
We are trying to integrate the Wizcorp PhoneGap facebook plugin (https://github.com/Wizcorp/phonegap-facebook-plugin) to support the login process in a new Ionic app.
The login with Facebook seems to work just fine for a new user. The problem is when the users sign off and try to log back in he get the error:
Facebook error: Session was closed and not closed normally
what are we doing wrong here ?
Here's the code that we are using right now:
function fbLogin() {
facebookConnectPlugin.login(['email'], function (response) {
alert("Login Successfull");
alert(JSON.stringify(response));
}, function (error) {
alert("Login ERROR");
alert(JSON.stringify(error));
})
}
function getDetails() {
facebookConnectPlugin.getLoginStatus(function (response) {
if (response.status === 'connected') {
alert("You're connected!");
var userID = response.authResponse.userID;
facebookConnectPlugin.api('/' + response.authResponse.userID + '?fields=id,name,picture.width(400).height(400)', [], function (result) {
alert(JSON.stringify(result));
})
} else if (response.status === 'not_authorized') {
alert("Not Autherized!");
} else {
alert("You're not loggin into Facebook!");
}
});
}
function fbLogout() {
facebookConnectPlugin.logout(function (response) {
alert("Logout success");
alert(JSON.stringify(response));
}, function (error) {
alert("Logout ERROR");
alert(JSON.stringify(error));
})
}
We have checked this link:
https://github.com/Wizcorp/phonegap-facebook-plugin/blob/master/TROUBLESHOOTING.md#no-reply-from-login
however when we try to implement the code below - we get an error
Tyeperror cordova.getActivity is not a function
PackageInfo info = cordova.getActivity().getPackageManager().getPackageInfo("com.goapes.golearn", PackageManager.GET_SIGNATURES);
The above link tells us that we need another Hash Key in our Facebook App Dashboard, so is there another way of obtaining this Hash?
I think you better to try this plugin. Because I developed a app using this plugin and it's in production now. :)
here check this
I am making an angularJS application, and I plan to use Firebase for simple authentication.
My index.html file includes
<script src="https://cdn.firebase.com/js/simple-login/1.6.2/firebase-simple-login.js"></script>
<script src="scripts/login.js"></script>
My login.js looks like this at the moment:
$(document).ready(function(){
var myRef = new Firebase("https://my_app.firebaseio.com");
var auth = new FirebaseSimpleLogin(myRef, function(error, user) {
if (error) {
// an error occurred while attempting login
console.log(error);
} else if (user) {
// user authenticated with Firebase
console.log("User ID: " + user.uid + ", Provider: " + user.provider);
} else {
// user is logged out
}
});
var authRef = new Firebase("https://my_app.firebaseio.com/.info/authenticated");
authRef.on("value", function(snap) {
if (snap.val() === true) {
alert("authenticated");
} else {
alert("not authenticated");
}
});
auth.login('password', {
email: 'user#host.com',
password: 'password',
});
console.log(auth);
});
All I really want to do with this is test whether I can log in, and what the auth object will look like after a login.
Later, I will integrate the login into a ng-model to pass the data that way rather than just passing it hard coded.
The problem right now is that this code doesn't even run, I get an error back from the javascript console:
Uncaught ReferenceError: Firebase is not defined
Why is this happening?
It seems you haven't included the firebase.js script.
Only the firebase-simple-login.js isn't enough, it require firebase.js.
<script src="https://cdn.firebase.com/js/client/1.0.17/firebase.js"></script>
<script src="https://cdn.firebase.com/js/simple-login/1.6.2/firebase-simple-login.js"></script>
<script src="scripts/login.js"></script>