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

Source: Internet
Author: User

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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.