Javascript tutorial for Encryption API #67

vivekmore · 2019-08-15T13:21:14Z

https://docs.google.com/document/d/1776ZeKdIEF3j1m1ArB0xiJndOsaJMMmRHHXoO9eiMMw/edit

SimonWoolf · 2019-08-22T09:02:41Z

example.html

+    }
+
+    Ably.Realtime.Crypto.generateRandomKey(function (err, key) {
+        var cipherParams = Ably.Realtime.Crypto.getDefaultParams({key: key});


Not sure why you're using the long way here (getDefaultParams when you used the short way ({ cipher: { key: key } }) in the nodejs tutorial? We should use the short way in both.

Ah - sorry for the inconsistency; my intention was to see which one would be preferable in a tutorial.
One has the benefit of being less code and succinct, while other let's the reader know about Ably.Realtime.Crypto.getDefaultParams()

I'll make the code consistent by keeping the short version

SimonWoolf · 2019-08-22T09:09:02Z

example.html

+
+    function createChannel(channelName, channelOpts) {
+        var realtime = new Ably.Realtime(apiKey);
+        return realtime.channels.get(channelName, channelOpts);


I see why you've done it this way (so the publisher and subscriber get different Realtime instances so it's more of a real test), but still, I think this could well mislead someone into believing they should be creating a new Realtime instance for each channel they use (especially given the method name), which would be a big problem. I think the way you did it in the nodejs tutorial is better (just creating one Realtime instance at the top and using that).

Makes sense. I was on the fence doing it this way too.
I'll update this.

SimonWoolf · 2019-08-22T09:10:46Z

example.html

+</body>
+
+<!-- Include the latest Ably Library  -->
+<script src="https://cdn.ably.io/lib/ably.min.js"></script>


That is not the latest ably library, that's 0.8. The latest is at ably.min-1.js.
(Did you copy this from another tutorial? If so, please let us know so @tomczoink or @Srushtika can fix it)

Yes I believe I used https://github.com/ably/tutorials/blob/history-javascript/example.html as a reference

Thanks - @tomczoink could you make sure that tutorial is updated, and check for any others that use ably.min.js or ably.js?

SimonWoolf · 2019-08-22T09:11:18Z

main.js

+        resultArea.value += ('Presence Subscribers: ' + occupancyMetrics.presenceSubscribers + ' \n')
+        resultArea.scrollTop = resultArea.scrollHeight;
+    }
+})


Did you mean to include this file? This isn't a tutorial on channel occupancy events

no I did not. I'll remove this.

vivekmore · 2019-08-22T12:10:53Z

I believe I have addressed comments;, Kindly let me know if I missed anything.

SimonWoolf · 2019-09-09T16:55:09Z

subscriber.html

+            key: [
+                1554178354, 192577227, 772660949, -2115679804,
+                1890741037, 2046217291, 703998164, -644134120
+            ]


The key here should be either an ArrayBuffer (e.g. created using new Uint32Array([1554178354, ...]).buffer) or a base64 string (e.g. "W29iamVjdCBBcnJheUJ1ZmZlcl0="). An array of ints may happen to work at the moment due to how ably-js browserside works with buffers right now, but isn't a supported type and isn't guaranteed to work in future.

For a tutorial probably best to use a base64 string, it's easy and works in all browsers.

I've updated the code to use a base64 string as the cipher key

Srushtika

Two small comments:

Could you please add a comment in both files to say that you can generate the key with the utility function provided by ably, but we have embedded one explicitly here for simplicity?
Retain the README file and add this project specific info please + mention that other tutorials are available in the same repo but in different branches.

Apart from that, it looks good to be merged in, thanks!

vivekmore · 2019-09-12T15:00:19Z

Will do.

Just for my understanding how would one use the Ably's generateRandomKey() utility in a real world application (and share a key between publisher and subscriber)

Srushtika · 2019-09-12T15:04:44Z

Will do.

Just for my understanding how would one use the Ably's generateRandomKey() utility in a real world application (and share a key between publisher and subscriber)

We can't say, it's really upto them (our customers). They could set up any kind of secure system to share their keys internally.

vivekmore · 2019-09-12T15:11:48Z

understood

vivekmore · 2019-09-12T15:33:21Z

Could you please add a comment in both files to say that you can generate the key with the utility function provided by ably, but we have embedded one explicitly here for simplicity?

Retain the README file and add this project specific info please + mention that other tutorials are available in the same repo but in different branches.

I've addressed the review comments in javascript PR.
Please let me know and I'll update the nodejs PR right away.

Srushtika · 2019-09-12T15:41:57Z

publisher.html

+
+    /* Create options object with cipher(encryption) configuration */
+    // Note: A sample cipher key is provided here for simplicity.
+    // Alternatively, one could use Ably.Realtime.Crypto.generateRandomKey()


