How to use the Ubuntu Online Account API to create a Weibo HTML5 app

In this article, we will use the online account API provided by the Ubuntu SDK to access the Weibo API and display what is needed. The focus of this article is to show how to use the Online account API. We will create a simple HTML 5 app. We finally display the following screen:

More information on HTML5 application development can be found at address: https://developer.ubuntu.com/en/apps/html-5/

1) Create a basic application
We still use our Ubuntu SDK as before to create a basic Weibo HTML 5 app.





This allows us to create one of the most basic Weibo HTML 5 applications. You can use the hotkey Ctrl + R to run it though it's not going to do anything.






2) files required to join the online account

We can refer to the article for a deeper understanding of the online account API. To be able to access, you need to create the following files:

1) 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>

2) 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>

3) Create a directory of plugin files and create them under it
A) main.qml, the contents of which are:

Import Ubuntu.OnlineAccounts.Plugin 1.0OAuthMain {}

b) Qml-weibo.ubuntu_plugin.provider, the contents of which are:

<?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= "Mechanis M ">web_server</setting> <group name=" Oauth2 "> <group name=" web_server "> <sett          ing name= "Host" >api.weibo.com</setting> <setting name= "Authpath" >oauth2/authorize</setting> <setting name= "Tokenpath" >oauth2/access_token</setting> <setting name= "Redirecturi" >ht          tps://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= "Forceclientauthviare Questbody "type=" B ">true</setting> </group> </group> </group> &LT;/TEMPLATE&GT;&L T;/provider>

In the above file, be sure to enter your own " Your Developer Keyand Your developer Secret”。 This you need to apply on the Weibo API's website. The schema for the entire file is:




4) Modify the Manifest.json file as follows：

{    "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 <[email protected]> ",    " framework ":" Ubuntu-sdk-14.10 "}

Some settings for account and plugin are added here.


5) in order for the. Service,.application and. provider files to be displayed properly, we add the following to the "Qml-weibo.qmlproject"：

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

Here, we have basically modified or added the files we need.

3) Designing the app's UI
To modify our "index.html" file:

<! DOCTYPE html>
The UI here is very simple and I only use a list control. Most of our code will be implemented in "App.js":
var token = '; window.onload = function () {Console.log ("This was 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.createel                        Ement (' 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 Co        Nsole.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[' Statuse                      S '][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_im                        Age_url: "+ profile_image_url);                        var id = json.stringify (response[' statuses '][i][' idstr '); Statuses.push ({' Time ': Time, ' text ': text, ' Na ' Me ': name, ' ID ': ID, ' Profile_image_url ': prof                    Ile_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

We can use the following sentences to get the interface of the online account API:
   var API = External.getunityobject (' 1.0 ');   var OA = API. onlineaccounts;


Here, we use the HTML 5 online account API to check for the following provider:
var filters = {' Provider ': ' Html5-weibo.ubuntu_account-plugin ', ' Service ': '};

If not, we use the following code to create the Weibo account:
           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;            }

When created, we use "auth ()" To get access tokens to Weibo. And then we can get any information we need.
The source code for the entire project is: Git clone https://gitcafe.com/ubuntu/html5weibo.git
How to use the Ubuntu Online Account API to create a Weibo HTML5 app