常連

### 実現したいこと

Gmailのように、複数アカウントを持っていて、
アカウントAでログインした後に、画面右上のアカウント選択で別のアカウント（アカウントB）を選択すると別タブでアカウントBのGmail画面が表示され、本タブでログインしたアカウントAと別タブでログインしたアカウントB、
両方とも操作できるようになると思います。

このようなセッション管理の仕組みが知りたいです。技術的にどのような知識が必要でしょうか？

想定しているWEBアプリケーションの構成は、
javascriptのFWはvue.jsでSPA。
サーバサイドはサーバレス（AWS Lambda Java）のインフラアーキテクチャとなります。

ざっくりとした質問で恐縮ですが、詳しい方、ご教示頂けますと幸いです。
何卒宜しくお願致します。

同ブラウザ、別タブでそれぞれセッション管理がしたい

### 発生している問題・エラーメッセージ
Next.js(Vercel) Express(APIGateway, LambdaをServerlessFrameworkで管理)
上記の構成でWebアプリケーションを開発しています。
認証でCookieを使用するのですが本番環境だとCookieがブラウザに保存されず困っております。

APIGateway周辺が問題なのかと思いましたが応答ヘッダーにはちゃんとSet-Cookie属性が付いているのでどこが原因なのかわからないです。
ブラウザはFireFoxとChromeで試しましたがどちらもダメでした。
エラー文も警告文も出ず途方に暮れているので何か原因らしきものがわかれば教えていただけると助かります。

####開発環境でのCookie
![開発環境](2ac4feffed221ffd3462900f153d071f.png)

####本番環境でのCookie(保存されていない)
![本番環境](28516dc7861e5652743d9d816eb894be.png)

####ブラウザのdeveloperConsole出力
```
POST
Schema: https
Host: https://acyt1ofpm9.execute-api.ap-northeast-1.amazonaws.com/dev/api/v1/auth/login
Filename: /dev/api/v1/auth/login

ステータス
200
OK
バージョンHTTP/2
転送量1.32 KB (382 バイト サイズ)
リファラーポリシーstrict-origin-when-cross-origin
```

```
応答ヘッダー
access-control-allow-credentials: true
access-control-allow-origin: https://mizuho-engineering-timecard-system.vercel.app
content-length: 386
content-type: application/json; charset=utf-8
date: Mon, 15 Nov 2021 14:04:46 GMT
etag: W/"182-3X2mEAg0rF0aNx3B2MUnxo2WQww"
set-cookie: refreshToken=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJuYW1lIjoi566h55CG6ICFIiwicm9sZSI6ImFkbWluIiwiaWF0IjoxNjM2OTg3NDg4LCJleHAiOjE2NDQ3NjM0ODh9.XcanhEVZDHsLWw-tKSRAUZmQvGFuH1cbSGGUqrRmpN8;
 Path=/; Secure; SameSite=None
vary: Origin
via: 1.1 64deaa7770e2273b39002266d56d8170.cloudfront.net (CloudFront)
x-amz-apigw-id: I2VXuF8wNjMFUeg=
x-amz-cf-id: -nIggNVibO-aX4w-wuGL0x0iSmwnjLgOi4IYDNCKugADqC6IhFV-0A==
x-amz-cf-pop: NRT12-C4
x-amzn-remapped-content-length: 386
x-amzn-requestid: 0c574b80-c141-4d29-973c-a2e7a8f6bfc6
x-amzn-trace-id: Root=1-619268fe-656b7847664c394d3e7f157f;Sampled=0
x-cache: Miss from cloudfront
x-powered-by: Express
``` 
```
要求ヘッダー
Accept
	application/json, text/plain, */*
Accept-Encoding
	gzip, deflate, br
Accept-Language
	ja,en-US;q=0.7,en;q=0.3
Authorization
	Bearer
Connection
	keep-alive
Content-Length
	43
Content-Type
	application/json
Cookie
	refreshToken=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJuYW1lIjoi566h55CG6ICFIiwicm9sZSI6ImFkbWluIiwiaWF0IjoxNjM2OTg3NDE1LCJleHAiOjE2NDQ3NjM0MTV9.FRln36Pl6XbkUWuE4aMsFimskyWAwbdo4yNd0XqBQZA
Host
	acyt1ofpm9.execute-api.ap-northeast-1.amazonaws.com
Origin
	https://mizuho-engineering-timecard-system.vercel.app
Referer
	https://mizuho-engineering-timecard-system.vercel.app/
Sec-Fetch-Dest
	empty
Sec-Fetch-Mode
	cors
Sec-Fetch-Site
	cross-site
TE
	trailers
User-Agent
	Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/64.0.3282.140 Safari/537.36 Edge/18.17763
```
```
応答Cookie
refreshToken:
  path: "/"
  samesite: "None"
  secure: true
  value: eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJuYW1lIjoi566h55CG6ICFIiwicm9sZSI6ImFkbWluIiwiaWF0IjoxNjM2OTg3NDg4LCJleHAiOjE2NDQ3NjM0ODh9.XcanhEVZDHsLWw-tKSRAUZmQvGFuH1cbSGGUqrRmpN8

要求Cookie
refreshToken: eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJuYW1lIjoi566h55CG6ICFIiwicm9sZSI6ImFkbWluIiwiaWF0IjoxNjM2OTg3NDE1LCJleHAiOjE2NDQ3NjM0MTV9.FRln36Pl6XbkUWuE4aMsFimskyWAwbdo4yNd0XqBQZA
```
応答Cookieと要求CookieでrefreshTokenの値が違うのは関係ないでしょうか?

