Upload
chih-hsuan-kuo
View
543
Download
2
Embed Size (px)
Citation preview
Pocket Authentication with OAuth on Firefox OS
Mozilla Taiwan Tommy Kuo [:KuoE0] [email protected]
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
Get consumer_key from https://getpocket.com/developer/apps/new.
Get access_token with Pocket Authentication API. https://getpocket.com/developer/docs/authentication
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.
Step 1. Obtain request_token.
Use consumer_key and redirect_uri to register and obtain a request_token.
Step 1. Obtain request_token.
Use consumer_key and redirect_uri to register and obtain a request_token.
The URI to redirect after authentication.
post
https://getpocket.com/v3/oauth/request
consumer_key redirect_uri{ }request_token
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);
}
);
}
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.
We need to open the page to let user login and authorize.
https://getpocket.com/auth/authorize?request_token=xxx&redirect_uri=yyy
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 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.
open
https://getpocket.com/auth/authorize?request_token=x&redirect_uri=y
mozbrowserlocationchange
location == redirect_uri
when
close
<iframe mozbrowser>
</iframe>
_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);
}
Step 3. Convert request_token into access_token.
Use the consumer_key and the authenticated request_token to obtain access_token.
post
https://getpocket.com/v3/oauth/authorize
access_token
Convert the request_token into the access_token.
consumer_key request_token{ }
_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.
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.
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.
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.
open
https://getpocket.com/auth/authorize?request_token=x&redirect_uri=y
mozbrowserlocationchange
Choose “Log in with Firefox”
click <iframe mozbrowser>
</iframe>
open
mozbrowserlocationchange
<iframe mozbrowser>
</iframe>
https://accounts.firefox.com/oauth/signin?client_id=x&state=y&scope=z
open
mozbrowserlocationchange
<iframe mozbrowser>
</iframe>
https://accounts.firefox.com/oauth/signin?client_id=x&state=y&scope=z
redirect_uri is missing
open
mozbrowserlocationchange
<iframe mozbrowser>
</iframe>
https://accounts.firefox.com/oauth/signin?client_id=x&state=y&scope=z
redirect_uri is missing
open
mozbrowserlocationchange
<iframe mozbrowser>
</iframe>
https://getpocket.com/a/
redirect to Pocket
open
mozbrowserlocationchange
<iframe mozbrowser>
</iframe>
https://getpocket.com/a/
redirect to Pocket
redirect to Pocket
when
close
_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);
_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
_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 inAuthenticate again!
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.
open
https://getpocket.com/auth/authorize?request_token=x&redirect_uri=y
mozbrowserlocationchange
location == redirect_uri
when
close
<iframe mozbrowser>
</iframe>