如何使用Ubuntu online account API来创建微博HTML5应用

来源：互联网发布：js函数中定义数组编辑：程序博客网时间：2024/05/22 02:23

在这篇文章中，我们将使用Ubuntu SDK所提供的online account API来访问微博的API并显示所需要的内容。这篇文章的重点是展示如何在HTML 5中使用online account API。我们将创建一个简单的HTML 5应用。我们最终显示的画面如下：

更多关于HTML5应用开发的资料可以在地址:https://developer.ubuntu.com/en/apps/html-5/

１）创建一个最基本的应用

我们还是像以前一样使用我们的Ubuntu SDK来创建一个最基本的weibo HTML 5应用。

这样我们就创建了一个最基本的weibo HTML 5应用。你可以使用热键Ctrl + R来运行它虽然它并不能做什么事。

２）加入online account所需要的文件

我们可以参考文章来对online account API有更深的了解。为了能够访问，需要创建如下的文件：

１）weibo.application

<?xml version="1.0" encoding="UTF-8"?><application>  <description>Weibo scope</description>  <desktop-entry>weibo.ubuntu_weibo.desktop</desktop-entry>  <services>    <service id="html5-weibo.ubuntu_html5weibo">      <description>Watch your favorite Weibo messages</description>    </service>  </services></application>

２）weibo.service

<?xml version="1.0" encoding="UTF-8"?><service>  <type>sharing</type>  <name>Weibo scope</name>  <icon>html5-weibo.png</icon>  <provider>html5-weibo.ubuntu_account-plugin</provider>  <translations>unity-scope-weibo</translations></service><strong></strong>

３）创建一个plugin文件目录并在它的下面创建

　ａ）Main.qml,　它的内容为：

import Ubuntu.OnlineAccounts.Plugin 1.0OAuthMain {}

b) qml-weibo.ubuntu_plugin.provider，它的内容为：

<?xml version="1.0" encoding="UTF-8"?><provider>  <name>Weibo</name>  <icon>weibo.png</icon>  <translations>unity-scope-weibo</translations>  <plugin>generic-oauth</plugin>  <domains>.*weibo\.com</domains>  <single-account>true</single-account>  <template>    <group name="auth">      <setting name="method">oauth2</setting>      <setting name="mechanism">web_server</setting>      <group name="oauth2">        <group name="web_server">          <setting name="Host">api.weibo.com</setting>          <setting name="AuthPath">oauth2/authorize</setting>          <setting name="TokenPath">oauth2/access_token</setting>          <setting name="RedirectUri">https://api.weibo.com/oauth2/default.html</setting>          <setting name="ResponseType">code</setting>          <setting name="ClientId">Your developer key</setting>          <setting type="as" name="AllowedSchemes">['https','http']</setting>          <setting name="ClientSecret">Your developer secret</setting>          <setting name="ForceClientAuthViaRequestBody" type="b">true</setting>      </group>      </group>    </group>  </template></provider>

在上面的文件中一定要输入自己的“your developer key”及“your developer secret”。这个你需要在微博API的网站上去申请。整个文件的架构为：

4）修改manifest.json文件如下：

{    "name": "html5-weibo.ubuntu",    "description": "description of html5-weibo",    "architecture": "all",    "title": "html5-weibo",    "hooks": {        "html5weibo": {            "apparmor": "html5weibo.apparmor",            "desktop": "html5weibo.desktop",            "account-application": "weibo.application",            "account-service": "weibo.service"        },        "account-plugin": {            "account-provider": "plugin/html5-weibo.ubuntu_account-plugin.provider",            "account-qml-plugin": "plugin/qml"        }    },    "version": "0.1",    "maintainer": "XiaoGuo, Liu <xiaoguo.liu@canonical.com>",    "framework": "ubuntu-sdk-14.10"}

这里添加了account及plugin的一些设置。

５）为了能够让.service，.application及.provider文件能正常得到显示，我们对“qml-weibo.qmlproject”添加如下的东西：

    Files {        filter: "*.service"    }    Files {        filter: "*.application"    }    Files {        filter: "*.provider"    }

到这里，我们已经基本上已经修改或添加好我们所需要的文件。

３）设计应用的UI

修改我们的“index.html”文件：

<!DOCTYPE html><html><head>    <meta charset="utf-8">    <title>An Ubuntu HTML5 application</title>    <meta name="description" content="An Ubuntu HTML5 application">    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">    <!--         Application stylesheets         Include your own stylesheets below to style your application.      -->    <link rel="stylesheet" href="css/app.css" type="text/css" />    <!--         Ubuntu UI javascript imports - Ambiance theme        Ubuntu provides building blocks that you can use in your application. For more information, you can check out the documentation at http://design.ubuntu.com/apps.     -->    <!-- Ubuntu UI Style imports - Ambiance theme -->    <link href="/usr/share/ubuntu-html5-ui-toolkit/0.1/ambiance/css/appTemplate.css" rel="stylesheet" type="text/css" />        <script src="/usr/share/ubuntu-html5-ui-toolkit/0.1/ambiance/js/fast-buttons.js"></script>    <script src="/usr/share/ubuntu-html5-ui-toolkit/0.1/ambiance/js/core.js"></script>    <script src="/usr/share/ubuntu-html5-ui-toolkit/0.1/ambiance/js/buttons.js"></script>    <script src="/usr/share/ubuntu-html5-ui-toolkit/0.1/ambiance/js/page.js"></script>    <script src="/usr/share/ubuntu-html5-ui-toolkit/0.1/ambiance/js/pagestacks.js"></script>    <script src="/usr/share/ubuntu-html5-ui-toolkit/0.1/ambiance/js/popovers.js"></script>    <script src="/usr/share/ubuntu-html5-ui-toolkit/0.1/ambiance/js/list.js"></script>    <script src="/usr/share/ubuntu-html5-ui-toolkit/0.1/ambiance/js/toolbars.js"></script>    <script src="/usr/share/ubuntu-html5-ui-toolkit/0.1/ambiance/js/tabs.js"></script>    <script src="/usr/share/ubuntu-html5-ui-toolkit/0.1/ambiance/js/shape.js"></script></head><body>    <div data-role="mainview">      <header data-role="header">      </header>      <div data-role="content">        <div data-role="pagestack">          <div data-role="page" id="main" data-title="Weibo Status">            <section data-role="list" id="statuslist"></section>            <div id='results'></div>          </div> <!-- main -->        </div> <!-- pagestack -->      </div> <!-- content -->    </div> <!-- mainview -->    <script src="js/app.js"></script>  </body></html>