// Note: A sample cipher key is provided here for simplicity.
// Alternatively, one could use Ably.Realtime.Crypto.generateRandomKey()
=>
/* Note: A sample cipher key is provided here for simplicity. Alternatively, one could use the Ably.Realtime.Crypto.generateRandomKey() utility method to generate a valid key */

Srushtika · 2019-09-12T15:57:18Z

README.md

@@ -6,6 +6,8 @@

 This repository contains the working code for many of the [Ably tutorials](https://www.ably.io/tutorials).

+This branch contains the working code for the [Encryption Tutorial](https://www.ably.io/tutorials/encryption).


This branch contains a sample app for implementing encryption in an Ably app. There is also a detailed step-by-step tutorial to follow along.

Srushtika · 2019-09-12T16:35:26Z

publisher.html

+    var channelName = 'encrypted:messages';
+
+    /* Create options object with cipher(encryption) configuration */
+    /* Note: A sample cipher key is provided here for simplicity.


Looks like this isn't updated.

updated now, (also updated it in subscriber.html)

vivekmore · 2019-09-13T11:50:00Z

Kindly create tags as below

encryption-javascript-step2
encryption-javascript-step3
encryption-javascript-step4

SimonWoolf reviewed Aug 22, 2019

View reviewed changes

vivekmore force-pushed the encryption-javascript branch 2 times, most recently from 4022523 to cb04240 Compare August 22, 2019 12:07

SimonWoolf mentioned this pull request Sep 6, 2019

Fix tutorials that reference very old versions of client libs #70

Open

vivekmore force-pushed the encryption-javascript branch 2 times, most recently from 943ae6e to c715f04 Compare September 7, 2019 23:14

SimonWoolf reviewed Sep 9, 2019

View reviewed changes

vivekmore force-pushed the encryption-javascript branch 2 times, most recently from 9490df4 to be96da4 Compare September 9, 2019 21:08

Srushtika self-requested a review September 12, 2019 11:20

Srushtika approved these changes Sep 12, 2019

View reviewed changes

vivekmore force-pushed the encryption-javascript branch from be96da4 to 2edd38d Compare September 12, 2019 15:32

Srushtika reviewed Sep 12, 2019

View reviewed changes

vivekmore force-pushed the encryption-javascript branch from 2edd38d to 49f5bc1 Compare September 12, 2019 15:52

Srushtika reviewed Sep 12, 2019

View reviewed changes

vivekmore added 2 commits September 12, 2019 12:02

Initial commit

302ba12

Step 2 - Install Ably

c5530de

vivekmore force-pushed the encryption-javascript branch from 49f5bc1 to 9c65e4e Compare September 12, 2019 16:03

Srushtika reviewed Sep 12, 2019

View reviewed changes

vivekmore added 2 commits September 12, 2019 13:31

Step 3 - Publish encrypted messages

a2696bf

Step 4 - Retrieve encrypted messages

9034f01

vivekmore force-pushed the encryption-javascript branch from 9c65e4e to 9034f01 Compare September 12, 2019 17:31

Srushtika merged commit 718ae34 into ably:encryption-javascript Sep 13, 2019

vivekmore deleted the encryption-javascript branch September 13, 2019 11:31

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Javascript tutorial for Encryption API #67

Javascript tutorial for Encryption API #67

vivekmore commented Aug 15, 2019

SimonWoolf Aug 22, 2019

vivekmore Aug 22, 2019

SimonWoolf Aug 22, 2019

vivekmore Aug 22, 2019

SimonWoolf Aug 22, 2019

vivekmore Aug 22, 2019

SimonWoolf Aug 22, 2019

SimonWoolf Aug 22, 2019

vivekmore Aug 22, 2019

vivekmore commented Aug 22, 2019 •

edited

SimonWoolf Sep 9, 2019

vivekmore Sep 9, 2019

Srushtika left a comment •

edited

vivekmore commented Sep 12, 2019

Srushtika commented Sep 12, 2019 •

edited

vivekmore commented Sep 12, 2019

vivekmore commented Sep 12, 2019

Srushtika Sep 12, 2019

Srushtika Sep 12, 2019

Srushtika Sep 12, 2019

vivekmore Sep 12, 2019

vivekmore commented Sep 13, 2019

		@@ -6,6 +6,8 @@

		This repository contains the working code for many of the [Ably tutorials](https://www.ably.io/tutorials).

		This branch contains the working code for the [Encryption Tutorial](https://www.ably.io/tutorials/encryption).

Javascript tutorial for Encryption API #67

Javascript tutorial for Encryption API #67

Conversation

vivekmore commented Aug 15, 2019

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

vivekmore commented Aug 22, 2019 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Srushtika left a comment • edited

Choose a reason for hiding this comment

vivekmore commented Sep 12, 2019

Srushtika commented Sep 12, 2019 • edited

vivekmore commented Sep 12, 2019

vivekmore commented Sep 12, 2019

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

vivekmore commented Sep 13, 2019

vivekmore commented Aug 22, 2019 •

edited

Srushtika left a comment •

edited

Srushtika commented Sep 12, 2019 •

edited