Pocket Authentication with OAuth on Firefox OS

471 views

Published on

What to do before using Pocket API on Firefox OS.

The following link is a Pocket client on Firefox OS. Github repo: https://github.com/KuoE0/FoxPocket

Published in: Technology
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
471
On SlideShare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
7
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

Pocket Authentication with OAuth on Firefox OS

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

×