quickstart-js icon indicating copy to clipboard operation
quickstart-js copied to clipboard

use facebook login for chrome extension

Open flyfj opened this issue 7 years ago • 5 comments

i wonder how to login with facebook from a chrome extension. there is an example using google auth but not sure how to adapt to facebook.

flyfj avatar Oct 30 '16 05:10 flyfj

Same here flyfj. Firebase team or from the community pls provide an example!

acroutworst avatar May 06 '18 12:05 acroutworst

I solved it like that:

function logInWithFB() {
    var clientId = 'xxx';
    var clientSecret = xxx'';
    var redirectUri = encodeURIComponent(chrome.identity.getRedirectURL("extenson-name"));

    var url = 'https://www.facebook.com/dialog/oauth?client_id=' + clientId +
        '&reponse_type=token&access_type=online&display=popup' +
        '&scope=email' +
        '&redirect_uri=' + redirectUri;

    var deferred = $.Deferred();

    chrome.identity.launchWebAuthFlow(
        {
            'url': url,
            'interactive': true
        },
        function (redirectedTo) {
            if (chrome.runtime.lastError) {
                // Example: Authorization page could not be loaded.
                deferred.reject(chrome.runtime.lastError.message);
            } else {
                var response = urlParamsToMap(redirectedTo.replace(chrome.identity.getRedirectURL("extension-name") + "?", ""));
                var code = response.get('code');

                $.ajax({
                    url: 'https://graph.facebook.com/oauth/access_token?' +
                    'client_id=' + clientId +
                    '&client_secret=' + clientSecret +
                    '&redirect_uri=' + redirectUri +
                    '&code=' + code,
                    type: "GET",
                    crossDomain: true
                }).then(function (data) {
                    var credential = firebase.auth.FacebookAuthProvider.credential(data.access_token);
                    firebase.auth().signInWithCredential(credential).then(function (data) {
                        if (!data.emailVerified) {
                            firebase.auth().currentUser.sendEmailVerification();
                        }

                        firebase.auth().currentUser.getToken(/* forceRefresh */ true).then(function (fire_idToken) {
                            sendToBackend(fire_idToken) */your own method
                                .done(function () {
                                    deferred.resolve();
                                })
                                .fail(function (error) {
                                    deferred.reject(error);
                                });
                        });


                    }).catch(function (error) {
                        deferred.reject(error);
                    });

                });
            }
        }
    );

    return deferred.promise();
}

evertnolv avatar May 06 '18 12:05 evertnolv

@evertnolv Thanks for responding!

When I try that method, I get this popup. Any thoughts? screen shot 2018-05-06 at 15 00 57

acroutworst avatar May 06 '18 13:05 acroutworst

@evertnolv is it okay to expose
var clientId = 'xxx'; var clientSecret = xxx''; in extension code?

rendomnet avatar Jul 19 '20 06:07 rendomnet

@evertnolv what is var deferred = $.Deferred();

rendomnet avatar Jul 19 '20 06:07 rendomnet