pocket authentication with oauth on firefox os

36
Pocket Authentication with OAuth on Firefox OS Mozilla Taiwan Tommy Kuo [:KuoE0] [email protected]

Upload: chih-hsuan-kuo

Post on 13-Apr-2017

538 views

Category:

Technology


2 download

TRANSCRIPT

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

Requirement

REQUIRED: - consumer_key - access_token

Pocket API

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

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

Authenticate with Pocket account

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.

Authenticate with Firefox account

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>

Thanks.