Q&A
> ①ブログAの運営者がライブラリ
これは、「当サイト」つまり質問者さんが提供するライブラリ、ということでしょうか？
###質問概要
JSライブラリについて質問です。
以下のような「WEB上の一文にいいねができるライブラリ」は開発可能ですか？
もし可能でしたら「Cookieをこう使えばできる」といった程度のあいまいさで構いませんので、実装の流れをご教示願えませんでしょうか。
###ライブラリ機能概要
①ブログAの運営者がライブラリを導入する（<head>内に<script>を書く）
②ブログAの訪問者（太郎）が、ブログA上のある一文を選択すると、ライブラリの機能によっていいねボタンが出現する
③太郎がいいねする
③太郎が私のWEBサービス（当サービス）にアカウントを持っていれば、そのアカウントでは「太郎がいいねした一文」を一覧できる
という流れです。
###個人的に調べて、できそうな部分と、難しいと思う部分
太郎がブログA上でいいねして、その一文を当サービスに送ることはできますよね。
しかしそれを受け取った当サービスで、「この一文を送ったのは太郎だな」と判定することは難しいのではないか？という点が疑問です。可能でしたら方法を知りたいです。
###他の実現方法
太郎がブログＡへの訪問時に、いちいち「当サービスへログイン」というステップを介せばできますが、まさかそんな面倒なことをさせたくありません。
あとはChrome拡張機能なら、導入時に太郎が当サービスへログインすれば、ブログAでもBでも実現できると思いますが、今回は拡張機能ではなくJSライブラリでの実現可能性をお尋ねしたいと思います。
宜しくお願い致します。
###補足
ブログAというのは外部の個人ブログで、私が運営しているものではないという前提を補足させて頂きます。
回答3件
0
Cookie
@miyabi_takatsuk さんが回答されたように、Cookieはドメイン単位で保存される為、
- 訪問者が当サービスにログイン -> Cookieに認証情報を保存
- 訪問者がブログAで「いいね」をクリック -> Fetch APIで当サービスにリクエスト -> Cookieで認証
という実装は可能です。
Cookieの他に Session Storage もあり、サーバサイドスクリプトの資料を読みつつ、実装手段の選定が必要になります。
OAuth
他所サイトのデータ取得認可を行う仕組みに OAuth があります。
Re: clean さん
投稿2021/04/04 15:09
総合スコア18189
確認が遅くなり申し訳ございません。Fetch API も OAuth も知らない言葉でしたのでいい学びの機会となりそうです。どうもありがとうございます。
一点お伺いしたいのですが、「別窓を介さずワンクリックで」となった場合、そのどちらかで可能でしょうか？
例えば今のこのteratailのページにも「B！」マークがありますが、これをクリックしときに、別窓を介さず、即座に保存される。といったことです。
調べた感じ、Fetch API についてのこの記事（https://qiita.com/sotasato/items/31be24d6776f3232c0c0）によれば、「>body の中身を見る」ができるみたいなのでワンクリックでいけそうですが、いかんせん、Fetch API も OAuth もいずれの方法も学習コストが高く思えましたので、この点を事前にお伺いできましたら幸いです。
> 「別窓を介さずワンクリックで」となった場合、そのどちらかで可能でしょうか？
clickイベントハンドラ内でFetch APIを使用すればお望みの動作になると思います。
OAuthは実装したことは有りませんが、仕組みを見る限りではトークンをFetch APIでリクエストすれば良い様に読めました。
※他サイトから自サイトへクロスドメイン通信が発生する為、Access-Control-Allow-Originレスポンスヘッダを返すようにサーバの設定が必要になります。
https://developer.mozilla.org/ja/docs/Web/HTTP/CORS
横からすみません。
サードパーティクッキーって、現在も有効な手段なのでしたっけ……？
トラッキング制限の流れでかなり使いにくくなっている印象でしたが……
Fetch APIで自ドメインにHTTPリクエストする際に「自ドメインにCookie送信」するので、サードパーティCookieは使用しない認識でした。
自ドメインでログインしていなかった(Cookieが送信されなかった)ら、Locationヘッダで自サイトのログインページに遷移したり、iframe要素で自サイトのログインページを開いて認証させる等の対策は必要ですが、CORSを突破したら自サイトで完結する認識です。
ありがとうございます。
ちょっと私では理解ができませんでしたが、そういうことが可能なのですね。
私が間違っているのかもしれません。
怪しい部分は指摘して頂ければ幸いです。
いえ、ちょっと実装の流れがわからなかったもので、いろいろ考えているところです。
お手数おかけしました。
なかなか軽い気持ちで手は出せませんね…詳しいご解説誠にありがとうございます。必要なワードは頂けたようなので頑張ってみたいと思います。
0
ベストアンサー
大変失礼しました。
Web Strageにおいても、
各オリジン毎（ようはサイトドメイン）に保持されるもののため、
サイト間での、情報のやりとりに関しては、
JavaScriptのみでは、不可能です。
オリジナルでの実装ならば、
サーバーサイドの使用を検討してください。
------- 下記は間違っている ------
JavaScriptでは、IPなどの、固有情報は取得できないため、
基本的に、情報を取得はできませんが、
Web Strage APIを使用すれば可能になります。
Web Storage API の使用 - Web API | MDN
これを使えば、
JavaScript側のコントロールにて、
ブラウザが変わらない限り情報を保持することが可能なため、
そのライブラリにて、Web Strageを使い、
情報を保持させ、
当サイトにて、その情報が存在するユーザー、として、確認が可能になるでしょう。
細かい使い方などは、ご自身でお調べください。
ただし、そのライブラリを使ってもらうブログにも、
ユーザーの情報を使いますよーなどの、
プライバシーポリシー表記などが必要になりますので、
そこらへんの法律関連は調べた方がいいかと思います。
ちなみに、今回の質問の要件はクッキーではできません。
あれ、URL別に保持されるものなので。
投稿2021/04/04 14:35
編集2021/04/04 14:41総合スコア9555
ありがとうございます。驚きました。localStorage.setItem、getItemは普通に「クッキーより容量が大きい」という目的でのみ使っていました。しかしこれは、外部サイトから取得できてしまうんですね。ありがとうございました。よく調べないとでした。
ご修正ありがとうございます。助かります。
ところで、「サーバーサイドの使用」というのはどういう意味になりますか？今のこのteratailのページには「B！」マークがあり、質問のように太郎を区別（はてなの外部からはてなアカウントを区別）できるようですが、これの実現が「サーバーサイドの使用」ということですか？
修正見てくれてよかった・・・。
いえ、B!などのものは、その各サイトの別窓を表示し、その別窓上で改めて記録するため、
そのサイト上でサーバーサイドを使用していることになります。
つまり、オリジナルでやるなら、
「当サイト」の別窓表示を、JavaScriptで出し、
その別窓にて、（その別窓は当サイトのページなので）サーバーサイドを実行させる、
という流れです。
ただ、一応、ドメイン間で、やれる方法はあるようですが
https://qiita.com/Sr_Bangs/items/94c255d16f1a3caa0cdd
今回の要件は、「不特定多数のブログに入れてもらう」というものなので、
上記記事の内容で実装できるかは定かではありません。
なるほど。別窓で当サイトを開くから、その開かれたURLによって当サイトのクッキーないしローカルストレージを取得でき、その取得でもって太郎を区別できるということですね。
一度別窓を開かないといけないとなると、「いいねするだけ」なのにストレスですね。ワンクリックでできたらいいのですが…再検討します。
たびたびご丁寧にありがとうございました！
qiitaのリンクまで、ありがとうございます。できそうですが、仰る通りやや不安ですね…
あなたの回答
tips
プレビュー
