[Eкипен проект с JS - фотогалерия] Как точно да кача снимките в Kinvey?

IvoArsov 44 Точки

[Eкипен проект с JS - фотогалерия] Как точно да кача снимките в Kinvey?

Добро утро,

казусът е следния. Според документацията на Kinvey, трябва да се направи POST заявка към Kinvey. В respons-a получаваш "_uploadURL" на който да си качиш някакъв фаил. Този URL е в Google Cloud Storage. В документацията на KInvey пише " Next, extract the _uploadURL from the response body and upload the file by making a PUT request to this URL". Така, дотук всичко е ясно. Даден е линк към този Google Storage за подробности. От там става ясно че за PUT заявка към URL-a са необходими : screenshot

Та основния въпрос е този "Authorization" какъв е?

И, изобщо, дали подходът ми за качване на снимки е правилен?

Тагове:

15/08/2016 10:22:34 Софтуерни технологии 15/08/2016 10:24:46

Виж всички отговори

Innos 419 Точки

Скрийншота който си линкнал е за Bucket request-и, не за Object request-и, не е задължително да ти трябват всички header-и също. След POST заявка към blob/:appKey/ в Kinvey, в response-a ще получиш _uploadURL и _requiredHeaders - те са за Google Cloud Storage-a. Пускаш PUT заявка към _uploadURL като трябва да добавиш всички header-и от _requiredHeaders към header-ите на заявката. След това с GET заявка към /blob/:appKey/:fileId(това _id го получаваш от POST заявката) трябва да получиш response с _downloadURL, което е реалния линк към файлът ти.

Аз обаче лично имах проблеми със Cross-Origin Resource Sharing-а затова ти препоръчвам да си свалиш от Kinvey HTML5 SDK то им, което ще ти спести доста главоболие. Препоръчвам ти също да погледнеш в API то как се прави publicly readable file, ако не си го видял вече.

Ето няколко screenshot-a:

POST
PUT
GET

22/08/2016 00:36:14 22/08/2016 00:39:48

IvoArsov 44 Точки

Привет,
пускам първоначалната POST заявка към Кинви, то ми връща следното: ЦЪК
"_requiredHeaders" са празни, няма нищо?
Съответно пускам PUT заявка към съответния "_uploadURL", само PUT, без никакви хедъри. И получавам това - ЦЪК
От къде да ги взема тези Google secret key and signing method?

22/08/2016 10:43:07 22/08/2016 11:28:54

Innos 419 Точки

Линкни скрийншот/и със самата PUT заявка в браузъра, да се вижда RequestUrl то, header-ите, response header-ите. Доколкото виждам от скрийншота ти си объркал/мутирал Signature-a в заявката.

Signature
PUT

22/08/2016 14:02:31

IvoArsov 44 Точки

PUT request
Не му подавам никакви хедъри, защото трябвало да се вземат от първоначалната POST заявка към Кинви, пък тя не ми връща никакви "_requiredHeaders" ( има скрииншот в предишния ми пост). Та, мисля си, дали не бъркам нещо в POST заявката, за да не ми връща правилен response?

22/08/2016 14:25:05 22/08/2016 14:26:00

Innos 419 Точки

Error-a e доста ясен - пращаш грешен Signature, _requiredHeader-и да няма е нормално в дадени ситуации, aко си получил uploadURL едва ли имаш проблем в POST заявката.

С Postman ли тестваш? За хедърите имах предвид че browser-ите пускат някои header-и автоматично. Обикновено един от тях е Content-Length който е задължителен за заявката, въпреки че както казах error-a изглежда ясен затова искам да качиш пълното URL и друга информация покрай request-a.

22/08/2016 15:06:13 22/08/2016 15:26:35

IvoArsov 44 Точки

POST to Kinvey - option

POST to Kinvey - real post

response data from Kinvey

Put to uploadURL

До сега тествах рекуестите през RESTClient на Мозила, това вече са заявки от приложението. Явно не мога да схвана откъде да взема тоя signature.

22/08/2016 16:14:01 22/08/2016 16:17:57

Innos 419 Точки

Ок разгледах проблема в подробност и ето какво излезе. Signature-a който Google ще очаква е различен, ако заявката ще изпраща и Content-Type (който jQuery.ajax автоматично адва, ако не специфицираш обратното). Ако не специфицираш експлицитно при POST заявка към Kinvey със специфичният header "X-Kinvey-Content-Type" че ще изпращаш и Content-Type-а, той ще генерира Signature който не взема в предвид ContentType (иначе казано Signature който ще е невалиден, ако в заявката към Google имаш Content-Type header). Надявам се виждаш на къде бия вече, едно решение е да си добавиш към POST заявката към Kinvey "X-Kinvey-Content-Type" header със типа на файлът (можеш да го видиш във пропъртитата на файлът който ще качваш) и след това да сетнеш Content-Type header-a при PUT заявката към Google Cloud-a на същият (обърни внимание тук, ако имаш нещо което ти настройва автоматично header-ите да не го пренапише). Също имай предвид че ъплоадването на файлове чрез jQuery.ajax изисква още малко настройки.
Google Signature Requirment
Kinvey Specifying Content Type

PS: Честно казано може да ти е по лесно просто да свалиш и да им използваш библиотеката както бях написал нагоре.

Edit: Очевидно Google не очаква информацията като FormData, просто трябва да не я JSON.Stringify-ваш и да подадеш в Ajax option-ите "processData: false".
Edit2: Премахнах линковете за FormData upload-а, защото може да са по объркващи от колкото помагащи. Изпращането на файл може да го направиш по абсолютно същия начин както си изпращаш JSON-ите, с разликите че трябва да НЕ stringify-ваш информацията и трябва да зададеш "processData: false" на Ajax-a за да не я stringify-не без да те пита.

23/08/2016 18:05:46 24/08/2016 23:06:29

IvoArsov 44 Точки

Благодаря за отделеното време и подробния отговор,

мисля, че разбрах откъде идва проблема. Когато се добера до комп ще го тествам и ще пиша какво е станало.

23/08/2016 20:18:18

IvoArsov 44 Точки

Добро утро,
пак не стана, писна ми да се занимавам с Кинвито, предпиемам друга стратегия. Както беше споменал един пич в по - горните постове реших да си кача снимките в друг облак, а не задължително в Google Storage и да подавам към Kinvey само URL-лите.
Така, спрях се на Ospry (на линка има инфо как точно се качват снимките), изкарал съм си uploadURL, който е валиден и само се опитвам да го подам към Кинви, като обикновенна data, но пак не става .... Къде бъркам? Ето кода :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Test</title>
    <script src="scripts/libs/jquery-3.0.0.min.js" type=""></script>
    <script src="https://code.ospry.io/v1/ospry.js"></script>
</head>
<body>

<form id="up-form">
    <input type="file" multiple />
    <button type="submit">Upload</button>
</form>

<script>
    const kinveyAppID = 'kid_HycsO3rF';
    const kinveyAppSecret = 'd0c21de73cd04b95aa68f4f48ad6ce66';
    const kinveyAppMasterSecret = "3b22a7bf51264d209af567ee79d4becc";
    const kinveyServiceBaseUrl = 'https://baas.kinvey.com/';
    ////////// OSPRAY
    let ospry = new Ospry('pk-test-rjna2is16e0hjq6g7810zhym');
    let uploadURL;
    let fileName = $('#fileName').val;
    let onUpload = function(err, metadata) {
        ospry.get({
            url: metadata.url,
            maxHeight: 400,
            imageReady: function(err, domImage) {
                $('body').append(domImage);
            },
        });
        uploadURL = JSON.stringify(metadata.url);
        console.log(uploadURL);
        ///// POST to Kinvey
        if(uploadURL.length > 0){
            let uploadDataUrl = kinveyServiceBaseUrl + "appdata/" + kinveyAppID + "/Test";
            let kinveyAuthHeaders = {'Authorization': "Basic " + btoa(kinveyAppID + ":" + kinveyAppMasterSecret)};
            let uploadData = {
                name: fileName,
                file: uploadURL
            };
            $.ajax({
                method: "POST",
                url:uploadDataUrl,
                data: uploadData,
                //ContentType: 'application/json',
                headers: kinveyAuthHeaders
                //success: render
                //error: showAjaxError
            });
        }
    };
    $('#up-form').submit(function(e) {
        e.preventDefault();
        ospry.up({
            form: this,
            imageReady: onUpload,
        });
    });


</script>
</body>
</html>

Просто не мога да го накарам да изпълни заявката към Кинви, иначе всичко друго работи.

26/08/2016 09:10:47 26/08/2016 09:16:58

Innos 419 Точки

Честно казано има много проблеми със това дето си постнал, ама щом си решил ето ти го поправено.
Юзър-а който използвам е мой смени го с такъв за твоя app и никога не си поствай или използвай master-secret-а в клиентски код. А да и съм си сложил jQuery локално, така че пътя към него ще ти е различен.

26/08/2016 22:17:17 26/08/2016 22:18:29

IvoArsov 44 Точки

Подкарах го, благодаря! Много време изгубихме с начина за качване който е описан в Кинви и сега въпроса е просто да имаме нещо работещо, макар и не перфектно.

27/08/2016 10:55:19

Виж всички отговори