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

1. Pocket Authentication
with OAuth on Firefox OS
Mozilla Taiwan
Tommy Kuo [:KuoE0]
kuoe0@mozilla.com

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. Requirement
REQUIRED:
- consumer_key
- access_token
Pocket API

4. Get consumer_key from
https://getpocket.com/developer/apps/new.

5. Get access_token with Pocket Authentication API.
https://getpocket.com/developer/docs/authentication

6. Authenticate with Pocket account

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. Step 1. Obtain request_token.
Use consumer_key and redirect_uri to register and
obtain a request_token.

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. post
https://getpocket.com/v3/oauth/request
consumer_key
redirect_uri{ }request_token

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. 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. We need to open the page to
let user login and authorize.
https://getpocket.com/auth/authorize?
request_token=xxx&redirect_uri=yyy

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. 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. open
https://getpocket.com/auth/authorize?
request_token=x&redirect_uri=y
mozbrowserlocationchange
location == redirect_uri
when
close
<iframe mozbrowser>
</iframe>

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. Step 3. Convert request_token into access_token.
Use the consumer_key and the authenticated
request_token to obtain access_token.

19. post
https://getpocket.com/v3/oauth/authorize
access_token
Convert the request_token into the access_token.
consumer_key
request_token{ }

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. Authenticate with Firefox account

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. 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. 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. open
https://getpocket.com/auth/authorize?
request_token=x&redirect_uri=y
mozbrowserlocationchange
Choose “Log in with Firefox”
click <iframe mozbrowser>
</iframe>

26. open
mozbrowserlocationchange
<iframe mozbrowser>
</iframe>
https://accounts.firefox.com/oauth/
signin?client_id=x&state=y&scope=z

27. open
mozbrowserlocationchange
<iframe mozbrowser>
</iframe>
https://accounts.firefox.com/oauth/
signin?client_id=x&state=y&scope=z
redirect_uri is missing

28. open
mozbrowserlocationchange
<iframe mozbrowser>
</iframe>
https://accounts.firefox.com/oauth/
signin?client_id=x&state=y&scope=z
redirect_uri is missing

29. open
mozbrowserlocationchange
<iframe mozbrowser>
</iframe>
https://getpocket.com/a/
redirect to Pocket

30. open
mozbrowserlocationchange
<iframe mozbrowser>
</iframe>
https://getpocket.com/a/
redirect to Pocket
redirect to Pocket
when
close

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. _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. _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. 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. open
https://getpocket.com/auth/authorize?
request_token=x&redirect_uri=y
mozbrowserlocationchange
location == redirect_uri
when
close
<iframe mozbrowser>
</iframe>

36. Thanks.