这里的UI非常简单，我只使用了一个list控件。我们大部分的代码将在“app.js”中实现：

var token = '';window.onload = function () {    console.log("this is so cool....!")    var UI = new UbuntuUI();    UI.init();    UI.pagestack.push('main');    var api = external.getUnityObject('1.0');    var oa = api.OnlineAccounts;    // UI.button('getstatus').click(auth);    auth();    function auth() {        console.log("getstatus button is clicked!");        var filters = {'provider': 'html5-weibo.ubuntu_account-plugin', 'service': ''};        oa.api.getAccounts(filters, function(accounts) {            console.log("total length: " + accounts.length);            if (accounts.length < 1) {                // setResults('No accounts available');                oa.api.requestAccount(                    "html5-weibo.ubuntu_html5weibo",                    unescape("html5-weibo.ubuntu_account-plugin"),                    function() {                        console.log("requestAccount callback...");                        auth();                });                return;            } else {                // setResults("Available accounts: " + accounts.length);            }            function authcallback(res) {                token = res['data']['AccessToken'];                console.log("AccessToken: " + token);//                setResults("AccessToken: " + token);                getWeiboStatus(token, function(statuses) {                    console.log("the length: " + statuses.length);                    if (statuses) {                        // create the 'ul' element                        var ul = document.createElement('ul');//                        var results = document.getElementById('results');                        var results = document.querySelector('#results');                        var statuslist = document.querySelector('#statuslist');                        var ul = document.createElement('ul');                        for (var i = 0; i < statuses.length; i ++) {                            var li = document.createElement('li');                            ul.appendChild(li);                            var aside = document.createElement('aside');                            li.appendChild(aside);                            var img = document.createElement('img');                            img.setAttribute('src', statuses[i]['profile_image_url']);                            img.setAttribute('width', "50");                            img.setAttribute('height', "50");                            aside.appendChild(img);                            var a = document.createElement('a');                            a.setAttribute('href', '#');                            a.innerHTML = statuses[i]['text'];                            li.appendChild(a);                            var right = document.createElement('label');                            right.innerHTML = ""                            li.appendChild(right);                        }                        console.log("it is done6");                        statuslist.appendChild(ul);                    }                    else {                        setResults('<br><br>ERROR');                    }                });            }            accounts[0].authenticate(authcallback);        }); //getAccounts    } //auth    function getWeiboStatus(accessToken, callback) {        var http = new XMLHttpRequest()        var url = "https://api.weibo.com/2/statuses/home_timeline.json?access_token=" + accessToken + "&page=" + 1        console.log('url: \n' + url)        http.open("GET", url, true);        var statuses = [];        http.onreadystatechange = function() {            if (http.readyState === 4){                if (http.status == 200) {                    var response = JSON.parse(http.responseText);                    console.log("it succeeds! lenght: " );                    for (i = 0; i < response['statuses'].length; i++ ) {                        var time = JSON.stringify(response['statuses'][i]['created_at']);//                        console.log("time: " + time );                        var text = JSON.stringify(response['statuses'][i]['text']);//                        console.log("text: " + text);                        var name = JSON.stringify(response['statuses'][i]['user']['name']);//                        console.log("name: " + name);                        var profile_image_url = JSON.stringify(response['statuses'][i]['user']['profile_image_url']);                        profile_image_url = profile_image_url.slice(1, profile_image_url.length-1);//                      console.log("profile_image_url: " + profile_image_url);                        var id = JSON.stringify(response['statuses'][i]['idstr']);                        statuses.push({'time': time,                                       'text': text,                                       'name': name,                                       'id': id,                                       'profile_image_url': profile_image_url});                    }                    callback(statuses);                } else {                    console.log("error: " + http.status)                    callback(null);                }            }        };        http.send(null);    }    function setResults(data) {        var results = document.getElementById('results');        results.innerHTML = data;    };}; //onload

我们可以使用如下的句子来得到online account API的接口：

   var api = external.getUnityObject('1.0');   var oa = api.OnlineAccounts;

在这里，我们使用HTML 5的online account API来检查是否有如下的provider:

var filters = {'provider': 'html5-weibo.ubuntu_account-plugin', 'service': ''};

如果没有，我们使用如下的代码来创建weibo账号：

           if (accounts.length < 1) {                // setResults('No accounts available');                oa.api.requestAccount(                    "html5-weibo.ubuntu_html5weibo",                    unescape("html5-weibo.ubuntu_account-plugin"),                    function() {                        console.log("requestAccount callback...");                        auth();                });                return;            }

等创建成功了，我们使用“auth()”来得到访问weibo的access token。进而我们可以得到我们所需要的任何的信息。

被创建的账号，可以在“系统设置”里的“账号”中可以看到:

另外我们可以在手机或模拟器中的如下的目录中看到我们所创建的文件：

整个项目的源码在：https://github.com/liu-xiao-guo/html5weibo

0 0