はじめに
以前、このウェブサイト全体をリーダーが一人で構築していましたが、様々なバグや細かい不備がありました。そこでリファクタリングを計画し、侯さんがseajsの開発フレームワークを整えてくれたので、私はフロントエンドのロジックを書くだけでよくなりました。
現状
登録とログインの部分は私が作成したため、新浪微博（Weibo）とQQログイン機能を追加しようと考えています。ユーザーがクリックした後、そのIDをデータベースに保存します。もちろん、これにはデータベーステーブルのフィールドを変更し、wb_idのようなフィールド名を追加して識別する必要があります。
現在一般的な方法は2つあります。1つは、新浪微博（または他のログイン方法）でログインした後、バックエンドで自動的にサイト固有のIDを作成し、同じ行のwb_idにこのユーザーの微博IDを保存する方法です。これにより、どのアカウントでログインしても初回の微博ログイン後にユーザーはニックネーム（必須ではなく、微博のニックネームを直接使用可能）とパスワード（必須、万が一新浪微博がサービス終了した場合に備えて）を設定するだけで済みます。もう1つの方法は、新浪微博でログインした後、ユーザーに手動でアカウントとパスワードを作成させるか、既に登録済みのユーザーアカウントにバインドさせる方法です。
私のアプローチ
以上がビジネスロジックで、私は最初の方法で実装します。以下は具体的な実装方法です：新浪微博のJSSDK APIの使用方法について。
まず、多くのオンラインチュートリアルで説明されているように、OAuth2.0プロトコルの原理を理解する必要があります。実際には理解していなくてもプロセスを知っていれば問題ありません。OAuth2.0の認証フローについては多くの情報がネット上にあり、ここでは詳しく説明しません。
注意：すべての手順の前提として、新浪微博オープンプラットフォームの開発者権限を取得している必要があります。権限がない場合はAPIを呼び出すことができません。新浪微博開発者の申請方法については、各自で検索してください。申請が完了するとappidが発行され、これは新浪がAPIを呼び出した主体を識別するための重要なIDで、後の手順でも使用されます。
第一步：名前空間の追加とjssdkファイルの参照
名前空間の追加：
1 | |
jssdkファイルの参照：
1 | |
YOUR APPKEYは新浪微博開発者申請時に発行されたappidに置き換えてください。debug=trueはデバッグ時に便利ですが、正式リリース時には&debug=trueを削除できます。
第二步：APIを使用した認証ログイン
ここには2つの方法があります。1つはボタンクリック後にスクリプト内でAPIのWB2.login()メソッドを直接呼び出す方法で、詳細は新浪APIを参照してください。
もう1つは、ユーザーをappidとコールバックアドレスを含むアドレス（認証ページと呼びます）に誘導する方法で、形式は以下の通りです：
1 | |
YOUR APPKEYとYour_CallBack_Addressを自身のものに置き換えてください。Your_CallBack_Addressには必ず`http://``を追加してください。例えば、私のテスト用の誘導アドレスは以下の通りです：
1 | |
注意：このコールバックアドレスは.php、.html、.jspなどの動的/非動的な拡張子付きの形式である必要があるようです。ホームページの場合はhttp://xheldon.com是不行的,需要加上http://xheldon.com/index.html(因为我的后台是`（Nodeの場合）などである必要があります。これは私自身が試していないので、必要な方は各自で試してください。
最初の方法では、誘導エントリをクリックすると微博のログイン認証ページのダイアログが直接表示されます。chromeを使用している場合、この小ウィンドウのアドレスバーの左側に小さな鍵アイコンが表示され、このアドレスがロックされて変更できないことを示します。ポップアップウィンドウで微博のログインアカウントとパスワードを入力して認証すると、ダイアログが消え、元のページがリフレッシュされ、サードパーティのサイトがあなたのアカウントを操作できるようになります。
2番目の方法は、スクリプト内でWB2.login()を使用せず、ユーザーを先ほど説明したappidとコールバックアドレスを含むアドレスに誘導する方法です。このアドレスでもアカウントとパスワードの入力が必要ですが、最初の方法との違いは、現在のページから離れてこの認証ページに移動することです。アカウントとパスワードを入力して認証すると、このリンクに記載されたコールバックアドレスに戻ります。
上記の2つのステップの原理は、実はOAuth2.0プロトコルの認証プロセスです。ただ、JSSDKが最初のリクエストで返されるcodeと2回目のリクエストで返されるaccess tokenを処理してくれるため、公式APIで説明されているようにbasic方式でaccess tokenをheaderに含めてpostやgetを行うといった、理解しにくい専門用語に悩まされる必要はありません。フロントエンドのロジックに集中し、取得したjson形式のデータを利用するだけでよいのです。
先ほどと同じアドレスですが、微博API入門ドキュメント]を参照してください。もちろん「入門級」という用語は私の造語です。この5つの使い方を理解すれば、後のAPIは同じ要領で使えるようになります。
これらのAPIの中でも、WB2.login()とWB2.checklogin()、そしてWB2.logoutは比較的簡単で、誰でも理解できるでしょう。理解できない場合は、先ほど説明したWB2.login()メソッドをscriptタグ内に記述すればよいのですが、ログイン誘導後に何も処理を行わない点に注意が必要です。
ログイン後に何かを行いたい場合（当然ですよね、何もしないならログインさせる必要はありません）、例えば新浪微博にログインしたユーザーのIDを取得したり、フォロワー数を取得したりするには、この5つの入門APIの中で最も重要なAPIである、微博APIとデータをやり取りし、組み込み微博コンポーネントをJs方式で呼び出すための入口関数（公式ではこう紹介されています）:WB2.anyWhere(callback)を使用します。
そして、データとやり取りする場合はW.parseCMD(uri, callback, args, opts)を使用します。
ここでWはWB2.anyWhere(callback)から渡される引数です。微博コンポーネントを呼び出したい場合は、W.widget.hoverCard(…)やW.widget.followButton(…);などを使用できます。
最も重要なステップ、つまりあなたと新浪とのデータやり取りのステップは以下の通りです：
一般的にW.parseCMDは以下の形式で使用されます：
1 | |
W.parseCMD()の最初のパラメータ/user/show.jsonは、他のインターフェースに置き換えることができます。例えば/statuses/user_timeline.jsonにすると、このインターフェースの情報を読み取ることができます。具体的にどのようなインターフェースがあり、各インターフェースがどのようなデータを返すかについては、新浪自身が提供している微博APIテストツール]を参照してください。注意：このAPIテストツールのログイン画面には問題があるため、このページでログインせず、まず微博のホームページでログインしてから、APIテストツールのページを更新してください。
screen_nameは必須ではありませんが、screen_nameを含む{}は空であっても残しておく必要があります。
以下のmethod: getはバックエンドとのやり取り時のパラメータです。場合によってはpost方式を使用する必要があります。cache_timeは名前からも意味がわかると思いますので、詳しくは説明しません。
注意すべき点はほぼこれくらいです。
ブログ主より：
人生の重要な選択に直面したとき、最善の方法を誰かが教えてくれて、貴重な時間を無駄にせずに済めばと、私はよく願っています。だからこそ、自分の経験を踏まえて頻繁にブログを書き、広大なインターネットのこの小さな片隅に、私にとって一度きりの人生経験を記録し、助けを求める人々の力になれればと思っています。
