如何使用Ubuntu online account API创建微博HTML5申请书
在这篇文章中。我们将使用Ubuntu SDK提供online account API来訪问微博的API并显示所须要的内容。这篇文章的重点是展示怎样在HTML 5中使用online account API。我们将创建一个简单的HTML 5应用。我们终于显示的画面例如以下:
很多其它关于HTML5应用开发的资料能够在地址:https://developer.ubuntu.com/en/apps/html-5/
1)创建一个最主要的应用
你能够使用热键Ctrl + R来执行它尽管它并不能做什么事。
2)增加online account所须要的文件
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>
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>
{ "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的一些设置。
5)为了可以让.service,.application及.provider文件能正常得到显示,我们对“qml-weibo.qmlproject”加入例如以下的东西:
Files { filter: "*.service" } Files { filter: "*.application" } Files { filter: "*.provider" }
3)设计应用的UI
<!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;
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。进而我们能够得到我们所须要的不论什么的信息。
版权声明:本文博主原创文章,博客,未经同意不得转载。