Как получить токен Firebase Auth из IndexDB для вызовов Ajax - PullRequest
Новая
       22

Как получить токен Firebase Auth из IndexDB для вызовов Ajax

0 голосов
/ 29 апреля 2019

Я работаю над мобильным сайтом, размещенным на Node.js / Express и который "слегка" защищен с помощью Firebase Phone Authentication. При первой загрузке сайт в основном пустой. После первоначальной аутентификации Firebase Phone токен JWT отправляется на сервер узла посредством вызова AJAX. Сервер проверяет токен, проверяет, авторизован ли пользователь, а затем отправляет обратно html-контент для сайта.

Пока все хорошо. Это отличный способ защитить отображаемый контент в простом одностраничном веб-приложении.

Но вот моя нынешняя дилемма. Теперь я хочу представить данные из формы на сайте. Пустая форма была создана с первым вызовом AJAX.

После отправки формы я хотел бы повторно отправить тот же токен JWT, чтобы сопровождать дополнительный запрос AJAX для отправки данных на сервер. Мне не ясно, как получить токен. Я больше не нахожусь в цепочечном обещании, которое сначала дало мне токен ... (т.е. у меня больше нет доступа к объекту пользователя). Я вижу токен, хранящийся в IndexedDB -> FirebaseLocalStorageDB - > FirebaseLocalStorage Object -> Key: Value (fbase_key.value.stsTokenManager.accessToken)

Вот снимок экрана моих инструментов разработчика в браузере Chrome.

Chrome Browser Dev Tools Screen Print

Я действительно не уверен, как получить доступ к этому токену из JavaScript в клиенте браузера. Есть идеи, как сюда добраться?

Примечание. Весь мой исходный код клиентского скрипта содержался в 

$(document).ready(function () {
...
}

Из-за синхронизации и привязки функции .on() последующее содержимое сценария для моей формы данных было обработано после начальной аутентификации Ajax после вызова.

Пример кода для первоначальной отправки AJAX ... Очевидно, что данные формы, отправляемые на сервер, будут содержать полезную нагрузку объекта JSON. 

    var authUserAjaxRequest = function (jwt) {
        console.log("authUserAjaxRequest started...");
        $.ajax({
            type: "POST", 
            url: '/fb', //the url to call
            data: {
                data: 'testData'
            }, //Data sent to server
            dataType: "json",
            beforeSend: function (xhr) { //Include the bearer token in header
                xhr.setRequestHeader("Authorization", 'Bearer ' + jwt)
            }
        }).then(function (response) {
            $('#admin_note_loc').html(response.admin_note);
            $('#page2_data').html(response.page2_data);
            $('#page3_summary').html(response.page3_summary);
            $('#page4_team').html(response.page4_team);
        }).fail(function (err) {  //Error during request
        console.log("AuthUserReq Error: ", err);
    });

Вот ссылка . И еще. Эта ссылка кажется довольно устаревшей, или я просто делаю это неправильно. Конкретные советы приветствуются.

1 Ответ

0 голосов
/ 29 апреля 2019

Вот решение, но оно может быть не лучшим.

У меня небольшая проблема с объемом.Для всего моего исходного кода JavaScript, который я использую 

$(document).ready(function () {
...
}

Этот код прекрасно работает, позволяет мне аутентифицироваться, получать токены, повторно отправлять и т. Д.

Там у меня был некоторый код 

var handleSignedInUser = function (user) {
    // do stuff to display / block key elements on the site.

    user.getIdToken().then(function (token) {
        console.log("getIdToken(): ", token);  // <--  I added this line
        authUserAjaxRequest(token);
    })
};

К сожалению, из-за характера моих дополнений Ajax, я не смог включить их управляющий JavaScript в оболочку $(document).ready().Некоторые проблемы связывали функции $().on('click'..) с вновь созданными элементами формы.

Хммм.Помните старые добрые времена, когда мы использовали Microsoft Foundation Classes (MFC) и добавили маркеры для связи ключевых функций?Это дало мне идею.

Я добавил глобальную переменную var firebaseGlobalObject = {}; в свой исходный сценарий перед $(document).ready(function () {...

И после того, как я инициализировал свои инструменты аутентификации Firebase, я сделал копию в Глобальной переменной ...

// Initialize Firebase
var config = {
    apiKey: "...",
    authDomain: "....firebaseapp.com",
    databaseURL: "https://....firebaseio.com",
    projectId: "...",
    storageBucket: "...",
    messagingSenderId: "..."
};
firebase.initializeApp(config);
firebaseGlobalObject = firebase;   // <--- total hack

А потом пришло время поиграть в Chrome Dev Tools Console ...

Я придумал эту красоту ...

console.log(firebaseGlobalObject.auth().currentUser.qa)

Всего взломать, но он определенно отображает ТОЧНО тот же токен, что и getIdToken() (в моем исходном коде) и как показано в IndexedDB -> FirebaseLocalStorageDB -> FirebaseLocalStorage Object -> Key: Value (fbase_key.value.stsTokenManager.accessToken)

Очевидно, что когда я использую консоль, я нахожусь в глобальном контексте.Поэтому я думаю, что смогу сделать эту работу.Я скажу, я понятия не имею, почему кто-то выбрал .qa для этого индекса.Существует множество описательных свойств, видимых при firebaseGlobalObject.auth().currentUser;просто не этот токен.

У кого-нибудь есть альтернативный ответ на эту дилемму, кроме взлома (который, вероятно, потерпит неудачу со следующим обновлением Firebase через X месяцев?)

...