Facebook、Vkontakte、Habrahabrを介したPhoneGapアプリケーションでの承認

Phonegap こんにちは、habrauser。 最近、携帯電話のオペレーティングシステムのインターフェースに関する私のビジョンについて記事を書きましたが、誰にとってもあまり興味がなく、アイデアを部分的に現実化するアプリケーションを作成しようと決めました。 + PhoneGapを使用したjs + css。 そして、彼は認可から始め、さまざまなソースからトークンまたはクッキーを受け取りました。 のんびりしたコーディングの1日で、Facebook、Vkontakte、Habrの認証プラグインを作成することが判明しました(ほとんどの時間はGoogleに費やされ、APIのドキュメントを読みました)。



Android SDK(このオペレーティングシステムの開発用)、Eclipse、およびPhoneGapを既にインストールし、アプリケーションの作成を開始する方法を知っていることを前提としています。 そうでない場合は、 ここから開始する必要があります



プラグインを作成する場合、リンクとCookieを「解析」する小さな追加のJSスクリプトが必要になります。

var url_parser={ get_args: function (s) { var tmp=new Array(); s=(s.toString()).split('&'); for (var i in s) { i=s[i].split("="); tmp[(i[0])]=i[1]; } return tmp; }, get_args_cookie: function (s) { var tmp=new Array(); s=(s.toString()).split('; '); for (var i in s) { i=s[i].split("="); tmp[(i[0])]=i[1]; } return tmp; } };
      
      





リンクとCookieのコードを明確に分離しました(突然何かが変更されます)が、現在のところそれらの違いはわずかです。 get_argsはparam1 = hello&param2 = worldの形式の文字列を受け入れ、get_args_cookieはdocument.cookieを提供するものを受け入れます。 param1 = hiという形式の文字列。 param2 = habr。 出力では、key => valueという形式の配列を取得します。



VkontakteとFacebook



VkontakteとFacebookは、同様の認証方法、つまりフォームのURL(ユーザーのリダイレクト先)を使用します

oauth.vk.com/authorize?client_id=ID_&scope=_&redirect_uri=http://oauth.vk.com/blank.html&display=touch&response_type=token





www.facebook.com/dialog/oauth?client_id=ID_&scope=_&redirect_uri=http://sovgvd.info/blank.html&response_type=token





VKontakteは、JSアプリケーション用のFacebookとは異なり、そのアドレスを提供しますが、facebookは長い間放置されていた個人ブログに空のページを作成する必要がありました(おそらくVKontakteを使用できます)。

