Como uso o OAuth de um aplicativo do Ubuntu Touch?

Question

Estou escrevendo um aplicativo do Ubuntu Touch no QML. Eu gostaria de me integrar ao Trello. Há duas maneiras de fazer login no Trello na API, uma das quais é o OAuth, que planejo usar. Qual é a melhor maneira de fazer isso a partir do QML? Eu preferiria não usar um backend de C ++, mas estou disposto a fazê-lo se esse for o único caminho.

    

Answer 1

Você pode criar um plug-in de conta para o Trello, de modo que uma conta Trello possa ser criada a partir do painel "Conta Online" nas Configurações do Sistema. Você poderia usar o módulo QML do Ubuntu.OnlineAccounts para fazer login, assim:

import QtQuick 2.0
import Ubuntu.OnlineAccounts 0.1

Rectangle {
    width: 400
    height: 300

    AccountServiceModel {
        id: accounts
        service: "trello-board"
    }
    ListView {
        id: listView
        anchors.fill: parent
        model: accounts
        delegate: Item {
            width: parent.width
            height: 60
            AccountService { 
                id: accts
                objectHandle: accountServiceHandle
                onAuthenticated: { console.log("Access token is " + reply.AccessToken) }
                onAuthenticationError: { console.log("Authentication failed, code " + error.code) }
            }    
            Text {
                anchors.fill: parent
                text: providerName + ": " + displayName
                MouseArea {
                    anchors.fill: parent
                    onClicked: accts.authenticate(null)
                }
            }
        }
    }
}

Este código fornecerá o token OAuth. Para criar a conta em primeiro lugar, você precisa criar os seguintes arquivos:

• /usr/share/accounts/providers/trello.provider
• /usr/share/accounts/services/trello-board.service
• /usr/share/accounts/qml-plugins/trello/Main.qml

Dado que o Trello usa o OAuth 1.0 como o Flickr e o Twitter, basta criar os arquivos acima usando a versão do twitter ou do flickr como modelo e modificá-los conforme necessário (para o arquivo .service, você pode usar flickr-sharing.service ); Em trello.provider , você precisará alterar os pontos de extremidade da API da seguinte forma:

<setting name="RequestEndpoint">https://trello.com/1/OAuthGetRequestToken</setting>
<setting name="TokenEndpoint">https://trello.com/1/OAuthGetAccessToken</setting>
<setting name="AuthorizationEndpoint">https://trello.com/1/OAuthAuthorizeToken</setting>

E, claro, altere os outros campos (URL de retorno de chamada, ID do cliente e segredo) para corresponder aos que você definiu ao registrar seu aplicativo no Trello. Se tudo correr bem, você poderá criar uma conta Trello no painel "Contas on-line" nas Configurações do sistema.

    

Answer 2

Como a abordagem que o mardy usa não está realmente disponível para aplicativos em confinamento no Ubuntu Touch, é necessário fazer o OAuth dançar sozinho. Essencialmente, você precisa carregar a página de login em WebView e depois interceptar a resposta usando o sinal onUrlChanged para extrair o token de autenticação. Veja abaixo um exemplo usando a implementação OAuth do StackExchange .

Em OAuth.qml :

import QtQuick 2.0
import QtWebKit 3.0
import "OAuth.js" as OAuth

Rectangle {
    height: 750
    width: 500

    Text {
        id: nextState
        visible: false
        anchors.centerIn: parent
        text: "Log in successful!"
    }

    Item {
        id: stackOAuth
        property string nextState: "AuthDone"
        anchors.fill: parent
        Component.onCompleted: OAuth.checkToken()
        property string token: ""
        WebView {
            id: loginView
            visible: false
            anchors.fill: parent
            onUrlChanged: OAuth.urlChanged(url)
        }
        Rectangle {
            height: 50
            width: parent.width
            anchors.left: parent.left
            anchors.right: parent.right
            anchors.bottom: parent.bottom
            Text {
                text: loginView.url
            }
        }

        states: [
            State {
                name: "Login"
                PropertyChanges {
                    target: loginView
                    visible: true
                    url: "https://stackexchange.com/oauth/dialog"+
                         "?redirect_uri=https://stackexchange.com/oauth/login_success"+
                         "&client_id=YOUR_CLIENT_ID&scope=read_inbox"
                }
            },
            State {
                name: "AuthDone"
                PropertyChanges {
                    target: loginView
                    visible: false
                    opacity: 0
                }
                PropertyChanges {
                    target: nextState
                    visible: true
                }
            }
        ]
    }
}

Em seguida, em OAuth.js , você tem o código para extrair o token da url e o handel armazenando / verificando-o de seu banco de dados:

.import QtQuick.LocalStorage 2.0 as Sql

function urlChanged(url) {
    var authorized = false;
    var mUrl = url.toString();
    var token = "";
    if (mUrl.indexOf("https://stackexchange.com") > -1) {
        var query = mUrl.substring(mUrl.indexOf('#') + 1);
        var vars = query.split("&");
        for (var i=0;i<vars.length;i++) {
            var pair = vars[i].split("=");
            if (pair[0] == "access_token") {
                authorized = true;
                token = pair[1];
                console.log("Found token: " + token)
                saveToken(token);
            }
        }
    }
    if (authorized) {
        stackOAuth.token = token;
        stackOAuth.state = "AuthDone";
    }
}

function saveToken(token) {
    console.log("Saving...")
    var db = Sql.LocalStorage.openDatabaseSync("Token", "1.0", "the token", 1);
    var dataStr = "INSERT INTO Token VALUES(?)";
    var data = [token];
    db.transaction(function(tx) {
        tx.executeSql('CREATE TABLE IF NOT EXISTS Token(token TEXT)');
        tx.executeSql(dataStr, data);
    });
}

function checkToken() {
    var db = Sql.LocalStorage.openDatabaseSync("Token", "1.0", "the token", 1);
    var dataStr = "SELECT * FROM Token";
    db.transaction(function(tx) {
        tx.executeSql('CREATE TABLE IF NOT EXISTS Token(token TEXT)');
        var rs = tx.executeSql(dataStr);
        if (rs.rows.item(0)) {
            stackOAuth.token = rs.rows.item(0).token
            stackOAuth.state = "AuthDone"
            console.log("Auth done...")
        } else {
            stackOAuth.state = "Login"
            console.log("Logging in....")
        }
    });
}

Este exemplo é (mais ou menos) uma porta do exemplo antigo do QtQuick 1.0 da Nokia para o QtQuick 2.0 .