### プログラム側(Express)のコード

```ここに言語名を入力
..........


    if (process.env.NODE_ENV === "production") { //本番環境ではsameSite: "none"とsecure: trueを設定しないとコンソールで警告が出る
      res.cookie("refreshToken", refreshToken, { sameSite: "none", secure: true });
    } else {
      res.cookie("refreshToken", refreshToken);
    }


..........
```
関係ないかもしれませんが一応ServerlessFrameworkの構成ファイルも載せておきます
```serverlessyml
service: mizuho-timecard

provider:
  name: aws
  runtime: nodejs12.x
  region: ap-northeast-1
  iamRoleStatements:
    - Effect: Allow
      Action:
        - dynamodb:Query
        - dynamodb:Scan
        - dynamodb:GetItem
        - dynamodb:PutItem
        - dynamodb:UpdateItem
        - dynamodb:DeleteItem
      Resource:
        - arn:aws:dynamodb:${self:provider.region}:*:table/Timecards
        - arn:aws:dynamodb:${self:provider.region}:*:table/Timecards/index/*

package:
  exclude:
    - script/**
    - .git/**
    - test/**
    - src/**
    - README.md
    - .env

functions:
  timeCard:
    handler: dist/lambda.handler
    events:
      - http: ANY /
      - http: 'ANY {proxy+}'

resources:
  Resources:
    timecards:
      Type: AWS::DynamoDB::Table
      Properties:
        TableName: Timecards
        AttributeDefinitions:
          - AttributeName: user
            AttributeType: S
          - AttributeName: attendance
            AttributeType: S
        KeySchema:
          - AttributeName: user
            KeyType: HASH
          - AttributeName: attendance
            KeyType: RANGE
        GlobalSecondaryIndexes:
          - IndexName: usersIndex
            KeySchema:
              - AttributeName: attendance
                KeyType: HASH
            Projection:
              ProjectionType: ALL
            ProvisionedThroughput:
              ReadCapacityUnits: 1
              WriteCapacityUnits: 1
        ProvisionedThroughput:
          ReadCapacityUnits: 1
          WriteCapacityUnits: 1
        TimeToLiveSpecification:
          AttributeName: "expirationTime"
          Enabled: true
```