承認が成功した後の回答も同様であり、アンカー(#)の形式は次のとおりです。

access_token=&expires_in=__





また、VKontakteは&user_id=ID_



も追加し&user_id=ID_







これらのソーシャルネットワークのページを要求するには、 InAppBrowser拡張機能を使用します 。これにより、ほとんどのブラウザーアプリケーション内でブラウザーが起動し、開いているページでJSまたはCSSを埋め込むことができます。



これらすべてを知っていると、同じメソッドを持つ2つの非常に類似したスクリプトが得られました。

ヴコンタクテ
 var plugin_vk = { wwwref: false, plugin_perms: "friends,wall,photos,messages,wall,offline,notes", auth: function (force) { if (!window.localStorage.getItem("plugin_vk_token") || force || window.localStorage.getItem("plugin_vk_perms")!=plugin_vk.plugin_perms) { var authURL="https://oauth.vk.com/authorize?client_id=12345&scope="+this.plugin_perms+"&redirect_uri=http://oauth.vk.com/blank.html&display=touch&response_type=token"; this.wwwref = window.open(encodeURI(authURL), '_blank', 'location=no'); this.wwwref.addEventListener('loadstop', this.auth_event_url); } }, auth_event_url: function (event) { var tmp=(event.url).split("#"); if (tmp[0]=='https://oauth.vk.com/blank.html' || tmp[0]=='http://oauth.vk.com/blank.html') { plugin_vk.wwwref.close(); var tmp=url_parser.get_args(tmp[1]); window.localStorage.setItem("plugin_vk_token", tmp['access_token']); window.localStorage.setItem("plugin_vk_user_id", tmp['user_id']); window.localStorage.setItem("plugin_fb_exp", tmp['expires_in']); window.localStorage.setItem("plugin_vk_perms", plugin_vk.plugin_perms); } } };
      
      





フェイスブック
 var plugin_fb = { wwwref: false, plugin_perms: "read_stream,manage_friendlists,read_friendlists,read_mailbox,publish_actions,offline_access", auth: function (force) { if (!window.localStorage.getItem("plugin_fb_token") || force || window.localStorage.getItem("plugin_fb_perms")!=plugin_fb.plugin_perms) { var authURL="https://www.facebook.com/dialog/oauth?client_id=123456&scope="+this.plugin_perms+"&redirect_uri=http://sovgvd.info/blank.html&response_type=token"; this.wwwref = window.open(encodeURI(authURL), '_blank', 'location=no'); this.wwwref.addEventListener('loadstop', this.auth_event_url); } }, auth_event_url: function (event) { var tmp=(event.url).split("#"); if (tmp[0]=='https://sovgvd.info/blank.html' || tmp[0]=='http://sovgvd.info/blank.html') { plugin_fb.wwwref.close(); var tmp=url_parser.get_args(tmp[1]); window.localStorage.setItem("plugin_fb_token", tmp['access_token']); window.localStorage.setItem("plugin_fb_exp", tmp['expires_in']); window.localStorage.setItem("plugin_fb_perms", plugin_fb.plugin_perms); } } };
      
      







メインJavaScriptの本文で認証するには、plugin_vk.auth(false)を実行します。 またはplugin_fb.auth(false);。 同時に、認証が既に完了している場合、アクセス権のリストが変更された場合、認証が発生していないか、強制認証が開始されていても何も起こりません(plugin_vk.auth(true);またはplugin_fb.auth(true);)、ウィンドウへのリダイレクトが発生しますソーシャルネットワークのいずれかのログイン。

小さなメモ
有効期限の値は保持していますが、どこでも使用していません。おそらく便利でしょう。




ハブラハブル



私たちのお気に入りのハブには、承認用のAPI(およびその他すべて)がないため、Cookieをキャッチします。このため、JavaScriptコードを実行するにはInAppBrowser拡張-executeScriptが必要です。 コードの一部またはJSファイル全体を埋め込み、コールバック関数の最後のコマンドの結果を取得できます(リターンと混同しないでください)。 つまり Cookieを実装および受信するためのコードは次のようになります。

  plugin_habr.wwwref.executeScript({ code: "document.cookie;" }, function(arg) { plugin_habr.auth_event_url(arg); });
      
      





そして、Habrの承認プラグインコード全体は次のようになります。

ハブラハブル
 var plugin_habr = { wwwref: false, auth: function (force) { if (!window.localStorage.getItem("plugin_habr_PHPSESSID") || force) { var authURL="http://habrahabr.ru/login/"; this.wwwref = window.open(encodeURI(authURL), '_blank', 'location=yes'); this.wwwref.addEventListener('loadstop', this.auth_jsinjection); } }, auth_event_url: function (url) { var tmp=url_parser.get_args_cookie(url); if (tmp['PHPSESSID'] && tmp['hsec_id']) { plugin_habr.wwwref.close(); window.localStorage.setItem("plugin_habra_PHPSESSID", tmp['PHPSESSID']); window.localStorage.setItem("plugin_habra_hsec_id", tmp['hsec_id']); } }, auth_jsinjection: function () { plugin_habr.wwwref.executeScript({ code: "document.cookie;" }, function(arg) { plugin_habr.auth_event_url(arg); }); } }
      
      





認証呼び出しは、以前のプラグインplugin_habr.auth(false)と同様に実行されます。



これが誰にも役立つかどうかはわかりませんが、突然です。 さらに、自分のアイデアを思い浮かべるのは事実ではありませんが、コードの一部を失うことは残念です。



All Articles