質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
87.20%
Cookie

HTTPにおけるCookieとは、クライアントのウェブブラウザ上に保存された一時的なデータを指します。クライアント側のJavaScriptでも、サーバー側のHTTPヘッダーでもクッキーの読み書き・修正・削除が可能です。

ASP.NET

ASP.NETは動的なWebサイトやWebアプリケーション、そしてWebサービスを構築出来るようにする為、Microsoftによって開発されたウェブアプリケーション開発フレームワークです。

Monaca

「Monaca」はiOS、Android、Windows向けのアプリ開発に対応した、Cordovaベースのモバイルアプリ開発プラットフォームです。HTML5、JavaScriptといったWeb標準技術を用いてモバイルアプリ開発を行うことができます。

受付中

【monaca】cookieを保存できない

退会済みユーザー

退会済みユーザー

総合スコア0

Cookie

HTTPにおけるCookieとは、クライアントのウェブブラウザ上に保存された一時的なデータを指します。クライアント側のJavaScriptでも、サーバー側のHTTPヘッダーでもクッキーの読み書き・修正・削除が可能です。

ASP.NET

ASP.NETは動的なWebサイトやWebアプリケーション、そしてWebサービスを構築出来るようにする為、Microsoftによって開発されたウェブアプリケーション開発フレームワークです。

Monaca

「Monaca」はiOS、Android、Windows向けのアプリ開発に対応した、Cordovaベースのモバイルアプリ開発プラットフォームです。HTML5、JavaScriptといったWeb標準技術を用いてモバイルアプリ開発を行うことができます。

1回答

0リアクション

0クリップ

910閲覧

投稿2021/08/10 00:33

編集2021/08/10 04:14

前提・実現したいこと

monacaでアプリを開発しています。ログイン認証するAPIから受け取ったcookieを別のAPIコール時に付加することができず困っています。

具体的にやりたいことは、
1.アプリのログイン画面で入力したID,パスワードをAPIに送信する。
2.APIは受信したID,パスワードを検証し問題なければcookie(認証用)を返す。
3.アプリはcookie(認証用)を保存する。
4.アプリの記事登録画面で入力した情報を、保存しているcookie(認証用)と共にAPIに送信する。
5.APIは受信したcookie(認証用)を検証し問題なければ記事登録を行う。
です。

質問は下記2点です。

  • monacaアプリでcookieを使用することはできるのでしょうか?ここ数日試行錯誤しているのですが解決しません。そもそもmonacaアプリでcookieは使用できるのか、と疑問に思った次第です。monacaアプリでcookieを登録するのではなく、APIからのcookie(サードパーティクッキー?)が使用できるのか、が知りたいです。

  • monacaアプリでcookieを使用することができる場合、どのような手続きが必要なのでしょうか?①axiosのオプションでwithCredentials: trueを設定する、②cookieにSameSite=None、Secure=trueの属性を付ける、以外に何かございましたらご教授いただきたいです。

【環境】
API側: Azure、IIS、ASP.NET
アプリ側: monaca、react、onsenui、axios、cordova10.0.0

発生している問題・エラーメッセージ

5でAPIがHTTPステータスコード401を返してしまいます。つまり4でcookie(認証用)がAPIに送信されていません。
さらに下記の理由からそもそも3でcookieが保存されていないのではないかと推測しました。

  • 2のAPI側でcookie(認証用)が返されていることを確認済み。
  • 4のAPI側でcookie(認証用)が付加されていないことを確認済み。
  • localkit(または同様の機能を実装したWEBアプリ)では問題なくcookie(認証用)がアプリ側に保存されAPIに送信されています。

実機(iPhone8 iOS14.7.1)で上記問題が発生します。

該当のソースコード

ログインAPIを呼び出すコードは下記です。このAPIは正常終了します。

javascript

axios.post("https://aaabbbccc.com/api/login", {id: '99999', pw: '123456'}, {withCredentials: true}) .then((response) => { // 正常終了 if(response.status == 200){ } }) .catch((error) => { // エラー if (error.response) { if (error.response.status == 401) { } else { } } else if (error.request) { } else { } });

記事登録APIを呼び出すコードです。このAPIは401で返ってきます。

javascript

axios.post("https://aaabbbccc.com/api/article", {content: 'あいうえお'}, {withCredentials: true}) .then((response) => { // 正常終了 if(response.status == 200){ } }) .catch((error) => { // エラー if (error.response) { if (error.response.status == 401) { alert('認証されていません'); } else { } } else if (error.request) { } else { } });

試したこと

下記を参照しAPI側のcookieにSameSite=None、Secure=trueが設定されるようにしました。
[Monaca] Web APIリクエスト時にCookie認証情報が渡されない

また、IIS側に下記設定を追加しました。
Access-Control-Allow-Credentials:true
Access-Control-Allow-Origin:monaca-app://monaca.io   ← config.xmlに設定したもの

以下のような質問にはリアクションをつけましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

リアクションが多い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

下記のような質問は推奨されていません。

  • 間違っている
  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

SurferOnWww

2021/08/10 01:11 編集

認証にベアラトークンでなくてクッキーを使っているのですか? クッキーを使うのはセキュリティ上非推奨なのですが良いのですか? 後でベアラトークンを使うことに方針変更するなんて話になると時間の無駄なので聞いてます。 クッキーを使っての認証システムは ASP.NET Identity 利用ですか? もし独自実装だとすると、第三者には詳細は分からないので、ここで聞いても話が通じないかもしれません。
退会済みユーザー

退会済みユーザー

2021/08/10 03:58

返信ありがとうございます。ASP.NET Identityを使用しています。今回はセキュリティを重視せずこのままクッキーの前提でお願いします。
SurferOnWww

2021/08/11 00:09 編集

ここのコメントは解答欄に移動しました。
SurferOnWww

2021/08/11 22:48

質問者さん、無言ですが、回答したのでそれに対するフィードバックを書こう。役に立った、立たなかったぐらいはすぐ返せるのでは? 役に立たなかったならどこがダメだったのかを書くとより期待する回答に近いものが出てくるかも。とにかく無言は NG です。
SurferOnWww

2021/08/13 02:34

回答のコメント欄の質問者さんの 2021/08/12 11:04 のコメントにレスしているので、それに対するフィードバックを書いてください。

まだ回答がついていません

会員登録して回答してみよう

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
87.20%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

Cookie

HTTPにおけるCookieとは、クライアントのウェブブラウザ上に保存された一時的なデータを指します。クライアント側のJavaScriptでも、サーバー側のHTTPヘッダーでもクッキーの読み書き・修正・削除が可能です。

ASP.NET

ASP.NETは動的なWebサイトやWebアプリケーション、そしてWebサービスを構築出来るようにする為、Microsoftによって開発されたウェブアプリケーション開発フレームワークです。

Monaca

「Monaca」はiOS、Android、Windows向けのアプリ開発に対応した、Cordovaベースのモバイルアプリ開発プラットフォームです。HTML5、JavaScriptといったWeb標準技術を用いてモバイルアプリ開発を行うことができます。