More docs explaining how to use signed URLs or guidance during set up

[djsjr]

Suggesting a step-by-step explanation in docs or even just guidance during setup to using signed URLs. It would be beneficial to someone like myself who has never used signed URLs or cloudfront to restrict content access.

I can't figure it out even after having reviewed the cloudfront docs as well as the Signed URLs section of the amplify-video wiki. ie. I don't know where the PEM file is, or how to access keys in Secrets Manager (if I even need to), or how to utilize the public and private key (if I could find it), etc. Figuring out other plugins or even other aspects of this plugin is considerably clearer.

Very glad you guys have created this plugin!

[shamikatamazon]

Just updated the wiki page at https://github.com/awslabs/amplify-video/wiki/SignedURLS with additional details, please respond to this ticket if any additional information is needed

[nathanagez]

Just updated the wiki page at https://github.com/awslabs/amplify-video/wiki/SignedURLS with additional details, please respond to this ticket if any additional information is needed

Hi @shamikatamazon, thank you very much for your contribution, really appreciate it!

@smp do you think it would be better to transform Python snippets into JavaScript ones ?

@shamikatamazon, currently, when you use CloudFront signed urls, a lambda is created to sign your urls (the one you mentioned). And if you uses the VMS (when you setup the GraphQL API to manage your content with AppSync, S3 & DynamoDB), you should be able to get your token directly from the lambda above.

If you setup the VMS (that will setup the Auth and an API) you will have in your amplify backend directory (your-project/amplify/backend/api/yourApiName/schema.graphql) a similar GraphQL Schema:

type vodAsset @model (subscriptions: {level: public})
@auth(
  rules: [
    {allow: groups, groups:["Admin"], operations: [create, update, delete, read]},
    {allow: private, operations: [read]}
  ]
)
{
  id:ID!
  title:String!
  description:String!

  #DO NOT EDIT
  video:videoObject @connection
}

#DO NOT EDIT
type videoObject @model
@auth(
  rules: [
    {allow: groups, groups:["Admin"], operations: [create, update, delete, read]},
    {allow: private, operations: [read]}
  ]
)
{
  id:ID!

  token: String @function(name: "yourProjectName-prod-tokenGen") # here is the part that interests us
}

allowing you to get the token (policy to append to your CF url) when you query your video object.

[smp]

@nathanagez I would agree that we should strive to provide any example from the perspective of a front-end developer using the feature via Javascript. Amplify is predominantly a Javascript project, even on the backend functions, so we should try to use it as much as possible.

To emphasize your point, the front-end developer using this feature shouldn't really need to retrieve the key from secrets manager as shown in "step 1." Instead they would be using the Appsync endpoint for token access. This lambda function uses the secret to sign tokens used by the client and authN'd by CloudFront.

@shamikatamazon do you mind updating the docs to walk through the token generation from the perspective of the VMS (Previously called CMS) appsync API?

[shamikatamazon]

@nathanagez https://github.com/nathanagez Thanks for the feedback! @smp https://github.com/smp I'll update the docs in the next couple of days.

-Shamik

On Thu, Apr 22, 2021 at 1:16 PM Shawn Przybilla @.***> wrote:

@nathanagez https://github.com/nathanagez I would agree that we should strive to provide any example from the perspective of a front-end developer using the feature via Javascript. Amplify is predominantly a Javascript project, even on the backend functions, so we should try to use it as much as possible.

To emphasize your point, the front-end developer using this feature shouldn't really need to retrieve the key from secrets manager as shown in "step 1." Instead they would be using the Appsync endpoint for token access. This lambda function uses the secret to sign tokens used by the client and authN'd by CloudFront.

@shamikatamazon https://github.com/shamikatamazon do you mind updating the docs to walk through the token generation from the perspective of the VMS (Previously called CMS) appsync API?

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/awslabs/amplify-video/issues/236#issuecomment-825155426, or unsubscribe https://github.com/notifications/unsubscribe-auth/ATU2HGOAFQ3ICZYEASSXEULTKB7YRANCNFSM42RT2KYA .

[shamikatamazon]

Hey @nathanagez - I just updated the wiki page based on your feedback - please could you review and let me know if everything looks good?

Thanks Shamik

On Thu, Apr 22, 2021 at 2:15 PM Shamik Shah @.***> wrote:

@nathanagez https://github.com/nathanagez Thanks for the feedback! @smp https://github.com/smp I'll update the docs in the next couple of days.

-Shamik

On Thu, Apr 22, 2021 at 1:16 PM Shawn Przybilla @.***> wrote:

@nathanagez https://github.com/nathanagez I would agree that we should strive to provide any example from the perspective of a front-end developer using the feature via Javascript. Amplify is predominantly a Javascript project, even on the backend functions, so we should try to use it as much as possible.

To emphasize your point, the front-end developer using this feature shouldn't really need to retrieve the key from secrets manager as shown in "step 1." Instead they would be using the Appsync endpoint for token access. This lambda function uses the secret to sign tokens used by the client and authN'd by CloudFront.

@shamikatamazon https://github.com/shamikatamazon do you mind updating the docs to walk through the token generation from the perspective of the VMS (Previously called CMS) appsync API?

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/awslabs/amplify-video/issues/236#issuecomment-825155426, or unsubscribe https://github.com/notifications/unsubscribe-auth/ATU2HGOAFQ3ICZYEASSXEULTKB7YRANCNFSM42RT2KYA .

[smp]

LGTM, thanks for the contribution @shamikatamazon !

[nathanagez]

Awesome @shamikatamazon, thank you for the contribution!

[djsjr]

New docs really helped! I notice there isn't much direction on appending the token to each segment after the initial m3u8 is obtained. The docs just notes that this must be done.

I'm using flutter, which is essentially a black box when it comes to video playing. I can only give it the initial m3u8 URL (after appending the token like in the example code in docs) – so naturally my signed URL videos aren't playing. Any suggestions are how to systematically append the token to each segment in this case?

[wizage]

@djsjr

It depends on the player you are using. I am not familiar with the default player on Flutter. But most players contain a way to append to every request with headers/url changes.

So for example in Javascript using VideoJs:

videojs.Hls.xhr.beforeRequest = function (options) {
      options.uri = `${options.uri}${videojs.getAllPlayers()[0].options().token}`;
      return options;
};

We pass the token we get for the url and add it to every .m3u8 and .ts request going through the video player.

[djsjr]

The standard flutter video plugin can be initialized with http headers. Not sure if this is on the right track since I've never worked with http requests and video streaming before.

    _videoPlayerController = VideoPlayerController.network(url, 
            httpHeaders: {HttpHeaders.authorizationHeader: token});

(where the url is the cloudfront address as a string and the token is a String generated from an API query.) It's not working as-is however. Maybe someone with flutter experience can offer some insight as well.

[djsjr]

Perhaps giving the option of using signed cookies would allow flutter users to make use of the protected content feature since the video player can take http headers as an argument.

Right now I do not think it is possible to restrict access to content without some serious work on the part of the user given the lack of flexibility with the flutter video player package.