如何使用Ubuntu online account API创建微博HTML5申请书

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

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvVWJ1bnR1VG91Y2g=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" width="200" height="300" alt="">  

很多其它关于HTML5应用开发的资料能够在地址:https://developer.ubuntu.com/en/apps/html-5/

１）创建一个最主要的应用

我们还是像曾经一样使用我们的Ubuntu SDK来创建一个最主要的weibo HTML 5应用。

  

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvVWJ1bnR1VG91Y2g=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" width="300" height="200" alt="">

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvVWJ1bnR1VG91Y2g=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" width="300" height="200" alt="">  

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvVWJ1bnR1VG91Y2g=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" width="300" height="200" alt="">

这样我们就创建了一个最主要的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.0
 
OAuthMain {}

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的站点上去申请。整个文件的架构为：

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvVWJ1bnR1VG91Y2g=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" width="400" height="300" alt="">

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很easy，我仅仅使用了一个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。进而我们能够得到我们所须要的不论什么的信息。

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

另外我们能够在手机或模拟器中的例如以下的文件夹中看到我们所创建的文件：

整个项目的源代码在：git clone https://gitcafe.com/ubuntu/html5weibo.git

版权声明：本文博主原创文章，博客，未经同意不得转载。