This repository was archived by the owner on Jul 18, 2023. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 6
Expand file tree
/
Copy pathtutorial.html
More file actions
89 lines (82 loc) · 19.6 KB
/
Copy pathtutorial.html
File metadata and controls
89 lines (82 loc) · 19.6 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
<!DOCTYPE html> <html> <head> <title>tutorial.js</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <link rel="stylesheet" media="all" href="docco.css" /> </head> <body> <div id="container"> <div id="background"></div> <table cellpadding="0" cellspacing="0"> <thead> <tr> <th class="docs"> <h1> tutorial.js </h1> </th> <th class="code"> </th> </tr> </thead> <tbody> <tr id="section-1"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-1">¶</a> </div> <h2>Accepting remoteStorage accounts in your web app</h2> </td> <td class="code"> <div class="highlight"><pre><span class="kd">var</span> <span class="nx">tutorial</span> <span class="o">=</span> <span class="p">(</span><span class="kd">function</span><span class="p">()</span> <span class="p">{</span></pre></div> </td> </tr> <tr id="section-2"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-2">¶</a> </div> <p><code>getStorageInfo</code> takes a user address ("user@host") and a callback as its
arguments. The callback will get an error code, and a <code>storageInfo</code>
object. If the error code is <code>null</code>, then the <code>storageInfo</code> object will
contain data required to access the remoteStorage.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="kd">function</span> <span class="nx">connect</span><span class="p">(</span><span class="nx">userAddress</span><span class="p">,</span> <span class="nx">callback</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">remoteStorage</span><span class="p">.</span><span class="nx">getStorageInfo</span><span class="p">(</span><span class="nx">userAddress</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">error</span><span class="p">,</span> <span class="nx">storageInfo</span><span class="p">)</span> <span class="p">{</span>
<span class="k">if</span><span class="p">(</span><span class="nx">error</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">alert</span><span class="p">(</span><span class="s1">'Could not load storage info'</span><span class="p">);</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">error</span><span class="p">);</span>
<span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">'Storage info received:'</span><span class="p">);</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">storageInfo</span><span class="p">);</span>
<span class="p">}</span>
<span class="nx">callback</span><span class="p">(</span><span class="nx">error</span><span class="p">,</span> <span class="nx">storageInfo</span><span class="p">);</span>
<span class="p">});</span>
<span class="p">}</span></pre></div> </td> </tr> <tr id="section-3"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-3">¶</a> </div> <p>Getting data from the "public" category doesn't require any credentials.
For writing to a user's public data, or reading/writing any of the other
categories, we need to do an OAuth request first to obtain a token.</p> </td> <td class="code"> <div class="highlight"><pre></pre></div> </td> </tr> <tr id="section-4"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-4">¶</a> </div> <p>This method opens a popup that sends the user to the OAuth dialog of the
remoteStorage provider.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="kd">function</span> <span class="nx">authorize</span><span class="p">(</span><span class="nx">categories</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">storageInfo</span> <span class="o">=</span> <span class="nx">JSON</span><span class="p">.</span><span class="nx">parse</span><span class="p">(</span><span class="nx">localStorage</span><span class="p">.</span><span class="nx">getItem</span><span class="p">(</span><span class="s1">'userStorageInfo'</span><span class="p">));</span>
<span class="kd">var</span> <span class="nx">redirectUri</span> <span class="o">=</span> <span class="nx">location</span><span class="p">.</span><span class="nx">protocol</span> <span class="o">+</span> <span class="s1">'//'</span> <span class="o">+</span> <span class="nx">location</span><span class="p">.</span><span class="nx">host</span> <span class="o">+</span> <span class="s1">'/receive_token.html'</span><span class="p">;</span></pre></div> </td> </tr> <tr id="section-5"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-5">¶</a> </div> <p><code>createOAuthAddress</code> takes the <code>storageInfo</code>, the categories that we
intend to access and a redirect URI that the storage provider sends the
user back to after authorization.
That page extracts the token and sends it back to us, which is
<a href="token.html">described here</a>.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="kd">var</span> <span class="nx">oauthPage</span> <span class="o">=</span> <span class="nx">remoteStorage</span><span class="p">.</span><span class="nx">createOAuthAddress</span><span class="p">(</span><span class="nx">storageInfo</span><span class="p">,</span> <span class="nx">categories</span><span class="p">,</span> <span class="nx">redirectUri</span><span class="p">);</span>
<span class="kd">var</span> <span class="nx">popup</span> <span class="o">=</span> <span class="nb">window</span><span class="p">.</span><span class="nx">open</span><span class="p">(</span><span class="nx">oauthPage</span><span class="p">);</span>
<span class="p">}</span></pre></div> </td> </tr> <tr id="section-6"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-6">¶</a> </div> <p>To get the OAuth token we listen for the <code>message</code> event from the
receive_token.html that sends it back to us.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nb">window</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="s1">'message'</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">event</span><span class="p">)</span> <span class="p">{</span>
<span class="k">if</span><span class="p">(</span><span class="nx">event</span><span class="p">.</span><span class="nx">origin</span> <span class="o">==</span> <span class="nx">location</span><span class="p">.</span><span class="nx">protocol</span> <span class="o">+</span><span class="s1">'//'</span><span class="o">+</span> <span class="nx">location</span><span class="p">.</span><span class="nx">host</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">'Received an OAuth token: '</span> <span class="o">+</span> <span class="nx">event</span><span class="p">.</span><span class="nx">data</span><span class="p">);</span>
<span class="nx">localStorage</span><span class="p">.</span><span class="nx">setItem</span><span class="p">(</span><span class="s1">'bearerToken'</span><span class="p">,</span> <span class="nx">event</span><span class="p">.</span><span class="nx">data</span><span class="p">);</span>
<span class="nx">helper</span><span class="p">.</span><span class="nx">setAuthorizedState</span><span class="p">(</span><span class="kc">true</span><span class="p">);</span>
<span class="p">}</span>
<span class="p">},</span> <span class="kc">false</span><span class="p">);</span></pre></div> </td> </tr> <tr id="section-7"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-7">¶</a> </div> <p>To get data from the remoteStorage, we need to create a client with
the <code>createClient</code> method. It takes the object that we got via the
<code>getStorageInfo</code> call and the category we want to access. If the
category is any other than "public", we also have to provide the OAuth
token.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="kd">function</span> <span class="nx">getData</span><span class="p">(</span><span class="nx">category</span><span class="p">,</span> <span class="nx">key</span><span class="p">,</span> <span class="nx">callback</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">storageInfo</span> <span class="o">=</span> <span class="nx">JSON</span><span class="p">.</span><span class="nx">parse</span><span class="p">(</span><span class="nx">localStorage</span><span class="p">.</span><span class="nx">getItem</span><span class="p">(</span><span class="s1">'userStorageInfo'</span><span class="p">));</span>
<span class="kd">var</span> <span class="nx">client</span><span class="p">;</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">category</span> <span class="o">==</span> <span class="s1">'public'</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">client</span> <span class="o">=</span> <span class="nx">remoteStorage</span><span class="p">.</span><span class="nx">createClient</span><span class="p">(</span><span class="nx">storageInfo</span><span class="p">,</span> <span class="s1">'public'</span><span class="p">);</span>
<span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">token</span> <span class="o">=</span> <span class="nx">localStorage</span><span class="p">.</span><span class="nx">getItem</span><span class="p">(</span><span class="s1">'bearerToken'</span><span class="p">);</span>
<span class="nx">client</span> <span class="o">=</span> <span class="nx">remoteStorage</span><span class="p">.</span><span class="nx">createClient</span><span class="p">(</span><span class="nx">storageInfo</span><span class="p">,</span> <span class="nx">category</span><span class="p">,</span> <span class="nx">token</span><span class="p">);</span>
<span class="p">}</span></pre></div> </td> </tr> <tr id="section-8"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-8">¶</a> </div> <p>The client's <code>get</code> method takes a key and a callback. The callback will
be invoked with an error code and the data.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">client</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="nx">key</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">error</span><span class="p">,</span> <span class="nx">data</span><span class="p">)</span> <span class="p">{</span>
<span class="k">if</span><span class="p">(</span><span class="nx">error</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">alert</span><span class="p">(</span><span class="s1">'Could not find "'</span> <span class="o">+</span> <span class="nx">key</span> <span class="o">+</span> <span class="s1">'" in category "'</span> <span class="o">+</span> <span class="nx">category</span> <span class="o">+</span> <span class="s1">'" on the remoteStorage'</span><span class="p">);</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">error</span><span class="p">);</span>
<span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">data</span> <span class="o">==</span> <span class="kc">undefined</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">'There wasn\'t anything for "'</span> <span class="o">+</span> <span class="nx">key</span> <span class="o">+</span> <span class="s1">'" in category "'</span> <span class="o">+</span> <span class="nx">category</span> <span class="o">+</span> <span class="s1">'"'</span><span class="p">);</span>
<span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">'We received this for key "'</span> <span class="o">+</span> <span class="nx">key</span> <span class="o">+</span> <span class="s1">'" in category "'</span> <span class="o">+</span> <span class="nx">category</span> <span class="o">+</span> <span class="s1">'": '</span> <span class="o">+</span> <span class="nx">data</span><span class="p">);</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="nx">callback</span><span class="p">(</span><span class="nx">error</span><span class="p">,</span> <span class="nx">data</span><span class="p">);</span>
<span class="p">});</span>
<span class="p">}</span></pre></div> </td> </tr> <tr id="section-9"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-9">¶</a> </div> <p>For saving data we use the client's <code>put</code> method. It takes a key, the
value and a callback. The callback will be called with an error code,
which is <code>null</code> on success.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="kd">function</span> <span class="nx">putData</span><span class="p">(</span><span class="nx">category</span><span class="p">,</span> <span class="nx">key</span><span class="p">,</span> <span class="nx">value</span><span class="p">,</span> <span class="nx">callback</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">storageInfo</span> <span class="o">=</span> <span class="nx">JSON</span><span class="p">.</span><span class="nx">parse</span><span class="p">(</span><span class="nx">localStorage</span><span class="p">.</span><span class="nx">getItem</span><span class="p">(</span><span class="s1">'userStorageInfo'</span><span class="p">));</span>
<span class="kd">var</span> <span class="nx">token</span> <span class="o">=</span> <span class="nx">localStorage</span><span class="p">.</span><span class="nx">getItem</span><span class="p">(</span><span class="s1">'bearerToken'</span><span class="p">);</span>
<span class="kd">var</span> <span class="nx">client</span> <span class="o">=</span> <span class="nx">remoteStorage</span><span class="p">.</span><span class="nx">createClient</span><span class="p">(</span><span class="nx">storageInfo</span><span class="p">,</span> <span class="nx">category</span><span class="p">,</span> <span class="nx">token</span><span class="p">);</span>
<span class="nx">client</span><span class="p">.</span><span class="nx">put</span><span class="p">(</span><span class="nx">key</span><span class="p">,</span> <span class="nx">value</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">error</span><span class="p">)</span> <span class="p">{</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">error</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">alert</span><span class="p">(</span><span class="s1">'Could not store "'</span> <span class="o">+</span> <span class="nx">key</span> <span class="o">+</span> <span class="s1">'" in "'</span> <span class="o">+</span> <span class="nx">category</span> <span class="o">+</span> <span class="s1">'" category'</span><span class="p">);</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">error</span><span class="p">);</span>
<span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">'Stored "'</span> <span class="o">+</span> <span class="nx">value</span> <span class="o">+</span> <span class="s1">'" for key "'</span> <span class="o">+</span> <span class="nx">key</span> <span class="o">+</span> <span class="s1">'" in "'</span> <span class="o">+</span> <span class="nx">category</span> <span class="o">+</span> <span class="s1">'" category'</span><span class="p">);</span>
<span class="p">}</span>
<span class="nx">callback</span><span class="p">(</span><span class="nx">error</span><span class="p">);</span>
<span class="p">});</span>
<span class="p">}</span></pre></div> </td> </tr> <tr id="section-10"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-10">¶</a> </div> <p>Now all that's left is to bind the events from the UI elements to
these actions, as can be seen <a href="app.html">here</a>.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">return</span> <span class="p">{</span>
<span class="nx">connect</span><span class="o">:</span> <span class="nx">connect</span><span class="p">,</span>
<span class="nx">authorize</span><span class="o">:</span> <span class="nx">authorize</span><span class="p">,</span>
<span class="nx">getData</span><span class="o">:</span> <span class="nx">getData</span><span class="p">,</span>
<span class="nx">putData</span><span class="o">:</span> <span class="nx">putData</span><span class="p">,</span>
<span class="p">};</span>
<span class="p">})();</span>
</pre></div> </td> </tr> </tbody> </table> </div> </body> </html>