### 補足情報（FW/ツールのバージョンなど）

```
npm list --depth 0
mizuho-timecard@1.0.0 /home/kanta/workspace/mizuho-timecard/mizuho-timecard-backend
├── @fortawesome/free-solid-svg-icons@5.15.4
├── @fortawesome/react-fontawesome@0.1.16
├── @line/bot-sdk@7.4.0
├── @types/bcrypt@5.0.0
├── @types/cors@2.8.12
├── @types/csurf@1.11.2
├── @types/express-session@1.17.4
├── @types/express@4.17.13
├── @types/jest@27.0.2
├── @types/jsonwebtoken@8.5.5
├── @types/node-geocoder@3.24.2
├── @types/node@16.10.3
├── @types/sinon-express-mock@1.3.9
├── @types/supertest@2.0.11
├── @types/xlsx-populate@1.19.1 (git+ssh://git@github.com/JanLoebel/types-xlsx-populate.git#7ef81174e495fe9ef2689bd329499f81a2a93d43)
├── @typescript-eslint/eslint-plugin@5.3.1
├── @typescript-eslint/parser@5.3.1
├── @vendia/serverless-express@4.3.11
├── aws-sdk@2.995.0
├── bcrypt@5.0.1
├── body-parser@1.19.0
├── cors@2.8.5
├── csurf@1.11.0
├── dayjs@1.10.7
├── eslint-config-prettier@8.3.0
├── eslint@8.2.0
├── express-validator@6.12.2
├── express@4.17.1
├── faker@5.5.3
├── geo-position.ts@1.4.1
├── jest@27.2.5
├── jsonwebtoken@8.5.1
├── node-geocoder@3.27.0
├── nodemon@2.0.13
├── npm-run-all@4.1.5
├── prettier@2.4.1
├── rimraf@3.0.2
├── sinon-express-mock@2.2.1
├── sinon@11.1.2
├── supertest@6.1.6
├── ts-jest@27.0.5
├── ts-node-dev@1.1.8
├── ts-node@10.2.1
├── typescript@4.4.4
└── xlsx-populate@1.21.0
```
```
sls --version
Framework Core: 2.60.0 (standalone)
Plugin: 5.4.4
SDK: 4.3.0
Components: 3.17.1
```

Set-Cookieは返ってきているがCookieがブラウザに保存されない

様々なログインフォームがあるサイトでチェックボックスにチェックを入れて「ログイン状態を保存する」が出来るものがあります。

あれと同じものを作ろうとした場合、入力されたメアド、パスワードをクッキーに保存しておいて、ログインページが表示された際に、クッキーに保存されたメアド、パスワードがあったらセットするということをしているのでしょうか？

その場合、クッキーには生のパスワードが保存されると思いますが、クッキーは他の人がその人のパソコンを触れるなら見ることが出来る気がしますし、それでいいものなのか気になっています。

それとも、サーバ側でセッションの有効期限を無限にしてログアウトされないようにしてるのでしょうか？
それだとブラウザを閉じたらログアウトしてしまうような気もしますがそうではないでしょうか？

今どき、ブラウザやスマホの機能でパスワードを記憶してるからなくてもいいのかなという気もしないではないですが、ログアウトしないでずっとログインしていられるならそれもいいかなと考えています。

「ログイン状態を保存する」は通常何をしてる？

$_GET, $_POST などの値を使用する場合、よくサンプルとして

```php
$str = isset($_POST['str']) ? $_POST['str'] : '';
```

のようにスーパーグローバル変数を直接扱っているものを見かけます。

```php
$str = $_POST['str'];
```

なんて記述は論外ですが、上の三項演算子のモノでも、IDE によっては「スーパーグローバル変数には直接アクセスしないでね。」と警告をクラってしまいます。

少し調べてみたのですが、理由は以下のようでした。
> スーパーグローバル変数は、変更可能な変数であるため、直接アクセスすべきではない。

