Closed shahriar closed 6 years ago
Hi, @shahriar From which server the error comes, quickblox or firebase?
@Vladlukhanin It's from quickblox. Firebase login working great. It fails when I try to login Quickblox with firebase access_token.
https://quickblox.com/developers/Sample-users-javascript#Signing_In_with_Firebase_phone
Did you try this on our shared server (api.quickblox.com)?
You use cordova-plugin-firebase?
No, I didn't try shared server. Just used quickblox js sdk.
Yes, I used that plugin to verifyPhoneNumber. To install the plugin
cordova plugin add https://github.com/arnesson/cordova-plugin-firebase --save
As I found verifyPhoneNumber is unavailable when I use
cordova plugin add cordova-plugin-firebase
Your environment - macOS Sierra 10.12.6 , Google Chrome Version 61.0.3163.100 (Official Build) (64-bit)... did your read about this plugin - https://github.com/arnesson/cordova-plugin-firebase#verifyphonenumber-android-only ? As I see - This will only works on physical devices (Android only)
Sorry. My mistake. I had to mention that. Yes. I am testing on real device and inspecting using google chrome.
I think quickblox sdk using api.quickblox.com
I tryed to loging by phone number on api.quickblox.com and everything worked fine. I hope you will do well.
@Vladlukhanin Great! Can you share the quickblox login part?
Open Firebase Console and create a new application if you need.
Install the Firebase SDK or just paste the code snippet into your application HTML:
<script src="https://www.gstatic.com/firebasejs/4.5.0/firebase.js"></script>
Initialize the Firebase SDK:
var firebaseConfig = {
apiKey: '<API_KEY>',
authDomain: '<PROJECT_ID>.firebaseapp.com',
databaseURL: 'https://<DATABASE_NAME>.firebaseio.com',
projectId: '<PROJECT_ID>',
storageBucket: '<BUCKET>.appspot.com',
messagingSenderId: '<SENDER_ID>'
};
firebase.initializeApp(firebaseConfig);
### FirebaseUI Widget
[FirebaseUI](https://github.com/firebase/firebaseui-web#firebaseui-for-web--auth) widget can be used for help:
````html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Sample FirebaseUI App</title>
<script src="https://cdn.firebase.com/libs/firebaseui/2.4.0/firebaseui.js"></script>
<link type="text/css" rel="stylesheet" href="https://cdn.firebase.com/libs/firebaseui/2.4.0/firebaseui.css" />
<script type="text/javascript">
// FirebaseUI config.
var uiConfig = {
signInOptions: [{
provider: firebase.auth.PhoneAuthProvider.PROVIDER_ID,
recaptchaParameters: {
type: 'image', // 'audio'
size: 'normal', // 'invisible' or 'compact'
badge: 'bottomleft' //' bottomright' or 'inline' applies to invisible.
}
}],
// Terms of service url.
tosUrl: '<your-tos-url>'
};
// Initialize the FirebaseUI Widget using Firebase.
var ui = new firebaseui.auth.AuthUI(firebase.auth());
// The start method will wait until the DOM is loaded.
ui.start('#firebaseui-auth-container', uiConfig);
initApp = function() {
firebase.auth().onAuthStateChanged(function(user) {
user.getIdToken().then(function(idToken) {
var authParams = {
'provider': 'firebase_phone',
'firebase_phone': {
'access_token': idToken,
'project_id': firebaseConfig.projectId
}
};
// Create session and then login user to it
QB.createSession(function(error, result) {
if (result) {
QB.login(authParams, function(err, res) {
// callback function
});
}
});
});
});
};
window.addEventListener('load', function() {
initApp();
});
</script>
</head>
<body>
<div id="firebaseui-auth-container"></div>
</body>
</html>
Add the simple HTML code snippet:
...
<form class="firebase_form_SMS">
<input id="firebase_input_SMS" placeholder="Phone number" />
<div id="recaptcha_container"></div>
<button id="firebase_btn_sendSMS">Send</button>
</form>
<form class="firebase_form_code">
<input id="firebase_input_code" placeholder="Code" />
<button id="firebase_btn_sendCode">Login</button>
</form>
...
Set up the reCAPTCHA verifier (source from Firebase Docs to read more):
window.recaptchaVerifier = new firebase.auth.RecaptchaVerifier('recaptcha-container');
Send a verification code to the user's phone (source from Firebase Docs):
var phoneNumber = document.getElementById('firebase_input_SMS');
var appVerifier = window.recaptchaVerifier;
document.getElementById('firebase_form_SMS').addEventListener('submit', function() { firebase.auth().signInWithPhoneNumber(phoneNumber, appVerifier) .then(function (confirmationResult) { window.confirmationResult = confirmationResult; }).catch(function (error) { // SMS not sent }); });
4. Sign in the user with the verification code ([source from Firebase Docs](https://firebase.google.com/docs/auth/web/phone-auth#sign-in-the-user-with-the-verification-code)):
````javascript
var code = document.getElementById('firebase_input_code');
document.getElementById('firebase_form_code').addEventListener('submit', function() {
window.confirmationResult.confirm(code)
.then(function (result) {
// user signed in successfully.
result.user.getIdToken().then(function(idToken) {
var authParams = {
'provider': 'firebase_phone',
'firebase_phone': {
'access_token': idToken,
'project_id': firebaseConfig.projectId
}
};
// Create session and then login user to it
QB.createSession(function(error, result) {
if (result) {
QB.login(authParams, function(err, res) {
// callback function
});
}
});
}).catch(function (error) {
// user couldn't sign in (bad verification code?)
});
});
});
Thanks. Have you didn't tested on real device? Last time I tried recaptcha requires running web domain which is not available on mobile devices. recaptcha works on browser.
Thanks a lot. It worked.
Our team haven't tried it with cordova/phonegap yet. Maybe a little later
Help avoid duplicate issue reports, check existing issues
Environment details macOS Sierra 10.12.6 , Google Chrome Version 61.0.3163.100 (Official Build) (64-bit)
Did this work before? No
Expected behavior Successfully login with Firebase Phone
Actual behavior Shows error 404
Logs (please, switch on a debugging mode and share us outputs uses github gist) Failed to load resource: the server responded with a status of 404 (Not Found) [Response][2] error 404 Not Found code:404 detail:"" message:"Not Found" status:"error"
Steps to reproduce the behavior I have used [] plugin to verify and login Firebase like this
Then tried this code to login Quickblox:
Any others comments?