i fail with getting socket_id from pusher for presence and private channel with pusher_client.authenticate method.
here is schema to understand:
i am working with flask blueprints.
here is server url for identification:
from pusher import Pusher
PUSHER_APP_ID = '123456'
PUSHER_APP_KEY = 'secret109cfb2c29secret'
PUSHER_APP_SECRET = 'PUSHER_APP_SECRET'
PUSHER_APP_CLUSTER = 'eu'
SSL = True
pusher = Pusher(app_id=PUSHER_APP_ID, key=PUSHER_APP_KEY, secret=PUSHER_APP_SECRET, cluster=PUSHER_APP_CLUSTER)
#pousse_bp.route("/pusher/auth", methods=['POST'])
def pusher_authentication():
pusher_client = pusher
auth = pusher_client.authenticate(
channel=request.form['channel_name'],
socket_id=request.form['socket_id'])
flash(auth, 'success')
print(request.json)
return json.dumps(auth)
here is my template:
<form method="post" action="/pousse/pusher/auth">
<h3>test authenticate pusher</h3>
<h2>https://pusher.com/docs/channels/server_api/authenticating-users</h2>
<input type="hidden" name="csrf_token" value="{{ csrf_token() }}"/>
<input type="text" name="channel_name" placeholder="channel_name here"><br>
<input type="submit" name="Submit">
</form>
</body>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script src="https://js.pusher.com/4.0/pusher.min.js"></script>
<script type="text/javascript">
var pusher = new Pusher('secret109cfb2c29secret', {cluster: 'eu',encrypted: true, authTransport: 'jsonp',authEndpoint: 'pousse/pusher/auth'});
pusher.connection.bind('connected', function() {
console.log("connected");
socketId = pusher.connection.socket_id;
console.log("socketId" + socketId);
});
var channel = pusher.subscribe('presence-channel');
it does not work because something is wrong fot getting socket_id,
so it's invalid. i dont understand what it lacks in my code.
the message error on flask is :
in pusher_authentication
socket_id=request.form['socket_id'])
File "python3.7/site-packages/werkzeug/datastructures.py", line 443, in __getitem__
raise exceptions.BadRequestKeyError(key)
werkzeug.exceptions.BadRequestKeyError: 400 Bad Request: The browser (or proxy) sent a request that this server could not understand.
KeyError: 'socket_id'
the mozilla console error is:
connected pousseindex:88:17
socketId126757.3121110 pousseindex:90:17
Le script à l’adresse « http://localhost:5000/pousse/pousse/pusher/auth?callback=Pus…27%5D&socket_id=126757.3121110&channel_name=presence-channel » a été chargé alors que son type MIME (« text/html ») n’est pas un type MIME JavaScript valide.
Related
how to Use the client ID and client secret to obtain an access token using the OAuth 2.0 protocol
please give me an example
you can also get token via ajax run this code in php file
<p id="demo"></p>
<button type="button" onclick="loadDoc()">Request data</button>
Request data
<script>
function loadDoc() {
const xhttp = new XMLHttpRequest();
xhttp.onload = function() {
document.getElementById("demo").innerHTML = this.responseText;
}
xhttp.open("POST", "https://www.googleapis.com/oauth2/v4/token");
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhttp.send("code=<?=$_REQUEST['code']?>&client_id=your_client_id&client_secret=your_client_secret&redirect_uri=your_redriction_url&grant_type=authorization_code");
}
</script>
I would need to upload Gziped content to S3 via a signed URL.
Here is how I generate the signed URL with a JS backend:
s3.createPresignedPost({
Bucket: 'name',
Fields: {
key: 'key'
}
})
I have tried passing the Content-Encoding header to the signedURL POST request but that did not work. The headers are not set properly on the s3 object.
I have also tried setting up a post upload lambda to update the metadata. It failed with an error File is identical error
Finally I have tried using cloudfront + a lambda to force a header. This failed too with an error stating that Content-Enconding is a protected error.
--Update Start--
For uploading to S3 via Ajax or JS scripts, I would advise to use s3.getSignedUrl method. s3.createPresignedPost is meant for only direct browser uploads.
Below is example of Ajax jQuery Upload I created using this guide.
s3.getSignedUrl('putObject', {
Bucket: 'bucketName',
Key: 'sample.jpg.gz',
// This must match with your ajax contentType parameter
ContentType: 'binary/octet-stream'
/* then add all the rest of your parameters to AWS puttObect here */
}, function (err, url) {
console.log('The URL is', url);
});
Ajax PUT Script - Take the Url from above function call and use it below.
$.ajax({
type: 'PUT',
url: "https://s3.amazonaws.com/bucketName/sample.jpg.gz?AWSAccessKeyId=AKIAIOSFODNN7EXAMPLE&Content-Type=binary%2Foctet-stream&Expires=1547056786&Signature=KyTXdr8so2C8WUmN0Owk%2FVLw6R0%3D",
//Even thought Content-Encoding header was not specified in signature, it uploads fine.
headers: {
'Content-Encoding': 'gzip'
},
// Content type must much with the parameter you signed your URL with
contentType: 'binary/octet-stream',
// this flag is important, if not set, it will try to send data as a form
processData: false,
// the actual file is sent raw
data: theFormFile
}).success(function () {
alert('File uploaded');
}).error(function () {
alert('File NOT uploaded');
console.log(arguments);
});
In S3 object, you should see Content-Type, Content-Encoding under metadata.
Importent Note
When you try to upload via JS scripts which is running on browsers, typically browsers will tend to send OPTIONS method preflight(or CORS check) first before calling PUT method. You will get 403 Forbidden error for OPTIONS since CORS on S3 bucket doesn't allow that. One way, I resolved is by using following CORS configuration on bucket level. Reference
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
<AllowedOrigin>*</AllowedOrigin>
<AllowedMethod>PUT</AllowedMethod>
<MaxAgeSeconds>3000</MaxAgeSeconds>
<AllowedHeader>*</AllowedHeader>
</CORSRule>
</CORSConfiguration>
--Update End--
Did you try like this?. I just tested the policy using sample html given in AWS documentation. Reference - https://docs.aws.amazon.com/AmazonS3/latest/API/sigv4-HTTPPOSTConstructPolicy.html
s3.createPresignedPost({
Bucket: 'name',
Conditions: [
{ "Content-Encoding": "gzip" }
],
Fields: {
key: 'key'
}
})
Update -
Here is my observation so far.
We really need to check your client which is doing upload operation. If you want Content-Encoding set on MetaData, then your Pre-Signed Url should have Content-Encoding property set. If Signed Url doesn't have it but your request header does then it will give you Extra input fields: content-encoding.
I have signed a url with Content-Encoding and uploaded a zipped file with following sample html.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
<form action="http://bucket-name.s3.amazonaws.com" method="post" enctype="multipart/form-data">
Key to upload:
<input type="input" name="key" value="sample.jpg.gz" /><br />
Content-Encoding:
<input type="input" name="Content-Encoding" value="gzip" /><br />
<input type="text" name="X-Amz-Credential" value="AKIAIOSFODNN7EXAMPLE/20190108/us-east-1/s3/aws4_request" />
<input type="text" name="X-Amz-Algorithm" value="AWS4-HMAC-SHA256" />
<input type="text" name="X-Amz-Date" value="20190108T220828Z" />
Tags for File:
<input type="hidden" name="Policy" value='bigbase64String' />
<input type="hidden" name="X-Amz-Signature" value="xxxxxxxx" />
File:
<input type="file" name="file" /> <br />
<!-- The elements after this will be ignored -->
<input type="submit" name="submit" value="Upload to Amazon S3" />
</form>
</html>
If I do not send Content-Encoding header it gives the error Policy Condition failed: ["eq", "$Content-Encoding", "gzip"]
Note -
If you are using https while uploading, please make sure you have proper certificate on S3 endpoint otherwise you will get cert errors.
S3 Screenshot.
I am trying to insert data into existing table in database from mobilefirst. the adapter is working fine and i can insert data into database from the adapter. But when it is invoked in client side it shows failure message.
function insert(){
var invocationData = {
adapter:"sqlad",
procedure:"procedure1",
parameters:[$('#empid').val(),$('#empname').val()]
};
WL.Client.invokeProcedure(invocationData,{
onSuccess :loadFeedsSuccess,
onFailure :loadFeedsFailure,
});
}
function loadFeedsSuccess() {
alert("success");
}
function loadFeedsFailure() {
alert("failure");
}
html
<body style="display: none;">
<!--application UI goes here-->
<h1>ENTER THE EMP DETAILS</h1>
EMP ID<input type="text" id=empid> <br> <br>
Emp NAME<input type="text" id=empname><br> <br>
<input type="submit" value=register onclick="insert();">
<script src="js/initOptions.js"></script>
<script src="js/main.js"></script>
<script src="js/messages.js"></script>
</body>
adap imp.js
var procedure1Statement = WL.Server.createSQLStatement("INSERT INTO testdemo(empid,empname) Values(?,?)");
function procedure1(empid,empname) {
return WL.Server.invokeSQLStatement({
preparedStatement : procedure1Statement,
parameters : [empid,empname]
});
}
The actual failure here is this:
[ERROR ] FWLSE0335E: Authorization failed: ClientId 8v2iz67uij was not
found on the server. [project simpledb] [ERROR ] FWLSE0048E: Unhandled
exception caught: null
com.worklight.authorization.endpoint.OauthAuthorizationException
The solution is detailed in this question: Authorization failure calling MobileFirst Adapter
To fully resolve the issue so that it will not appear again, you must update your Studio installation to the latest iFix. As an IBM customer you can download the latest iFix from the IBM Fix Central website using your customer credentials.
As a temporary fix you can attempt to clear the browser cookies, as suggested in the linked question.
I am trying to insert data into existing table in database from mobilefirst. the adapter is working fine and i can insert data into database from the adapter. But when it is invoked in client side it shows failure message.
function insert(){
var invocationData = {
adapter:"sqlad",
procedure:"procedure1",
parameters:[$('#empid').val(),$('#empname').val()]
};
WL.Client.invokeProcedure(invocationData,{
onSuccess :loadFeedsSuccess,
onFailure :loadFeedsFailure,
});
}
function loadFeedsSuccess() {
alert("success");
}
function loadFeedsFailure() {
alert("failure");
}
html
<body style="display: none;">
<!--application UI goes here-->
<h1>ENTER THE EMP DETAILS</h1>
EMP ID<input type="text" id=empid> <br> <br>
Emp NAME<input type="text" id=empname><br> <br>
<input type="submit" value=register onclick="insert();">
<script src="js/initOptions.js"></script>
<script src="js/main.js"></script>
<script src="js/messages.js"></script>
</body>
adap imp.js
var procedure1Statement = WL.Server.createSQLStatement("INSERT INTO testdemo(empid,empname) Values(?,?)");
function procedure1(empid,empname) {
return WL.Server.invokeSQLStatement({
preparedStatement : procedure1Statement,
parameters : [empid,empname]
});
}
The actual failure here is this:
[ERROR ] FWLSE0335E: Authorization failed: ClientId 8v2iz67uij was not
found on the server. [project simpledb] [ERROR ] FWLSE0048E: Unhandled
exception caught: null
com.worklight.authorization.endpoint.OauthAuthorizationException
The solution is detailed in this question: Authorization failure calling MobileFirst Adapter
To fully resolve the issue so that it will not appear again, you must update your Studio installation to the latest iFix. As an IBM customer you can download the latest iFix from the IBM Fix Central website using your customer credentials.
As a temporary fix you can attempt to clear the browser cookies, as suggested in the linked question.
I am using FU-5.0.8 on Ubuntu14, apache2 php5. I successfully created page to drag n drop file, create signature and upload to my AWS S3 bucket.
I then integrated that code into an existing form, using the qq-form. The FU element and the form are generated correctly, I am able to enter data and the data is posted to my DB including the key file name generated by FU.
Issue 1: FU is not pointing to the bucket I have identified in my script. Instead of the correct bucket as before, it make my domain the target bucket name.
Issue 2: FU provides a progress bar and shows the upload is complete and returns 200. I don't know how this is possible, do FU check that the file actually exists upon completion?
Here are the standalone upload script and the script with the form. As you can see they have an identical endpoint. I have included the POST created from the qq-form where you can see the endpoint is incorrect.
FU in the JSON POST is setting the bucket to www.biggytv.com, which does not exist. It should got to btv_upload_org.s3.amazonaws.com
You assistance is appreciate.
FORM CODE
<form action="https://www.biggytv.com/btvChannels/FSsubmit.php" id="qq-form" class="span6">
<div id="fineuploader-s3" class="span6"></div>
<div class="form-group span2">
<label>Program Title</label>
<input type = "text" class="span4" name="program_title" maxlength="200" autofocus="" required>
</div>
<div class="form-group span6">
<label>Program Description</label>
<textarea name="description" maxlength="1000" class="span8" id="count_me" placeholder="Please do not include links in the Program Description. Add any links to content on other sites as part of your profile." required></textarea>
</div>
<div class="form-group span5">
<label>Video Language</label>
<select name="vid_language" class="span4" required>
<option value=""></option>
<?php $language->data_seek(0);
while($language_row = $language->fetch_assoc()){
$languageid = $language_row['short'];
$languagename = $language_row['name'];
echo "<option value=\"$languageid\">
$languagename
</option>";
}?>
</select>
</div>
<div class="form-group span5">
<label>Target Audience</label>
<select name="Audience_DART1" class="span4" required>
<option value=""></option>
<?php $audience->data_seek(0);
while($audience_row = $audience->fetch_assoc()){
$audienceid = $audience_row['tar_aud_code'];
$audiencename = $audience_row['tar_aud_name'];
echo "<option value=\"$audienceid\">
$audiencename
</option>";
}?>
</select>
</div>
<div class="form-group span5">
<label>Genre</label>
<select name="genre" class="span4" required>
<option value=""></option>
<?php $genre->data_seek(0);
while($genre_row = $genre->fetch_assoc()){
$genreid = $genre_row['genre_id'];
$genrename = $genre_row['genre_name'];
echo "<option value=\"$genreid\">
$genrename
</option>";
}?>
</select>
</div>
<div class="form-group span5">
<label>Rating</label>
<select name="Rating_DART" class="span4" required>
<option value=""></option>
<?php $rating->data_seek(0);
while($rating_row = $rating->fetch_assoc()){
$dartid = $rating_row['dart_rating'];
$dartname = $rating_row['dart_rating_name'];
echo "<option value=\"$dartid\">
$dartname
</option>";
}?>
</select>
</div>
<input type="hidden" name="content_owner_name" value=<?php echo $content_owner_name;?>>
<input type="hidden" name="channel_id" value="801102">
<div class="span6 offset2">
<input id="submitButton" type="submit" value="Submit" class="span4">
</div>
</form>
QQ-FORM
jQuery(document).ready(function ($) {
$('#fineuploader-s3').fineUploaderS3({
request: {
endpoint: "btv_upload_org.s3.amazonaws.com",
accessKey: "XXXXXXXX"
},
template: "qq-template",
signature: {
endpoint: "/finesig/"
},
forceMultipart: {
enabled: true
},
debug: true,
cors: {
expected:true,
},
resume: {
enabled: true
},
objectProperties: {
acl: "public-read"
},
validation: {
itemLimit: 1,
sizeLimit: 150000000,
acceptFiles: "video/mp4, video/quicktime, video/x-flv, video/x-ms-wmv",
allowedExtensions: ["mp4", "mov", "flv", "wmv"],
},
})
});
POST JSON
JSON
conditions
[Object { acl="public-read"}, Object { bucket="www.biggytv.com"}, Object { Content-Type="video/mp4"}, 12 more...]
0
Object { acl="public-read"}
1
Object { bucket="www.biggytv.com"}
2
Object { Content-Type="video/mp4"}
3
Object { success_action_status="200"}
4
Object { key="e001946c-a472-4412-9854-b44fede53e72.mp4"}
5
Object { x-amz-meta-program_title="Marcus%20Johns"}
6
Object { x-amz-meta-description="Marcus%20Johns"}
7
Object { x-amz-meta-vid_language="en"}
8
Object { x-amz-meta-audience_dart1="U"}
9
Object { x-amz-meta-genre="6"}
10
Object { x-amz-meta-rating_dart="G"}
11
Object { x-amz-meta-content_owner_name="MarcusJohns"}
12
Object { x-amz-meta-channel_id="801102"}
13
Object { x-amz-meta-qqfilename="7920637590280230638.mp4"}
14
["content-length-range", "0", "150000000"]
expiration
"2014-10-14T00:11:08.742Z
Uploader Log
[Fine Uploader 5.0.8] Sending simple upload request for 0
custom.....0.8.js (line 207)
[Fine Uploader 5.0.8] Submitting S3 signature request for 0
custom.....0.8.js (line 207)
[Fine Uploader 5.0.8] Sending POST request for 0
custom.....0.8.js (line 207)
POST https://www.biggytv.com/finesig/
200 OK
552ms
custom.....0.8.js (line 3810)
[Fine Uploader 5.0.8] Sending upload request for 0
custom.....0.8.js (line 207)
POST https://www.biggytv.com/btvChannels/FSsubmit.php
200 OK
938ms
custom.....0.8.js (line 9849)
[Fine Uploader 5.0.8] Received response status 200 with body: Array
(
[key] => 05a829e8-bea1-44f6-b35d-1f620f1043af.mp4
[AWSAccessKeyId] => XXXXXXXXX
[Content-Type] => video/mp4
[success_action_status] => 200
[acl] => public-read
[x-amz-meta-program_title] => Marcus%20John
[x-amz-meta-description] => Mar
[x-amz-meta-vid_language] => en
[x-amz-meta-audience_dart1] => U
[x-amz-meta-genre] => 6
[x-amz-meta-rating_dart] => G
[x-amz-meta-content_owner_name] => MarcusJohns
[x-amz-meta-channel_id] => 801102
[x-amz-meta-qqfilename] => 7920637590280230638.mp4
[policy] => eyJleHBpcmF0aW9uIjoiMjAxNC0xMC0xNFQwMDozNzoxNS44NjZaIiwiY29uZGl0aW9ucyI6W3siYWNsIjoicHVibGljLXJlYWQifSx7ImJ1Y2tldCI6Ind3dy5iaWdneXR2LmNvbSJ9LHsiQ29udGVudC1UeXBlIjoidmlkZW8vbXA0In0seyJzdWNjZXNzX2FjdGlvbl9zdGF0dXMiOiIyMDAifSx7ImtleSI6IjA1YTgyOWU4LWJlYTEtNDRmNi1iMzVkLTFmNjIwZjEwNDNhZi5tcDQifSx7IngtYW16LW1ldGEtcHJvZ3JhbV90aXRsZSI6Ik1hcmN1cyUyMEpvaG4ifSx7IngtYW16LW1ldGEtZGVzY3JpcHRpb24iOiJNYXIifSx7IngtYW16LW1ldGEtdmlkX2xhbmd1YWdlIjoiZW4ifSx7IngtYW16LW1ldGEtYXVkaWVuY2VfZGFydDEiOiJVIn0seyJ4LWFtei1tZXRhLWdlbnJlIjoiNiJ9LHsieC1hbXotbWV0YS1yYXRpbmdfZGFydCI6IkcifSx7IngtYW16LW1ldGEtY29udGVudF9vd25lcl9uYW1lIjoiTWFyY3VzSm9obnMifSx7IngtYW16LW1ldGEtY2hhbm5lbF9pZCI6IjgwMTEwMiJ9LHsieC1hbXotbWV0YS1xcWZpbGVuYW1lIjoiNzkyMDYzNzU5MDI4MDIzMDYzOC5tcDQifSxbImNvbnRlbnQtbGVuZ3RoLXJhbmdlIiwiMCIsIjE1MDAwMDAwMCJdXX0=
[signature] => d48Ibli+V6/RmN3bUUZKVJ0woew=
)
custom.....0.8.js (line 207)
[Fine Uploader 5.0.8] Simple upload request succeeded for 0
Update
In the FU documentation you referred to "Integrating with existing html forms", the "simple example" 'action' is set to a script not a S3 bucket, that is why I am confused.
However, I have configured my script in the manner of your answer.
When I set the Action to the bucket, the uploadSuccess: {endpoint} POST does not include any of my form data, just key, uuid,name,bucket,etag.
If I set the Action as to https://www.biggytv.com/btvChannels/FSsubmit.php, the form data is sent in the POST and FU returns a 200 that the file was uploaded to www.biggytv.com, a bucket that does not exist.
So my issue is the uploadSuccess: {endpoint} is not including any of my form data in the POST.
Thank you.!
The action attribute in the form serves the same purpose as the request.endpoint option. You should leave the request.endpoint option off of your JavaScript configuration. The action attribute will define the S3 endpoint where your files will be uploaded. If you want the file to be sent to "btv_upload_org.s3.amazonaws.com", then that should be the value of the form's action attribute. Again, leave request.endpoint off your JavaScript config.
In your JavaScript config, you can (and must) define a signature.endpoint option. Fine Uploader will send a POST to this endpoint to sign each request before a request is sent to the S3 endpoint defined in the action attribute.
You may also define an uploadSuccess endpoint in your JavaScript config. Fine Uploader will POST to this location when the file is successfully in S3.
You can find all information regarding form support on the associated feature page.