利便性も良いので、`filter_input()`を利用することは嫌ではないのですが、警告内容に納得がいっていません。

スーパーグローバル変数に直接アクセスしない方がいい理由とはなんなんでしょうか？
できれば具体的な内容も交えて説明いただけると助かります。
少しとんがった回答でもありがたいです。よろしくお願いいたします。

スーパーグローバル変数に直接アクセスしない方がいい理由

**セッションの有効期限を例えば3日後ぐらいに設定したら、クッキーの有効期限にも反映されるのでしょうか？**
・逆に、クッキーの有効期限を設定しても、セッションの有効期限には反映されない？

**「セッションの有効期限」と「クッキーの有効期限」は連動しているのでしょうか？**

セッションの有効期限を設定したら、クッキーの有効期限にも反映される？

### 前提・実現したいこと
C#のHttpClientでURIにjsonデータを送り、ログインするというプログラムを作っています。
ログインすることはできたのですが、Cookieの保持がおそらくできておらず、ログイン後のユーザーの情報が得られません。勉強中で初歩的なものかもしれませんが教えていただきたいです。


### 発生している問題・エラーメッセージ
ログイン([http://developers.u-aizu.ac.jp/api?key=judgeapi/session_POST](http://developers.u-aizu.ac.jp/api?key=judgeapi/session_POST)後に、ユーザーの"self"情報が得られない（ログインのみできる）

下のメッセージはselfのGET（[http://developers.u-aizu.ac.jp/api?key=judgeapi%2Fself_GET](http://developers.u-aizu.ac.jp/api?key=judgeapi%2Fself_GET)）を送った時のメッセージです。


```

[{"id":1102,"code":"INVALID_REFRESH_TOKEN_ERROR","message":"This user is expired."}]```


```C# 
ソースコード
```C#
class API
    {
        //Login
        private void Login()
        {
            string user, password;
            Console.WriteLine("username >>>");
            user = Console.ReadLine();
            Console.WriteLine("password >>>");
            password = Console.ReadLine();
            var task = Task.Run(() => {
                return Post_Login(user, password);
            });
            var result = task.Result;
　　　　　　　Console.WriteLine(task.Result);　//ログイン情報の表示がされる
        }

        async public Task<string> Post_Login(string id, string pass)
        {
            var parameters = new Dictionary<string, string>()
            {
            };
            var json = "{\"id\":\"" + id + "\",\"password\":\"" + pass + "\"}";
            Console.WriteLine(json); //json確認用の表示
            var content = new StringContent(json, Encoding.UTF8, "application/json");

            // クッキー準備
            CookieContainer cc = new CookieContainer();
            cc.Add(new Uri("https://judgeapi.u-aizu.ac.jp"), new Cookie("test", "value"));

            using (var handler = new HttpClientHandler())
            
            using (var client = new HttpClient())
            {
                var response = await client.PostAsync($"https://judgeapi.u-aizu.ac.jp/session", content);
                var cookie = response.Headers.GetValues("Set-Cookie").First();
                Console.WriteLine("content ->> " + content);
                Console.WriteLine("cookie --> " + cookie + "\n");
                content.Headers.Add("Cookie", cookie);

                // クッキー設定
                handler.CookieContainer = cc;
                //クッキー保存
                cc = handler.CookieContainer;
                Console.WriteLine("cc --> " + cc.ToString());

                return await response.Content.ReadAsStringAsync();
            }
        }

        //GET関数 Get(URI)で実行
        private void Get(string URI)
        {
            var task = Task.Run(() => {
                return GET(URI);
            });

            string[] numbers = new string[100];
            String str = task.Result;
            System.Console.WriteLine(str); //selfデータの表示（ここでエラーが起きる）
        }
        async public Task<string> GET(string URI)
        {
            using (var client = new HttpClient())
            {
                var uri = $"" + URI + "";
                
                var response = await client.GetAsync(uri);
                
                //UTF-8として変換

                return await response.Content.ReadAsStringAsync();
            }
        }
　　　　　public static void Main(string[] args)
        {
            API obj = new API();
            obj.Login(); //ログインの関数を呼び出す
            obj.Get("https://judgeapi.u-aizu.ac.jp/self");　//selfデータを得る（この関数内でエラーが起きる）
```

### 試したこと

selfのGETを送った際に、ユーザー認証がうまくいっていないので、おそらくCookieの保存がうまくいっていないのではと思いました。
https://teratail.com/questions/14551 色々調べてみたのですが解決できなかったです。

### 補足情報
visual studio for mac,.Net Framework4.7.2,

[http://developers.u-aizu.ac.jp/index](http://developers.u-aizu.ac.jp/index)
のapiを使っています。

C#のHttpClientでのCookieを使ったログインの維持

###概要
あるタイミングで突然、Cookieが保存できなくなりました。
原因と思われること、解決策など思い当たる方は教えていただければ幸いです

###状況
・あるサイトの会員管理システムをPHPで組んでいる
・半年以上、問題なく稼働していたシステムである
・PHP Version 5.4.23
・あるタイミングで「ログインできない」現象が多発。
 ・このタイミングで、コードの変更はしていない。
 ・このタイミングで、サーバー業者が Apacheのバージョンを1.3から2.2に切り替えていた
 ・このタイミングで、PHPのバージョンは変わっていない

###問題発生後、調査した結果
・問題がおきているのは、複数の環境 Mac+Firefox、Win+IE、Win+Chromeなど様々
・すべての人がログインできないわけではない。使えている人も多数いる。
・もろもろ問題の切り分けと検証をした結論としては、Cookieの書き込みができていない＝ログインできないという状況だった。
・具体的に現象の起きているマシンでは、cookie値がすでにセットされているところに、たった１行以下のコードを書いただけでも、Cookie値が書き換わらない状況だった。
```lang-php
<?php
setcookie('logindata', '', time()-3600, '/', $_SERVER["SERVER_NAME"]);
?>
```
・なお、サーバーのタイムスタンプが正確であること、$_SERVER["SERVER_NAME"] が正常に取得できていることは確認済。
・ブラウザの設定でCookieを使用する設定になっているのも確認済。

###対応
・ひとまず、Chromeユーザーは、ブラウザの設定からCookieを完全クリアしてもらうことで問題解決した。
・他ブラウザも同様に対応していく予定。

###質問
以下、みなさまご教授ください。
・今回の現象のトリガーとしては、状況証拠からすると、Apacheのバージョンアップで間違いないと思われますが、サーバー側の変更でブラウザのCookieの挙動に影響を与えるものでしょうか？
・そもそも、何か特定の条件によって、Cookieの書き込みできなくなるということがありうるものでしょうか？

よろしくお願いいたします。

PHPでCookieが保存されない

### 実現したいこと
よく自治体サイトであるような背景色、文字サイズ拡大ボタンを設置し、
ページが遷移してもその状態が保持されるよう実装したいです。

### 発生している問題・分からないこと
ヘッダーにボタンを設置し、それをクリックすることで背景色や文字サイズを変更させるところまでは実装できたのですが、
この状態をcookieを利用してページ遷移した場合にも保持させるというところで躓いています。

背景色変更ボタンは、style_dummy.cssという空のCSSファイルを切り替えています。
以下ソースコードの内容にCookieに値を保存させる記述はどのようになるのでしょうか。



### 該当のソースコード

```index.html
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <title>閲覧支援機能デモ</title>
    <meta name="description" content="【ページの説明文】" />
    <meta name="robots" content="index,follow" />
    <link rel="stylesheet" href="css/style.css" />
    <link id="changeStyle" rel="stylesheet" href="css/style_dummy.css" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head>

<body>
    <div class="inner">
        <ul class="support_list">
            <li class="support_size_btn">
                <ul>
                    <li class="size_btn"><button class="medium" type="button">標準</button></li>
                    <li class="size_btn"><button class="large" type="button">拡大</button></li>
                </ul>
            </li>
            <li class="support_bgcolor_btn">
                <ul>
                    <li class="bg_btn"><button class="colorWht">白</button></li>
                    <li class="bg_btn"><button class="colorBlk">黒</button></li>
                    <li class="bg_btn"><button class="colorBlu">青</button></li>
                </ul>
            </li>
        </ul>
        <div class="container">
            <p>ここに本文が入ります。文字サイズ・色、背景色が選択したボタンによって変わります。</p>
        </div>
    </div>

    <script src="js/function.js"></script>
</body>

</html>
```

```style.css
@charset "utf-8";

html {
    font-size: 62.5%;
    background-color: #fff;
    color: #000;
}
.inner {
    width: 1100px;
    margin: 0 auto;
}

.support_list {
    list-style: none;
    display: flex;
}
.support_list > li > ul {
    display: flex;
    list-style: none;
}
.support_list > li > ul > li > button {
    background-color: #fff;
    border-right: none;
    cursor: pointer;
    font-size: 1.6rem;
}
.support_list > li > ul > li:last-child > button {
    border-right: 2px solid #000;
}
.support_bgcolor_btn .colorBlk {
    color: #fff;
    background-color: #000;
}
.support_bgcolor_btn .colorBlu {
    color: #ee0;
    background-color: #47e;
}

p {
    font-size: 1.6rem;
}
```

```style_black.css
@charset "utf-8";

html {
    background-color: #000;
    color: #fff;
}
.support_list > li > ul > li > button {
    background-color: #000;
    color: #fff;
    border-top: 2px solid #fff;
    border-right: none;
    border-bottom: 2px solid #fff;
    border-left: 2px solid #fff;
}
.support_list > li > ul > li:last-child > button {
    border-right: 2px solid #fff;
}
.support_bgcolor_btn .colorBlk {
    color: #fff;
    background-color: #000;
}
.support_bgcolor_btn .colorBlu {
    color: #fff;
    background-color: #000;
}


```

```style_blue.css
@charset "utf-8";

html {
    background-color: #47e;
    color: #ee0;
}
.support_list > li > ul > li > button {
    background-color: #47e;
    color: #ee0;
    border-top: 2px solid #ee0;
    border-right: none;
    border-bottom: 2px solid #ee0;
    border-left: 2px solid #ee0;
}
.support_list > li > ul > li:last-child > button {
    border-right: 2px solid #ee0;
}
.support_bgcolor_btn .colorBlk {
    color: #ee0;
    background-color: #47e;
}
.support_bgcolor_btn .colorBlu {
    color: #ee0;
    background-color: #47e;
}
```

```fnuction.js
$(function(){

    // 文字サイズ変更ボタン
    var body = $("body");
    $(".medium").click(function(){
        $("html").css("font-size","62.5%");
        body.removeClass("font_large");
    });
    $(".large").click(function(){
        $("html").css("font-size","100%");
        body.addClass("font_large");
    });

    // 背景色変更ボタン
    var elem = document.getElementById("changeStyle");
    $(".colorWht").on("click", function(){
        elem.href = "css/style_dummy.css";
    });
    $(".colorBlk").on("click", function(){
        elem.href = "css/style_black.css";
    });
    $(".colorBlu").on("click", function(){
        elem.href = "css/style_blue.css";
    });
});
```

### 試したこと・調べたこと
- [x] teratailやGoogle等で検索した
- [x] ソースコードを自分なりに変更した
- [ ] 知人に聞いた
- [ ] その他

##### 上記の詳細・結果
jquery.ookie.jsを使う方法が調べたら出てきましたが、自分なりにその方法で書いてみましたが思った挙動になりませんでした。

### 補足
特になし