サービスと対話するスクリプトまたはアプリケーションを作成する必要があるときに、状況が発生することがあります。 多くの大規模サイトでは、開発者に独自のAPIを提供しており、プロジェクトで使用できます。 ただし、各サービスには、APIを操作する独自の機能とメソッドがあります。 したがって、プロジェクトでサードパーティAPIの使用を開始するのは難しい場合があります。
ユーザーを認証し、プロファイルデータで最新の通知を受け取る小さなアプリケーションを使用して、Stack Exchange APIの使用方法を見ていきます。
1.新しいアプリケーションを登録する
アプリケーションを作成する前に、StackAppsに登録する必要があります。 アクセスキーを取得する必要があります。 このリンクstackapps.com/apps/oauth/registerに従って、 オプションでマークされていないすべてのフィールドに入力します 。 チュートリアルでは、次のようなフィールドに入力しました。
[クライアント側のOAuthフローを有効にする]ボックスを忘れずにチェックしてください。 これはOAuthに必要です。そうしないと、ユーザーはアプリケーションを使用してログインできなくなります。 すべてが記入されたら、対応するボタンをクリックして、アプリケーション管理ページに移動します。 そこで、いくつかのキー（クライアントID、クライアントシークレット、キー）を取得します。 これらのうち、ClientIdとKeyのみがアプリケーション自体に必要です。 それらを保存し、これで登録プロセスを完了し、アプリケーション自体の作成に直接進みます。
2.はじめに
新しいクリーンなHTMLファイルを作成し、すぐにスクリプトを含めます。
<script type='text/javascript' src='https://api.stackexchange.com/js/2.0/all.js'></script>
これで、初期化と認証の基本機能を使用して、さらに作業を進めることができます。 キーとclientIdに加えて、初期化のために2つの追加パラメーターを渡す必要があります。
SE.init({ clientId: 1, // clientId key: 'YoUrAweSomeKey', // key channelUrl: 'http://example.com/', // . , complete: function (data) { alert(" !"); } // , });
すべてを正しく行った場合、ページのロード時にアラートがポップアップするはずです:)そうでない場合は、コンソール出力を確認してください-Uncaught channelUrlに同様のものが現在のドメインの下にある必要がありますか？ ある場合は、channelUrlを再確認してください。 それ以外の場合は、サイトのコントロールパネルでアプリケーション設定を確認する必要があります。
3.認証
前のコードを変更しましょう。つまり、auth（データ）関数のプロトタイプを作成し、初期化が成功したときに呼び出される関数としてSE.initで指定します。
function auth(data) {} ... SE.init({ ... complete: auth });
今こそ認可を書くときです。 ここのすべても簡単です：
SE.authenticate({ success: function(data) { alert(' !'); }, // error: function(data) { alert(' :('); }, // });
このコードをauth（data）の本文に入れました。 これで、ページが初めて読み込まれたときに、ポップアップが表示されます。 その中に、アプリケーションへのアクセスを許可および拒否するための2つのボタンが表示されます。
ただし、ログインしている間は、受信したデータに対して何もしません。 ただし、成功した場合は、さらに作業を進めるためにクライアントトークンが提供されます。 どこかに保存しましょう。 たとえば、次のように、これらのトークンを保存するグローバル変数を作成します。
var tokens = null; ... SE.authenticate({ success: function(data) { alert(' !'); tokens = data; }, ... ...
ユーザーを認証できるようになったので、APIを直接使用して作業を進めることができます。
4.プロファイルデータの取得
APIは、リクエストへの応答をJSON形式で返します。 これは、JSを介してロードされたデータが文字列形式から何らかの構造に簡単に変換されることを意味します。 クエリはドメイン間で行われるため、jQueryを使用します。
ユーザーデータはここで受信されます。
https://api.stackexchange.com/2.2/me?site=[ ]
一部のユーザー情報（評価やバッジなど）は、プロファイルが要求されるStack Exchangeネットワーク上のサイトに依存します。 StackOverflowおよびMathOverflowから受信したデータは異なる場合があります。 サイトの名前は、システム自体で表示できます。 わかった 参照によってデータを単純にリクエストすると、次のようなjson'aが得られます。
{"error_id":401,"error_message":"This method requires an access_token","error_name":"access_token_required"}
考えられるすべてのエラーは、 api.stackexchange.com / docs / error-handlingで確認できます。
ただし、アクセストークンを指定する必要があります！ これを行うには、これらの同じトークンを上記のアドレスに添付します。
https://api.stackexchange.com/2.2/me?site=[ ]&key=[ key]&access_token=[tokens.accessToken]&callback=[method]
ここで、tokens.accessTokenは認証プロセス中に以前に受信したユーザーキーであり、methodはダウンロードの終了時に呼び出されるコールバックです。 答えは次のようになります。
{ "items": [ { "badge_counts": { "bronze": 5, "silver": 0, "gold": 0 }, "account_id": 2760756, "is_employee": false, "last_modified_date": 1396214504, "last_access_date": 1396268249, "reputation_change_year": 62, "reputation_change_quarter": 62, "reputation_change_month": 62, "reputation_change_week": 55, "reputation_change_day": 10, "reputation": 63, "creation_date": 1368447422, "user_type": "registered", "user_id": 2377708, "age": 18, "location": "Belarus", "link": "http://stackoverflow.com/users/2377708/alex-saskevich", "display_name": "Alex Saskevich", "profile_image": "http://i.stack.imgur.com/0Vz5q.jpg?s=128&g=1" } ], "has_more": false, "quota_max": 10000, "quota_remaining": 9905 }
そのようなデータを扱うのは視覚的に難しいため、受け取った情報を小さなタブレットにレンダリングするコールバック関数を作成します。
function renderProfileData(data) { var items = data.items[0]; $("#reputation").text(items.reputation); $("#login").text(items.display_name); $("#bronze_badges").text(items.badge_counts.bronze); $("#silver_badges").text(items.badge_counts.silver); $("#gold_badges").text(items.badge_counts.gold); $("#profile_image").attr("src", items.profile_image); }
GETリクエストで受け取った情報自体は次のようになります。
$.get("https://api.stackexchange.com/2.2/me?site=stackoverflow&key=YoUrAwEsOmEKey&access_token=YoUrSecretToKEn&callback=profile");
その結果、次の結果が得られました。
5.最近の通知
アプリケーションが未読メッセージ、通知に関する情報を受信できるようにするには、特定のアクセス権を付与する必要があります。 通知の場合、これはread_inboxです。 アプリケーションの承認ブロックに配置します。
SE.authenticate({ scope: ['read_inbox'], ... });
ここで通知データを受け取ります：
https://api.stackexchange.com//2.2/notifications?pagesize=[ ]&key=[ ]&access_token=[ ]&callback=[callback-]
最近の通知の数を示すことはできませんが、すべての通知を一度に受け取ります。 リクエストは前のリクエストと同様に実行され、答えは次のようになります。
{ "items": [ "site": { "styling": { "tag_background_color": "#FFF", "tag_foreground_color": "#000", "link_color": "#0077CC" }, "related_sites": [ { "relation": "meta", "api_site_parameter": "meta.reverseengineering", "site_url": "http://meta.reverseengineering.stackexchange.com", "name": "Reverse Engineering Meta Stack Exchange" }, { "relation": "chat", "site_url": "http://chat.stackexchange.com", "name": "Chat Stack Exchange" } ], "open_beta_date": 1364774400, "closed_beta_date": 1363651200, "site_state": "open_beta", "twitter_account": "StackReverseEng", "favicon_url": "http://cdn.sstatic.net/reverseengineering/img/favicon.ico", "icon_url": "http://cdn.sstatic.net/reverseengineering/img/apple-touch-icon.png", "audience": "researchers and developers who explore the principles of a system through analysis of its structure, function, and operation", "site_url": "http://reverseengineering.stackexchange.com", "api_site_parameter": "reverseengineering", "logo_url": "http://cdn.sstatic.net/reverseengineering/img/logo.png", "name": "Reverse Engineering", "site_type": "main_site" }, "is_unread": false, "creation_date": 1396197666, "notification_type": "badge_earned", "body": "You've earned the "Autobiographer" badge." } ], "has_more": true, "quota_max": 10000, "quota_remaining": 9994 }
ご覧のとおり、この場合、システムはすぐに一連の通知を提供します。 そして、彼らと働くことは非常に簡単です：
function renderNotifications(data) { var items = data.items; var html = "<center> </center><br/>"; for (var i = 0; i < items.length; i ++) { var site = items[i].site.name; var icon = items[i].site.icon_url; var body = items[i].body; var str = "<div class = 'item'><img src = '" + icon + "' height = '14px' /> " + site + ": " + body + "</div>"; html += str; } $("#notifications").html(html); }
その結果、私の小さなアプリケーションのページは次の最終フォームを取得しました。
6.そして今何？
Stack ExchangeネットワークAPIを使用すると、通知やプロファイルデータを受信できるだけではありません。 質問、コメント、タグを取得したり、それらとやり取りしたりすることもできます（質問の追加、コメントの編集）。 ユーザープロファイル、イベント、および統計を使用できます。
統計について言えば、アプリケーションコントロールパネルでは、承認とリクエストの統計をグラフ形式で表示できます。 そして、はい、アプリケーションが個々の機能に対して行うことができるリクエストの数は1万に制限されていることに注意してください。 要求の残りの数は、 quota_remainingフィールドのJSON応答とともに送信されます。
ドキュメントでは、クエリを試すこともできます。 このために、StackExchangeはコンソールを提供します。これは各機能の説明の下にあります。
関連リンク：
- ドキュメント： api.stackexchange.com/docs
- アプリケーションコントロールパネル： stackapps.com/apps/oauth
- 動作中のアプリケーション： jsfiddle.net/asaskevich/6F5kd/embedded/result