Софтуерно Инженерство
Loading...
IvoArsov avatar 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" какъв е? 

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

Тагове:
1
Софтуерни технологии 15/08/2016 10:24:46
Innos avatar Innos SoftUni Team 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

1
22/08/2016 00:39:48
IvoArsov avatar IvoArsov 44 Точки

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

0
22/08/2016 11:28:54
Innos avatar Innos SoftUni Team 419 Точки

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

Signature
PUT

0
IvoArsov avatar IvoArsov 44 Точки

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

0
22/08/2016 14:26:00
Innos avatar Innos SoftUni Team 419 Точки

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

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

0
22/08/2016 15:26:35
Innos avatar Innos SoftUni Team 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-не без да те пита.

1
24/08/2016 23:06:29
IvoArsov avatar IvoArsov 44 Точки

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

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

0
IvoArsov avatar 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>

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

1
26/08/2016 09:16:58
Innos avatar Innos SoftUni Team 419 Точки

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

0
26/08/2016 22:18:29
IvoArsov avatar IvoArsov 44 Точки

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

0