Pocket Authentication with OAuth on Firefox OS

  • Published on
    13-Apr-2017

  • View
    518

  • Download
    1

Transcript

<ul><li><p>Pocket Authentication with OAuth on Firefox OS</p><p>Mozilla Taiwan Tommy Kuo [:KuoE0] kuoe0@mozilla.com</p><p>mailto:kuoe0@mozilla.com</p></li><li><p>Pocket Manipulation API Add API </p><p>https://getpocket.com/developer/docs/v3/add </p><p> Modify API https://getpocket.com/developer/docs/v3/modify </p><p> Retrieve API https://getpocket.com/developer/docs/v3/retrieve</p><p>https://getpocket.com/developer/docs/v3/addhttps://getpocket.com/developer/docs/v3/modifyhttps://getpocket.com/developer/docs/v3/retrieve</p></li><li><p>Requirement</p><p>REQUIRED: - consumer_key - access_token</p><p>Pocket API</p></li><li><p>Get consumer_key from https://getpocket.com/developer/apps/new.</p><p>https://getpocket.com/developer/apps/new</p></li><li><p>Get access_token with Pocket Authentication API. https://getpocket.com/developer/docs/authentication</p><p>https://getpocket.com/developer/docs/authentication</p></li><li><p>Authenticate with Pocket account</p></li><li><p>Steps: </p><p>1. Obtain request_token. </p><p>2. Login &amp; authenticate with request_token. </p><p>3. Convert request_token into access_token. </p><p>P.S. </p><p>1. Must be done over HTTPS. </p><p>2. Must be POST method.</p></li><li><p>Step 1. Obtain request_token.</p><p>Use consumer_key and redirect_uri to register and obtain a request_token.</p></li><li><p>Step 1. Obtain request_token.</p><p>Use consumer_key and redirect_uri to register and obtain a request_token.</p><p>The URI to redirect after authentication.</p></li><li><p>post</p><p>https://getpocket.com/v3/oauth/request</p><p>consumer_key redirect_uri{ }request_token</p><p>https://getpocket.com/v3/oauth/request</p></li><li><p>authenticate: function(callback) { </p><p>// get request token to open authentication page </p><p>this._post( </p><p>"https://getpocket.com/v3/oauth/request", </p><p>JSON.stringify({ </p><p>consumer_key: this.CONSUMER_KEY, </p><p>redirect_uri: this.REDIRECT_URI </p><p>}), </p><p>response =&gt; { </p><p>this._openAuthenticationPage(response.code, callback); </p><p>} </p><p>); </p><p>}</p></li><li><p>Step 2. Login &amp; authenticate with request_token.</p><p>Use requset_token to open the authentication page to authenticate the request_token by user. </p><p>And the redirect_uri parameter to open authentication page must be as same as the redirect_uri to register request_token in step 1.</p></li><li><p>We need to open the page to let user login and authorize.</p><p>https://getpocket.com/auth/authorize?request_token=xxx&amp;redirect_uri=yyy</p><p>https://getpocket.com/auth/authorize?request_token=xxx&amp;redirect_uri=yyy</p></li><li><p>We need to open the page to let user login and authorize.</p><p>https://getpocket.com/auth/authorize?request_token=xxx&amp;redirect_uri=yyy</p><p>In Firefox OS, the redirect_uri can not work with the app protocol.</p><p>https://getpocket.com/auth/authorize?request_token=xxx&amp;redirect_uri=yyy</p></li><li><p>We need to open the page to let user login and authorize.</p><p>https://getpocket.com/auth/authorize?request_token=xxx&amp;redirect_uri=yyy</p><p>In Firefox OS, the redirect_uri can not work with the app protocol.</p><p>We need to close the authentication page after authentication.</p><p>https://getpocket.com/auth/authorize?request_token=xxx&amp;redirect_uri=yyy</p></li><li><p>open</p><p>https://getpocket.com/auth/authorize?request_token=x&amp;redirect_uri=y</p><p>mozbrowserlocationchange</p><p>location == redirect_uri</p><p>when</p><p>close</p><p>https://getpocket.com/auth/authorize?request_token=xxx&amp;redirect_uri=yyy</p></li><li><p>_openAuthenticationPage: function(requestToken, callback) { </p><p>var authUrl = ["https://getpocket.com/auth/authorize?request_token=", requestToken, "&amp;redirect_uri=", this.REDIRECT_URI].join(""); </p><p>var authWin = document.createElement('iframe'); </p><p>authWin.setAttribute('src', authUrl); </p><p>authWin.setAttribute('mozbrowser', true); </p><p>authWin.setAttribute('class', 'fullscreen'); </p><p>authWin.addEventListener('mozbrowserlocationchange', evt =&gt; { </p><p>var url = new URL(evt.detail); </p><p>if (url.href == this.REDIRECT_URI) { </p><p>this._getAccessToken(requestToken, callback); </p><p>document.body.removeChild(authWin); </p><p>} </p><p>}); </p><p>document.body.appendChild(authWin); </p><p>}</p></li><li><p>Step 3. Convert request_token into access_token.</p><p>Use the consumer_key and the authenticated request_token to obtain access_token.</p></li><li><p>post</p><p>https://getpocket.com/v3/oauth/authorize</p><p>access_token</p><p>Convert the request_token into the access_token.</p><p>consumer_key request_token{ }</p><p>https://getpocket.com/v3/oauth/authorize</p></li><li><p>_getAccessToken: function(requestToken, callback) { </p><p>this._post( </p><p>"https://getpocket.com/v3/oauth/authorize", </p><p>JSON.stringify({ </p><p>consumer_key: this.CONSUMER_KEY, </p><p>code: requestToken </p><p>}), </p><p>response =&gt; { </p><p>this.ACCESS_TOKEN = response.access_token; </p><p>if (callback) { </p><p>callback(); </p><p>} </p><p>} </p><p>); </p><p>}</p><p>Convert the request_token into the access_token.</p></li><li><p>Authenticate with Firefox account</p></li><li><p>Steps: </p><p>1. Obtain request_token. </p><p>2. Login with Firefox account. </p><p>3. Authenticate with request_token. </p><p>4. Convert request_token into access_token. </p><p>P.S. </p><p>1. Must be done over HTTPS. </p><p>2. Must be POST method.</p></li><li><p>Steps: </p><p>1. Obtain request_token. </p><p>2. Login with Firefox account. </p><p>3. Authenticate with request_token. </p><p>4. Convert request_token into access_token. </p><p>P.S. </p><p>1. Must be done over HTTPS. </p><p>2. Must be POST method.</p></li><li><p>Step 2. Login with Firefox account.</p><p>Log in with Firefox account. And the redirect_uri information is missing when we redirect to the Firefox account log-in page. </p><p>After Firefox account logged-in, we only let Firefox account authorize Pocket to use the data in Firefox account. </p><p>And then, this iframe will be redirected to Pocket and should be closed.</p></li><li><p>open</p><p>https://getpocket.com/auth/authorize?request_token=x&amp;redirect_uri=y</p><p>mozbrowserlocationchange</p><p>Choose Log in with Firefox</p><p>click </p><p>https://getpocket.com/auth/authorize?request_token=xxx&amp;redirect_uri=yyy</p></li><li><p>open</p><p>mozbrowserlocationchange</p><p>https://accounts.firefox.com/oauth/signin?client_id=x&amp;state=y&amp;scope=z</p><p>https://accounts.firefox.com/oauth/signin?client_id=xxx&amp;state=yyy&amp;scope=zzz</p></li><li><p>open</p><p>mozbrowserlocationchange</p><p>https://accounts.firefox.com/oauth/signin?client_id=x&amp;state=y&amp;scope=z</p><p>redirect_uri is missing</p><p>https://accounts.firefox.com/oauth/signin?client_id=xxx&amp;state=yyy&amp;scope=zzz</p></li><li><p>open</p><p>mozbrowserlocationchange</p><p>https://accounts.firefox.com/oauth/signin?client_id=x&amp;state=y&amp;scope=z</p><p>redirect_uri is missing</p><p>https://accounts.firefox.com/oauth/signin?client_id=xxx&amp;state=yyy&amp;scope=zzz</p></li><li><p>open</p><p>mozbrowserlocationchange</p><p>https://getpocket.com/a/</p><p>redirect to Pocket</p><p>https://getpocket.com/a/</p></li><li><p>open</p><p>mozbrowserlocationchange</p><p>https://getpocket.com/a/</p><p>redirect to Pocket</p><p>redirect to Pocket</p><p>when</p><p>close</p><p>https://getpocket.com/a/</p></li><li><p>_openAuthenticationPage: function(requestToken, callback) { </p><p>var authUrl = ["https://getpocket.com/auth/authorize?request_token=", requestToken, "&amp;redirect_uri=", this.REDIRECT_URI].join(""); </p><p>var authWin = document.createElement('iframe'); </p><p>authWin.setAttribute('src', authUrl); </p><p>authWin.setAttribute('mozbrowser', true); </p><p>authWin.setAttribute('class', 'fullscreen'); </p><p>authWin.addEventListener('mozbrowserlocationchange', evt =&gt; { </p><p>var url = new URL(evt.detail); </p><p>if (url.protocol + '//' + url.host + url.pathname == "https://getpocket.com/a/") { </p><p>document.body.removeChild(authWin); </p><p>this._openAuthenticationPage(requestToken, callback); </p><p>} </p><p>else if (url.href == this.REDIRECT_URI) { </p><p>this._getAccessToken(requestToken, callback); </p><p>document.body.removeChild(authWin); </p></li><li><p>_openAuthenticationPage: function(requestToken, callback) { </p><p>var authUrl = ["https://getpocket.com/auth/authorize?request_token=", requestToken, "&amp;redirect_uri=", this.REDIRECT_URI].join(""); </p><p>var authWin = document.createElement('iframe'); </p><p>authWin.setAttribute('src', authUrl); </p><p>authWin.setAttribute('mozbrowser', true); </p><p>authWin.setAttribute('class', 'fullscreen'); </p><p>authWin.addEventListener('mozbrowserlocationchange', evt =&gt; { </p><p>var url = new URL(evt.detail); </p><p>if (url.protocol + '//' + url.host + url.pathname == "https://getpocket.com/a/") { </p><p>document.body.removeChild(authWin); </p><p>this._openAuthenticationPage(requestToken, callback); </p><p>} </p><p>else if (url.href == this.REDIRECT_URI) { </p><p>this._getAccessToken(requestToken, callback); </p><p>document.body.removeChild(authWin); </p><p>After logged in</p></li><li><p>_openAuthenticationPage: function(requestToken, callback) { </p><p>var authUrl = ["https://getpocket.com/auth/authorize?request_token=", requestToken, "&amp;redirect_uri=", this.REDIRECT_URI].join(""); </p><p>var authWin = document.createElement('iframe'); </p><p>authWin.setAttribute('src', authUrl); </p><p>authWin.setAttribute('mozbrowser', true); </p><p>authWin.setAttribute('class', 'fullscreen'); </p><p>authWin.addEventListener('mozbrowserlocationchange', evt =&gt; { </p><p>var url = new URL(evt.detail); </p><p>if (url.protocol + '//' + url.host + url.pathname == "https://getpocket.com/a/") { </p><p>document.body.removeChild(authWin); </p><p>this._openAuthenticationPage(requestToken, callback); </p><p>} </p><p>else if (url.href == this.REDIRECT_URI) { </p><p>this._getAccessToken(requestToken, callback); </p><p>document.body.removeChild(authWin); </p><p>After logged inAuthenticate again!</p></li><li><p>Step 3. Authenticate with request_token.</p><p>When Pocket have been authorized by Firefox account, it means the user have already logged in Pocket. </p><p>The next step is to let Pocket authenticate the request_token. This step is as same as the step 2 to authenticate with Pocket account.</p></li><li><p>open</p><p>https://getpocket.com/auth/authorize?request_token=x&amp;redirect_uri=y</p><p>mozbrowserlocationchange</p><p>location == redirect_uri</p><p>when</p><p>close</p><p>https://getpocket.com/auth/authorize?request_token=xxx&amp;redirect_uri=yyy</p></li><li><p>Thanks.</p></li></ul>