search

QuickBlox / quickblox-javascript-sdk

JavaScript SDK of QuickBlox cloud backend platform
Other
105 stars 217 forks source link

Signing In with Firebase phone not working #282

Closed shahriar closed 6 years ago

shahriar commented 6 years ago

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 

     window.FirebasePlugin.verifyPhoneNumber(phoneNumber, timeOutDuration, (credential) => {
                // ask user to input verificationCode
                var code = inputField.value.toString()

                var signInCredential = firebase.auth.PhoneAuthProvider.credential(verificationId, code);
                firebase.auth().signInWithCredential(signInCredential);
     }, (error) => {
                console.error("FirebasePlugin.verifyPhoneNumber error", error);
     });

Then tried this code to login Quickblox:

let params = {
     'provider': 'firebase_phone',
     'firebase_phone[project_id]': "project_id",  // firebase project_id
     'firebase_phone[access_token]': access_token, // firebase access token 
};

QB.login(params, (err, user) => {
     if (user) {}
});

Any others comments?

Vladlukhanin commented 6 years ago

Hi, @shahriar From which server the error comes, quickblox or firebase?

shahriar commented 6 years ago

@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

Vladlukhanin commented 6 years ago

Did you try this on our shared server (api.quickblox.com)?

Vladlukhanin commented 6 years ago

You use cordova-plugin-firebase?

shahriar commented 6 years ago

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

Vladlukhanin commented 6 years ago

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)

shahriar commented 6 years ago

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

Vladlukhanin commented 6 years ago

I tryed to loging by phone number on api.quickblox.com and everything worked fine. I hope you will do well.

shahriar commented 6 years ago

@Vladlukhanin Great! Can you share the quickblox login part?

Vladlukhanin commented 6 years ago

Authorization via Firebase (to create User session token based on Firebase phone user (SMS))

  1. Open Firebase Console and create a new application if you need.

  2. 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>

  3. 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>

Build custom login form without FirebaseUI

  1. 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>
...

  2. Set up the reCAPTCHA verifier (source from Firebase Docs to read more):

    window.recaptchaVerifier = new firebase.auth.RecaptchaVerifier('recaptcha-container');

  3. 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?)
        });
    });
});
shahriar commented 6 years ago

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.

shahriar commented 6 years ago

Thanks a lot. It worked.

Vladlukhanin commented 6 years ago

Our team haven't tried it with cordova/phonegap yet. Maybe a little later