場合によっては、フロントエンドのシングル サインインなどの愚かな要件に遭遇することがあります。ニーズに遭遇したら、解決策を考えなければなりません。
ここでは、シンプルなフロントエンドのシングル サインイン ソリューションを紹介します。
使用されるのは、postMessage のクロスドメイン情報送信とストレージ監視です。
この記事で使用するナレッジ ポイントは、静的リソース サービスの koa の設定、クロスドメイン、postMessage の使用、ストレージの監視です。
最初のステップは、異なるポートを持つ 2 つのサービスをセットアップすることです。ここでは koa2 を使用して、異なるポートに対する 2 つのサービスを構築し、実際の作業で発生する必要があるクロスドメイン状況をシミュレートします。
これは非常にシンプルで、主に koa-static ミドルウェアを使用します。
構築も非常に簡単です。ノード関連の知識を学びたい場合は、WeChat shouzi_1994 に私を追加するか、ブログの下に連絡先情報を残してください。ここではあまりナンセンスにはなりません。ビデオには詳細な構築手順が記載されています。
// localhost:4000const Koa = require('koa'); const path = require('path')const static = require('koa-static')const app = new Koa();//静的リソースのパスを設定しますconst staticPath = './static'app.use(static( path.join( __dirname, staticPath) )) console.log (サービスはポート 4000 で開始します) app.listen(4000);// localhost:3000const Koa = require('koa'); const path = require('path')const static = require('koa-static' )const app = new Koa();//静的リソースのパスを設定します const staticPath = './static'app.use(static( path.join( __dirname, staticPath) )) console.log (サービスはポート 4000 で開始します) app.listen(4000); 2 番目のステップ、クロスドメイン通信 postMessageまずは postMessage API を見てみましょう
otherWindow.postMessage(メッセージ, targetOrigin, [転送]);
その他のウィンドウ
別のウィンドウへの参照 (iframe の contentWindow プロパティ、window.open の実行によって返されるウィンドウ オブジェクト、または名前付きまたは数値インデックス付きの window.frames など)。
メッセージ
他のウィンドウに送信されるデータ。構造化クローン作成アルゴリズムによってシリアル化されます。これは、データ オブジェクトを自分でシリアル化することなく、制限なくターゲット ウィンドウに安全に転送できることを意味します。 [1]
ターゲット原点
ウィンドウのorigin属性を介してメッセージ・イベントを受信できるウィンドウを指定します。その値は文字列(無制限を示す)またはURIです。メッセージを送信するときに、ターゲット ウィンドウのプロトコル、ホスト アドレス、ポートのいずれかが targetOrigin で指定された値と一致しない場合、メッセージは送信されません。これら 3 つが完全に一致する場合にのみメッセージが送信されます。このメカニズムは、どの Windows メッセージに送信できるかを制御するために使用されます。たとえば、postMessage を使用してパスワードを送信する場合、このパラメータは特に重要であり、その値が対象の受信者の元の属性と正確に同じであることを確認する必要があります。パスワードを含むメッセージを削除し、悪意のある第三者によるパスワードの傍受を防ぎます。メッセージをどのウィンドウに送信する必要があるかが正確にわかっている場合は、代わりに targetOrigin に常に正確な値を指定してください。正確なターゲットを指定しないと、データに関心のある悪意のあるサイトにデータが漏洩する可能性があります。
転送オプション
これはメッセージと同時に配信される一連の Transferable オブジェクトであり、これらのオブジェクトの所有権はメッセージの受信者に譲渡され、送信者は所有権を保持しなくなります。
中国語で仕組みを説明してみましょう。
転送される (親) 子ウィンドウ postMessage (送信されたコンテンツ、転送先のアドレス、[権限が転送されるかどうか (通常は使用されない)])。
あらかじめ言っておきますが、ドメインを越えて転送したい場合は親子ページ、つまりjs Open経由のページか、iframeにネストされたページである必要があります。
さて、コードを書き始めましょう
<!DOCTYPE html><html lang=ja><head> <meta charset=UTF-8> <meta name=viewport content=width=device-width、initial-scale=1.0> <meta http-equiv=X-UA -互換コンテンツ=ie=edge> <title>ドキュメント</title></head><body> <!-- postMessage と iframe は一般的なクロスドメインの問題を解決します -->私はポート 3000 の Web サイトのコンテンツです <button onclick=send()>息子にメッセージを送信します</button> <iframe style=display:none src=http://localhost:4000 Frameborder=0></iframe ><script> function send() { window.frames[0].postMessage({a:1},http://localhost:4000); // クロスドメイン サブページのメッセージ イベントをトリガーします。 window.addEventListener('message', function(event) { console.info('息子が手紙を書きました',event); }, false);</script></body></html> <!DOCTYPE html><html lang=ja><head> <meta charset=UTF-8> <meta name=viewport content=width=device-width、initial-scale=1.0> <meta http-equiv=X-UA -互換性のあるコンテンツ=ie=edge> <title>ドキュメント</title></head><body> <!-- postMessage と iframe は一般的なクロスドメインの問題を解決します -->私はポート 4000 の Web サイトのコンテンツです <button onclick=send()>お父さんにメッセージを送信します</button> <iframe style=display:none src=http://localhost:4000 Frameborder=0></iframe> <スクリプト> window.addEventListener(message,function(event){ console.log(お父さんが書いた:, イベント) },false) function send() {parent.postMessage({a:1}, 'http://localhost:3000'); // }</script></body></html>この時点で、親ページと子ページ間のクロスドメイン通信を実装しましたが、この通信は 1 つのウィンドウ内でのみ発生し、期待した効果が得られません。
値の変化を監視し、迅速に対応するこの時点で、ブラウザ上で同じドメイン名を持つすべての Web サイトで何が表示されるのかを誰もが考える必要があります。
そうです、ストレージ、これを監視する必要があるだけです。
ここでは、localStorage をリッスンすることを選択し、サブページを改善します。
<!DOCTYPE html><html lang=ja><head> <meta charset=UTF-8> <meta name=viewport content=width=device-width、initial-scale=1.0> <meta http-equiv=X-UA -互換性のあるコンテンツ=ie=edge> <title>ドキュメント</title></head><body> <!-- postMessage と iframe は一般的なクロスドメインの問題を解決します -->私はポート 4000 の Web サイトのコンテンツです <button onclick=send()>お父さんにメッセージを送信します</button> <iframe style=display:none src=http://localhost:4000 Frameborder=0></iframe> <スクリプト> window.addEventListener(message,function(event){ console.log(お父さんが書いた:,event) var data = JSON.stringify(event.data) window.localStorage.setItem(data,data) },false) window.onstorage(function(st){ console.log(st.key,st.value) }) function send() {parent.postMessage({a:1 }, 'http://localhost:3000'); // }</script></body></html>ドメインを越えて送信されるコンテンツに応答できるようになりましたか?
考える2 ページ間のクロスドメイン通信が実現できたので、3 ページ以上のクロスドメイン通信を行うにはどうすればよいでしょうか?実際、真実はあります。本当のことを話したので、あなたもその書き方を体験してみてください。
以上がこの記事の全内容です。皆様の学習のお役に立てれば幸いです。また、VeVb Wulin Network をご支援いただければ幸いです。