🥫 🧗🏻 🧕 Cookieがブロックされているユーザーの承認 🕴🏿 ✔️ 🏷️

すべてのブラウザには、サードパーティのサイトからのCookie（たとえば、現在のドメインとは異なるドメインを持つiframeからのCookie）を防ぐオプションがあります。一部のブラウザ（こんにちは、Apple）では、この機能はデフォルトで有効になっていますが、多くの場合、ユーザーは自分で有効にして安全に忘れてしまいます。その結果、開発者は必要なデータをCookieまたはlocalstorageに書き込むことができません。たとえば、VKontakte用のアプリケーションを開発するときに、このような問題が発生する場合があります。

この制限を回避するために、シンプルでエレガントなソリューションを共有したいと思います。

原則として、ユーザーを識別する他の方法がある場合、この問題はそれほど深刻ではなく、VK IDを使用してデータベースから必要なデータをいつでも記録または取得できます。しかし、特に数行を保存する必要がある場合、小規模なアプリケーションの場合、これは追加の負担になります。

幸いなことに、VKontakte APIには、VKサーバーにデータを保存するためのメソッド（キー値ストレージ）があります。そこからのデータの書き込みと読み取りのみが可能です。しかし、できる限り美しくしようとします。

Cookieにユーザーデータを書き込む必要があるとします（たとえば、Instagramにユーザー認証トークンを保存する必要がある場合）。主なアイデアは、CookieとVKontakteストレージの両方にデータを記録し、できるだけ早く記録することです。

var data = 'abcde'; //  ,       document.cookie = "userdata="+data+"; path=/; expires=Tue, 31 Dec 2013 23:59:59 GMT"; //         //     //        VK.api('storage.set', { key: 'userdata', value: data }, function(response) { //     ,   GET-   window.location = "/page_for_logined_users?userdata="+data; });

上記の例では、記録されたデータが必要なページにユーザーをリダイレクトしました（アプリケーションでは、これは着信トークンを使用するメインページです）。次回アプリケーションがロードされるときに、このデータがGETパラメーターから消え、VCストレージにのみ残ることは明らかです。もちろん、Javascript APIを使用してそれらを取得できますが、エレガントなソリューションを作成しています;-)。

アプリケーションのサーバー側でデータを取得できるようにするには、アプリケーション設定の「最初のAPIリクエスト」フィールドに入力する必要があります。

 method=storage.get&key=userdata&format=json&v=3.0

したがって、VKontakteは、アプリケーションにアクセスするときに、GETパラメーターapi_resultを渡します。これには、Cookieを含むJSONオブジェクトが含まれます。また、nginxでcookieをチェックすることを妨げるものはありません（形式をxmlに変更した場合）。

 if ($arg_api_result ~ "%3Cresponse%3E(.*)%3C%2Fresponse%3E") { set $userdata $1; rewrite ^ /page_for_logined_users?userdata=$userdata? redirect; }

サーバー側では、次のようなことができます。

 $userdata = (isset($_COOKIE['userdata'])) ? $_COOKIE['userdata'] : (isset($_GET['userdata'])) ? $_GET['userdata'] : false;

データを安全かつ健全に取得します。 nginxで提案された倒錯がなければ、 api_resultを解析するのに十分です：

 if (isset($_GET['api_result'])) { $data = json_decode($_GET['api_result'], 1); $userdata = (!empty($data['response'])) ? $data['response'] : false; }

PSまた、この機会を利用して、上記の方法を使用して負荷を最適化する興味深い方法に注目します。アプリケーションで、CookieまたはVKストアに保存する特定のトークンが必要だとしましょう。ただし、アプリケーション自体は静的なHTMLファイルであり、たとえば、サーバー言語はこのトークンをアプリケーションに挿入するためにのみ必要です。もちろん、JSに必要なCookieまたはVKontakteストレージのデータを要求することもできますが、エレガントなソリューションを作成しています;-)。

そのため、nginx（またはApache）を次のように構成できます。

 #    if ($http_cookie ~ "userdata") { set $token $cookie_userdata; set $gotohtml "1"; } #     API if ($arg_api_result ~ "%3Cresponse%3E(.*)%3C%2Fresponse%3E") { set $token $1; set $gotohtml "1"; } #     (http://example.com/) if ($request_uri != /$is_args$args) { set $gotohtml ""; } #      if ($gotohtml ~ 1) { rewrite ^ /index.html#$token? redirect; }

さて、Javascriptで必要なデータを取得します。

 var token = window.location.hash.substring(1);

したがって、ログインしているすべてのユーザーをhtmlファイル（nginxが非常に迅速に提供します）に送信し、必要なパラメーターをハッシュで渡すことができます。また、ファイル自体は通常CDNに取り出すことができるため、サーバーの負荷がさらに軽減されます。

Cookieがブロックされているユーザーの承認

More articles: