Clever Geek Handbook

Javascript API Vkontakteの使用の自動化

数日前、いつものように、誰にも通知することなく、Contactはiframeを介して接続するJavaScriptアプリケーションを開発する機能を追加しました。 これらのアプリケーションのAPIへのアクセスは、一般に、FlashからAPIへのアクセスと同じです-とにかく、これは通常のRESTプロトコルです。 パラメーターはGET要求行を介して渡され、結果はJSONまたはXMLとして返されます。



Vkontakte APIを使用する際の問題の1つは、クロスドメインリクエストがhttp://api.vkontakte.ru/api.phpに転送されることです。 別の問題は、すべてのリクエストに署名する必要がある署名の扱いにくい計算です。 まず、私は、他の多くの開発者と同様に、jQueryに取りかかりました。 ただし、最初に、クロスドメインリクエストのみのために68キロバイトのライブラリを使用することは、大砲からスズメを撃つようなものです。 そして、どういうわけかjQueryを使用したAPI関数の呼び出しはなんとなく面倒だったため、クロスドメインクエリ用の小さな関数を優先してjQueryを放棄する必要がありました。 さて、私の生活を何らかの形で簡素化するために、サーバー応答で指定されたURLをロードするだけでなく、このすべてで最も不便なAPIである署名の計算を実行する小さなライブラリを作成することにしました。



最終結果は、記事の最後にあるリンクをクリックして見つけることができます。使用と実装のいくつかのポイントに焦点を当てます。



Vkontakte APIを使用するには、最初にライブラリファイルをアプリケーションのHTMLドキュメントに接続する必要があります。
<!-- , HTML- --> < script src ="vk_api.js" type ="text/javascript" ></ script > * This source code was highlighted with Source Code Highlighter .



  1. <!-- , HTML- --> < script src ="vk_api.js" type ="text/javascript" ></ script > * This source code was highlighted with Source Code Highlighter .



  2. <!-- , HTML- --> < script src ="vk_api.js" type ="text/javascript" ></ script > * This source code was highlighted with Source Code Highlighter .



  3. <!-- , HTML- --> < script src ="vk_api.js" type ="text/javascript" ></ script > * This source code was highlighted with Source Code Highlighter .



<!-- , HTML- --> < script src ="vk_api.js" type ="text/javascript" ></ script > * This source code was highlighted with Source Code Highlighter .



ライブラリ自体は単一のvk_apiオブジェクトとmd5関数であり、Webtoolkitから正直に借りました。 vk_apiオブジェクト自体は使用する準備ができていません-コンストラクターを使用してオブジェクトからインスタンスを作成する必要があります。




  1. var api = new vk_api（ / * parameters * / ）;
*このソースコードは、 ソースコードハイライターで強調表示されました。
原則として、 vk_api.jsスクリプト自体をロードするときにすべての初期化を完了できますが、これはサムライの方法ではありません。このセッションでAPIをまったく呼び出す必要がない場合はどうでしょうか。 さらに、初期化中に、コンストラクターにパラメーターが渡されます。このパラメーターは、どこかで設定してスクリプトに渡す必要があります。



それでは、オブジェクトを作成してみましょう。




  1. // vk_api（）からオブジェクトを作成します。 さらにすべての作業を行う必要があります。
  2. // APIオブジェクトのみ。
  3. var api = new vk_api（
  4. //これは秘密です。アプリケーションの編集ページにリストされています
  5. 'hGtsH5G0' 、
  7. // APIの初期化が成功すると、この関数が呼び出されます。
  8. //すべてのコールバック関数を設定するのに適した場所
  9. // addCallback（）
  10. 関数 （）{
  12. //設定を変更するためのウィンドウを呼び出します
  13. //友人や壁へのアクセス。 ユーザーは閉じることができません
  14. //必要な設定を設定するまでwindowを呼び出しました。
  15. api.makeSettings（api.SETT_FRIENDS | api.SETT_WALL）;
  17. //ユーザーが追加した場合に起動する関数を追加します
  18. //ページへのアプリケーション。
  19. api.addCallback（
  20. 'onApplicationAdded' 、
  21. 関数 （）{
  22. //アクション
  23. }
  24. ）;
  25. }、
  27. //この関数は、APIの初期化が成功しなかった場合に呼び出されます。
  28. //この場合、外部呼び出しを使用することはできません。
  29. 関数 （）{
  30. //エラーメッセージ
  31. }
  32. ）;
*このソースコードは、 ソースコードハイライターで強調表示されました。
ご覧のとおり、すべてが非常に簡単です。 コンストラクターには、おそらく秘密鍵（ええ、秘密はページコードで開いた形式になっています）と2つの関数が与えられます。最初の関数は初期化が成功した場合に実行され、もう1つは初期化中のエラーの場合に実行されます。 実際、開発者が初期化中にエラーが発生したときにこれらの孤立したケースを考慮したくない場合、2番目の機能は完全にオプションです。 さらに、テストモードがオンかどうかを示す通常の論理フラグである別のパラメーターがあります。



