I know there are lots of OAuth Libraries in BlackBerry 10 that can make it easy, but actually using an OAuth Library is more pain than what I’m going to show you. 🙂
This technique only requires 3 Languages: C++, Javascript and QML and DOESN’T REQUIRE ANY SPECIAL LIBRARY
LoginSheet.qml
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 |
import bb.cascades 1.0 Sheet { id: sheet; peekEnabled: false; property string clientID: "ENTER YOUR APP ID HERE"; property string scope: "read_mailbox,friends_online_presence,user_about_me,basic_info,xmpp_login"; property string redirectURI: "http://localhost/" signal loggedIn(); onOpened: { // logout any sessions & cookies browser.storage.clearCookies(); // when the sheet is opened, we want our webview to automatically load browser.url = "https://www.facebook.com/dialog/oauth?client_id="+clientID+"&scope="+scope+"&response_type=token&redirect_uri=" + redirectURI; } Page { Container { id: mainContainer horizontalAlignment: HorizontalAlignment.Fill verticalAlignment: VerticalAlignment.Fill // this progress indicator is binded to the webview's load progress ProgressIndicator { visible: browser.visible && browser.loading fromValue: 0 toValue: 100 value: browser.loadProgress horizontalAlignment: HorizontalAlignment.Fill verticalAlignment: VerticalAlignment.Bottom } // we need a scroll view outside our WebView so we will be able to scroll ScrollView { WebView { id: browser horizontalAlignment: HorizontalAlignment.Fill verticalAlignment: VerticalAlignment.Center minHeight: 1000 onNavigationRequested: { // the current URL we're in, not required console.log("URL : " + request.url) // check if the current URL contains the http://localhost/#access_token // if it does, it means we're in the end of our OAuth Flow and time to grab the provided Access Token if(_app.contains(request.url, "http://localhost/#access_token")) { var access_token = _app.regex(request.url, "access_token=(.*)&expires_in", 1); // here is our token, I suggest you use a QSettings to save this value console.log("GOT IT: " + access_token) // we're done, close our sheet and tell the rest of our code we're logged in :) sheet.loggedIn(); sheet.close(); } } } } } actions: [ ActionItem { title: "Refresh" imageSource: "asset:///images/tabRefresh.png" onTriggered: { browser.reload(); } } ] } } |
QT C++ Helper Functions
I know these functions have Javascript equivalents, but I always love to write code mostly in C++. I always have these functions in my projects and I can just call them from anywhere in any QML code. 🙂
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
// CONTAINS CPP FUNCTION bool ApplicationUI::contains(QString text, QString find) { return text.contains(find, Qt::CaseInsensitive); } // REGEX IN QT QString ApplicationUI::regex(QString text, QString expression, int index) { QRegExp rxItem(expression); QString result = ""; if( rxItem.indexIn( text ) != -1 ) { result = rxItem.cap(index); } return result; } |
Facebook App Settings
Also make some little changes in your Facebook App Settings
Turn on Client OAuth Login and Embedded Browser OAuth Login
And of course don’t forget to add http://localhost/ in the Valid OAuth Redirect URIs.
I hope this post will help you make Facebook Connected Applications with ease. 🙂
2 Responses
alex
Hi, could you share your example project ? thanks
grace grimes
It won’t let me make a account on my blackberry z10 because I payed money for this app