Merge pull request #1463 from OfficeDev/v-mfurquan/New-Sample-Cookie

New Sample Tab App Cookie JS

README.md

@@ -128,7 +128,8 @@ The [Teams Toolkit](https://marketplace.visualstudio.com/items?itemName=TeamsDev
 |1|Proactive Messaging   | Sample to highlight solutions to two challenges with building proactive messaging apps in Microsoft Teams.                                      |[View][bot-proactive-msg#cs]        |
 |2| Sharepoint List Bot| This sample bot for Microsoft Teams captures user input using adaptive cards and stores the data in a SharePoint list. It includes setup for SharePoint registration, permissions configuration, and deployment in Teams for streamlined data management.| [View][bot-sharepoint-list#cs] |  |  |
 |3|Teams Virtual Assistant| Customized virtual assistant template to support teams capabilities.        |[View][app-virtual-assistant#cs]|
-|3|User Scope Web App| This sample app demonstrates posting notifications for team/channel changes using Microsoft Graph API in Node.js||[View][user-scope-web-application#js]
+|4|User Scope Web App| This sample app demonstrates posting notifications for team/channel changes using Microsoft Graph API in Node.js||[View][user-scope-web-application#js]
+|5|Microsoft Teams Tab App Cookie| This sample application demonstrates key web storage features, including managing cookies, SameSite cookies, and partitioned cookies. It also covers local storage and IndexedDB for data persistence in modern web applications.||[View][tab-app-cookie#js]
 
 ## [Messaging Extensions samples](https://docs.microsoft.com/microsoftteams/platform/messaging-extensions/what-are-messaging-extensions) (using the v4 SDK)
 >NOTE:
@@ -346,6 +347,7 @@ The [Teams Toolkit](https://marketplace.visualstudio.com/items?itemName=TeamsDev
 
 [app-virtual-assistant#cs]:samples/app-virtual-assistant/csharp
 [user-scope-web-application#js]:samples/user-scope-web-application/nodejs
+[tab-app-cookie#js]:samples/tab-app-cookie/js
 [identity-linking-with-sso#cs]:samples/app-identity-linking-with-sso/csharp
 [bot-proactive-msg#cs]:samples/bot-proactive-messaging/csharp
 [bot-proactive-msg-teamsfx#js]:samples/bot-proactive-messaging-teamsfx

samples/tab-app-cookie/js/.gitignore

@@ -0,0 +1,3 @@
+node_modules/**
+.vscode/**
+*.pem

samples/tab-app-cookie/js/LICENSE

@@ -0,0 +1,24 @@
+microsoft-teams-simple-tab
+
+Copyright (c) Microsoft Corporation. All rights reserved.
+
+MIT License
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

samples/tab-app-cookie/js/README.md

@@ -0,0 +1,128 @@
+---
+page_type: sample
+description: "This sample application demonstrates key web storage features, including managing cookies, SameSite cookies, and partitioned cookies. It also covers local storage and IndexedDB for data persistence in modern web applications."
+products:
+- office-teams
+- office
+- office-365
+languages:
+- javascript
+extensions:
+  contentType: samples
+  createdDate: "11/22/2024 12:30:00 PM"
+urlFragment: officedev-microsoft-teams-samples-tab-app-cookie-js
+---
+
+# Microsoft Teams Cookie App
+
+This sample application provides an interactive demonstration of cookie management, including setting, clearing, and customizing attributes such as SameSite and Secure flags. It also explores advanced web storage solutions like local storage and IndexedDB, offering a practical guide to modern client-side data handling.
+
+## Included Features
+* Cookies
+* SameSite Cookies
+* Partitioned Cookies
+* LocalStorage
+* IndexDB
+
+## Interaction with app
+
+![Cookie App](Images/Cookie_App.gif)
+
+## Try it yourself - experience the App in your Microsoft Teams client
+Please find below demo manifest which is deployed on Microsoft Azure and you can try it yourself by uploading the app package (.zip file link below) to your teams and/or as a personal app. (Sideloading must be enabled for your tenant, [see steps here](https://docs.microsoft.com/microsoftteams/platform/concepts/build-and-test/prepare-your-o365-tenant#enable-custom-teams-apps-and-turn-on-custom-app-uploading)).
+
+**Microsoft Teams Cookie App Demo Manifest:** [Manifest](/samples/tab-app-cookie/js/demo-manifest/tab-app-cookie.zip)
+
+## Prerequisites
+
+- To test locally, [NodeJS](https://nodejs.org/en/download/) must be installed on your development machine (version 16.14.2  or higher).
+
+- [dev tunnel](https://learn.microsoft.com/en-us/azure/developer/dev-tunnels/get-started?tabs=windows) or [ngrok](https://ngrok.com/) latest version or equivalent tunnelling solution
+
+## Setup
+
+2. Setup NGROK
+ - Run ngrok - point to port 3000
+
+   ```bash
+   ngrok http 3000 --host-header="localhost:3000"
+   ```  
+
+   Alternatively, you can also use the `dev tunnels`. Please follow [Create and host a dev tunnel](https://learn.microsoft.com/en-us/azure/developer/dev-tunnels/get-started?tabs=windows) and host the tunnel with anonymous user access command as shown below:
+
+   ```bash
+   devtunnel host -p 3000 --allow-anonymous
+   ```
+
+3. Setup for code
+
+  - Clone the repository
+
+    ```bash
+    git clone https://github.com/OfficeDev/Microsoft-Teams-Samples.git
+    ```
+
+   - Install node modules
+
+     Inside js folder,  navigate to `samples/tab-app-cookie/js` open your local terminal and run the below command to install node modules. You can do the same in Visual   
+     Studio code terminal by opening the project in Visual Studio code.
+
+     ```bash
+     npm install
+     ```
+
+  - Navigate to `./cookies.js` and go to line 23. Replace `{{DOMAIN-NAME}}` with your domain. E.g. if you   are using ngrok it would be `https://1234.ngrok-free.app` then your DOMAIN-NAME will be `1234.ngrok-free.app`
+
+    ```javascript
+      function popOutApp() {
+        window.open("https://{{DOMAIN-NAME}}/partitioned-cookies.html");
+    }
+    ```
+
+  - Run the sample by following command:
+
+    ```
+    npm start
+    ``` 
+
+4. Setup Manifest for Teams
+- __*This step is specific to Teams.*__
+    - **Edit** the `manifest.json` file located in the ./appPackage folder  and replace the placeholder `{{ANY-GUID-ID}}` with the corresponding GUID.
+    - **Edit** the `manifest.json` for `validDomains` and replace `{{DOMAIN-NAME}}` with base Url of your domain. E.g. if you are using ngrok it would be `https://1234.ngrok-free.app` then your DOMAIN-NAME will be `1234.ngrok-free.app` and if you are using dev tunnels then your domain will be like: `12345.devtunnels.ms`.
+    - **Zip** the contents of the `appPackage` folder to create a `manifest.zip` (Make sure the zip file does not contain any subfolders, as this will result in an error when uploading your .zip package).
+
+- Upload the manifest.zip to Teams (in the Apps view click "Upload a custom app")
+   - Go to Microsoft Teams. From the lower left corner, select Apps
+   - From the lower left corner, choose Upload a custom App
+   - Go to your project directory, the ./appPackage folder, select the zip folder, and choose Open.
+   - Select Add in the pop-up dialog box. Your app is uploaded to Teams.
+
+## Running the sample
+
+**Install App**
+![side panel ](Images/Install_App.png)
+
+**Index Page:**
+![shared content](Images/2.IndexPage.png)
+
+**Page Cookie**
+![shared content second user](Images/3.Page_Cookie.png)
+
+**SameSite Cookie**
+![shared content](Images/4.Page_SameSiteCookie.png)
+
+**Partitioned Cookie:**
+![shared content](Images/5.Page_PartitionedCookie.png)
+
+**Local Storage Cookie:**
+![shared content](Images/6.Page_LocalStorage.png)
+
+**Index DB:**
+![shared content](Images/7.Page_IndexDB.png)
+
+
+## Further reading
+
+- [Will update once the document is confirmed](https://Needs_To_Be_Added)
+
+<img src="https://pnptelemetry.azurewebsites.net/microsoft-teams-samples/samples/tab-app-cookie-js" />

samples/tab-app-cookie/js/appPackage/manifest.json

@@ -0,0 +1,43 @@
+{
+    "$schema": "https://developer.microsoft.com/en-us/json-schemas/teams/v1.19/MicrosoftTeams.schema.json",
+    "manifestVersion": "1.19",
+    "version": "1.0.0",
+    "id": "{{ANY-GUID-ID}}",
+    "developer": {
+        "name": "Microsoft",
+        "websiteUrl": "https://www.microsoft.com",
+        "privacyUrl": "https://www.teams.com/privacy",
+        "termsOfUseUrl": "https://www.teams.com/termsofuser"
+    },
+    "icons": {
+        "color": "color.png",
+        "outline": "outline.png"
+    },
+    "name": {
+        "short": "Tab App Cookie",
+        "full": "Microsoft Teams Tab App Cookie"
+    },
+    "description": {
+        "short": "An app to test and explore cookies.",
+        "full": "An app designed to test upcoming SameSite cookie changes in Chromium and explore cookie behavior in various scenarios."
+    },
+    "accentColor": "#F9F9FA",
+    "staticTabs": [
+        {
+            "entityId": "cookie",
+            "name": "Cookie",
+            "contentUrl": "https://{{DOMAIN-NAME}}/",
+            "websiteUrl": "https://{{DOMAIN-NAME}}/",
+            "scopes": [
+                "personal"
+            ]
+        }
+    ],
+    "permissions": [
+        "identity",
+        "messageTeamMembers"
+    ],
+    "validDomains": [
+        "{{DOMAIN-NAME}}"
+    ]
+}

samples/tab-app-cookie/js/assets/sample.json

@@ -0,0 +1,68 @@
+[
+    {
+      "name": "officedev-microsoft-teams-samples-tab-app-cookie-js",
+      "source": "officeDev",
+      "title": "Microsoft Teams Cookie App",
+      "shortDescription": "This sample application demonstrates to test upcoming SameSite cookie changes in Chromium and explore cookie behavior in various scenarios.",
+      "url": "https://github.com/OfficeDev/Microsoft-Teams-Samples/tree/main/samples/tab-app-cookie/js",
+      "longDescription": [
+        "This sample application demonstrates key web storage features, including managing cookies, SameSite cookies, and partitioned cookies. It also covers local storage and IndexedDB for data persistence in modern web applications."
+      ],
+      "creationDateTime": "2024-11-22",
+      "updateDateTime": "2024-11-22",
+      "products": [
+        "Teams"
+      ],
+      "metadata": [
+        {
+          "key": "TEAMS-SAMPLE-SOURCE",
+          "value": "OfficeDev"
+        },
+        {
+          "key": "TEAMS-SERVER-LANGUAGE",
+          "value": "javascript"
+        },
+        {
+          "key": "TEAMS-SERVER-PLATFORM",
+          "value": "express"
+        },
+        {
+          "key": "TEAMS-FEATURES",
+          "value": "cookies"
+        }
+      ],
+      "thumbnails": [
+        {
+          "type": "image",
+          "order": 100,
+          "url": "https://raw.githubusercontent.com/OfficeDev/Microsoft-Teams-Samples/main/samples/tab-app-cookie/js/Images/Cookie_App.gif",
+          "alt": "Solution UX showcasing an app for testing and exploring cookies."
+        }
+      ],
+      "authors": [
+        {
+          "gitHubAccount": "OfficeDev",
+          "pictureUrl": "https://avatars.githubusercontent.com/u/6789362?s=200&v=4",
+          "name": "OfficeDev"
+        }
+      ],
+      "references": [
+        {
+          "name": "Teams developer documentation",
+          "url": "https://aka.ms/TeamsPlatformDocs"
+        },
+        {
+          "name": "Teams developer questions",
+          "url": "https://aka.ms/TeamsPlatformFeedback"
+        },
+        {
+          "name": "Teams development videos from Microsoft",
+          "url": "https://aka.ms/sample-ref-teams-vids-from-microsoft"
+        },
+        {
+          "name": "Teams development videos from the community",
+          "url": "https://aka.ms/community/videos/m365powerplatform"
+        }
+      ]
+    }
+  ]