実際、テストモードでは、呼び出された各APIメソッドは常に同じパラメーターを1つ追加する必要があります。 したがって、テストモードのグローバルなワンタイムインクルードのサポートにより、リリースのアプリケーションを準備する際に、開発者は不要なジェスチャーから保護されます。多くのAPI呼び出しを編集する代わりに、1つのデザイナーパラメーターのみを削除する必要があります



数十のVkontakteアプリケーションを見ると、それらの多くは、ユーザーがそれらをインストールし、何らかのアクションを許可することを直接必要とします。 この場合、アプリケーションは、 どこに行けばよいかに関する指示を含むメッセージを単に表示するか、最良の場合は、設定または設定を変更するためのウィンドウをすぐに表示します。 さて、ライブラリレベルでそのような関数を実装しないのは罪でした。 さらに、一人のリクエストで、私はもう少し進んで、ユーザーがアプリケーションをインストールするか、アプリケーションの要件に同意するまで何かを許可するという提案でウィンドウを閉じることができないようにこれらの機能を実装しました。 したがって、アプリケーションのインストールを拒否したか、アプリケーションを許可しなかったユーザーのために、アプリケーション用に追加のページを提供する必要はありません。1つまたは2つの関数を呼び出すだけです。




  1. //アプリケーションのインストールを求めるウィンドウを表示します
  2. api.makeInstall（）;
  3. api.addCallback（
  4. 'onApplicationAdded' 、
  6. //この関数は、ユーザーがアプリケーションをインストールするときに呼び出されます
  7. 関数 （）{
  8. $（ '#text' ）.append（ 'Application added \ n' ）;
  10. //アプリケーションへのアクセスを許可するようユーザーに要求します
  11. //友人や壁の出版物に
  12. api.makeSettings（api.SETT_FRIENDS | api.SETT_WALL）;
  13. api.addCallback（
  14. 'onSettingsChanged' 、
  16. //ユーザーがアプリケーションの設定を変更すると、関数が実行されます
  17. 関数 （設定）{
  18. $（ '#text' ）.append（ '新しいパラメーター：' +文字列（設定）+ '\ n' ）;
  19. }
  20. ）;
  21. }
  22. ）;
*このソースコードは、 ソースコードハイライターで強調表示されました。
最後に、アプリケーションの開発目的、つまりAPI関数を直接呼び出すことに進みましょう。 このために、 呼び出しメソッドが提供されます。




  1. // call（）関数を介してAPIメソッドを呼び出します
  2. api.call（
  4. // APIメソッドの名前。
  5. //拡張プロファイル情報を取得するとします。
  6. 'getProfiles' 、
  8. //これは、APIメソッドのパラメーターを持つオブジェクトです。 パラメータがない場合、
  9. //この引数は省略できます。
  10. {
  11. uid： '4124584,2327412,1237975' 、
  13. //自動的に配列を指定できます
  14. //文字列に変換されます。
  15. フィールド：[
  16. 'first_name' 、 'last_name' 、 'nickname' 、
  17. 「bdate」 、 「city」 、 「country」 、 「photo」
  18. ]
  19. }、
  21. //この関数は、サーバーから応答を受信したときに呼び出されます。
  22. //データは、文字列から作成されたすぐに使用できるオブジェクトです
  23. //サーバーから受信したJSON。
  24. 関数 （データ）{
  25. //データオブジェクトを使用したアクション
  26. }
  27. ）;
*このソースコードは、 ソースコードハイライターで強調表示されました。
ご覧のとおり、すべてがシンプルであり、不要なアクションはありません。これが必要なことです。



最初のパラメーターとしてvk_apiコンストラクターに渡される、いわゆる秘密鍵については、暗号化ではなく、最も単純なエンコードを提供しました。 エンコードされた形式のキーは次のようになります。sx - 36l76l11l57l52l14l65l42l56l31l-文字コードのトピックのバリエーション。 文字列sx--の最初の文字は、暗号化されていない秘密鍵をコンストラクタに渡す機能を保持するために必要です-文字列がsx--で始まる場合、鍵はエンコードされ、そうでない場合、鍵はクリアテキストで送信されます。 コーディングがこんなに簡単なのはなぜですか？ はい、それは愚か者からの保護であるため、もうありません。 この方法は、有名な雑誌の別の記事を読んだばかりの若いハッカーからあなたを保護するのに役立ちます。そして、JavaScriptは、JavaScriptの基本を知っている資格のある開発者からあなたを救いません。復号化のための関数はコード内になければなりません。



実際、図書館には珍しいものは何もありません。 ただし、ライブラリを使用すると、アプリケーションを開発する際の日常的な作業から解放されます。 約束どおり、ダウンロードリンクは次のとおりです。



ライブラリ： vk_api-1.4.4.zip

Google Codeプロジェクトページ： http : //vk-jsapi.googlecode.com/

新しいバージョンと完全な説明 。





More articles:


All Articles