Merge pull request #4179 from MicrosoftDocs/bretjohn/update-openai-tutorials

Improve security guidance for the OpenAI API key

Author: alvinashcraft

hub/apps/how-tos/chatgpt-openai-winui3.md

@@ -41,13 +41,13 @@ After creating your project, you should see the following default file structure
 
 ## Set your environment variable
 
-In order to use the OpenAI SDK, you'll need to set an environment variable with your API key. In this example, we'll use the `MY_OPEN_AI_API_KEY` environment variable. Once you have your API key from the [OpenAI developer dashboard](https://platform.openai.com/api-keys), you can set the environment variable from the command line as follows:
+In order to use the OpenAI SDK, you'll need to set an environment variable with your API key. In this example, we'll use the `OPENAI_API_KEY` environment variable. Once you have your API key from the [OpenAI developer dashboard](https://platform.openai.com/api-keys), you can set the environment variable from the command line as follows:
 
 ```powershell
-setx MY_OPEN_AI_API_KEY <your-api-key>
+setx OPENAI_API_KEY <your-api-key>
 ```
 
-Note that this method works well for development, but you'll want to use a more secure method for production apps (for example: you could store your API key in a secure key vault that a remote service can access on behalf of your app).
+Note that this method works well for development, but you'll want to use a more secure method for production apps (for example: you could store your API key in a secure key vault that a remote service can access on behalf of your app). See [Best practices for OpenAI key safety](https://help.openai.com/articles/5112595-best-practices-for-api-key-safety).
 
 
 ## Install the OpenAI SDK
@@ -80,7 +80,7 @@ namespace ChatGPT_WinUI3
         {
             this.InitializeComponent();
 
-            var openAiKey = Environment.GetEnvironmentVariable("MY_OPEN_AI_API_KEY");
+            var openAiKey = Environment.GetEnvironmentVariable("OPENAI_API_KEY");
 
             openAiService = new OpenAIService(new OpenAiOptions(){
                 ApiKey = openAiKey
@@ -446,7 +446,7 @@ namespace ChatGPT_WinUI3
         {
             this.InitializeComponent();
 
-            var openAiKey = Environment.GetEnvironmentVariable("MY_OPEN_AI_API_KEY");
+            var openAiKey = Environment.GetEnvironmentVariable("OPENAI_API_KEY");
 
             openAiService = new OpenAIService(new OpenAiOptions(){
                 ApiKey = openAiKey

hub/apps/how-tos/dall-e-winui3.md

@@ -20,7 +20,7 @@ In this how-to, we'll integrate DALL-E's image generation capabilities into your
 
 - [Visual Studio 2022 and Tools for Windows App SDK](../windows-app-sdk/set-up-your-development-environment.md)
 - A functional chat interface into which this capability will be integrated. See *[How to add OpenAI chat completions to your WinUI 3 / Windows App SDK desktop app](./chatgpt-openai-winui3.md)* - we'll demonstrate how to integrate DALL-E into the chat interface from this how-to.
-- An OpenAI API key from your [OpenAI developer dashboard](https://platform.openai.com/api-keys) assigned to the `MY_OPEN_AI_API_KEY` environment variable.
+- An OpenAI API key from your [OpenAI developer dashboard](https://platform.openai.com/api-keys) assigned to the `OPENAI_API_KEY` environment variable.
 - An OpenAI SDK installed in your project. Refer to the [OpenAI documentation](https://platform.openai.com/docs/libraries) for a list of community libraries. In this how-to, we'll use [betalgo/openai](https://github.com/betalgo/openai).
 
 ## Install and initialize the OpenAI SDK
@@ -44,7 +44,7 @@ namespace ChatGPT_WinUI3
         {
             this.InitializeComponent();
 
-            var openAiKey = Environment.GetEnvironmentVariable("MY_OPEN_AI_API_KEY");
+            var openAiKey = Environment.GetEnvironmentVariable("OPENAI_API_KEY");
 
             openAiService = new OpenAIService(new OpenAiOptions(){
                 ApiKey = openAiKey

hub/apps/windows-dotnet-maui/dall-e-maui-windows.md

@@ -14,13 +14,23 @@ In this quickstart, we'll demonstrate how to integrate DALL-E's image generation
 
 - Visual Studio 2022 17.8 or greater, with the .NET Multi-platform App UI workload installed. For more information, see [Installation](/dotnet/maui/get-started/installation).
 - A functional .NET MAUI project with OpenAI integration into which this capability will be integrated. See *[Create a recommendation app with .NET MAUI and ChatGPT](tutorial-maui-ai.md)* - we'll demonstrate how to integrate DALL-E into the user interface from this how-to.
-- An OpenAI API key from your [OpenAI developer dashboard](https://platform.openai.com/api-keys) assigned to the `openAIKey` variable in your project.
+- An OpenAI API key from your [OpenAI developer dashboard](https://platform.openai.com/api-keys).
 - An [Azure.AI.OpenAI](https://www.nuget.org/packages/Azure.AI.OpenAI/) NuGet package installed in your project. If you've followed along with the .NET MAUI ChatGPT tutorial, you will have this dependency installed and configured.
 
 ## What problem will we solve?
 
 You want to add DALL-E's image generation capabilities to your .NET MAUI Windows desktop app to provide users with a rich, interactive experience. They can already use the app to generate text-based recommendations, and you want to add the ability to generate images that visualize an activity in the location they have entered.
 
+## Set your environment variable
+
+In order to use the OpenAI SDK, you'll need to set an environment variable with your API key. In this example, we'll use the `OPENAI_API_KEY` environment variable. Once you have your API key from the [OpenAI developer dashboard](https://platform.openai.com/api-keys), you can set the environment variable from the command line as follows:
+
+```powershell
+setx OPENAI_API_KEY <your-api-key>
+```
+
+Note that this method works for development on Windows, but you'll want to use a more secure method for production apps and for mobile support. For example, you can store your API key in a secure key vault that a remote service can access on behalf of your app. See [Best practices for OpenAI key safety](https://help.openai.com/articles/5112595-best-practices-for-api-key-safety) for more information.
+
 ## Install and initialize the Azure OpenAI SDK
 
 In this section, we'll install the SDK into the .NET MAUI project and initialize it with your OpenAI API key.
@@ -32,7 +42,6 @@ In this section, we'll install the SDK into the .NET MAUI project and initialize
     ```csharp
     private OpenAIClient _chatGptClient;
     private Guid _sessionGuid = Guid.Empty;
-    private string openAIKey = "MY_OPEN_AI_API_KEY";
     private string openAIEndpoint = null;
     private char[] trimChars = { '\n', '?' };
 
@@ -44,6 +53,8 @@ In this section, we'll install the SDK into the .NET MAUI project and initialize
 
     private void MainPage_Loaded(object sender, EventArgs e)
     {
+        var openAiKey = Environment.GetEnvironmentVariable("OPENAI_API_KEY");
+
         _chatGptClient = !string.IsNullOrWhiteSpace(openAIEndpoint)
             ? new OpenAIClient(
                 new Uri(openAIEndpoint),
@@ -52,8 +63,6 @@ In this section, we'll install the SDK into the .NET MAUI project and initialize
     }
     ```
 
-1. Replace `MY_OPEN_AI_API_KEY` with your OpenAI API key.
-
 ## Modify your app's UI
 
 Next, we'll modify the user interface to include an `Image` control that displays a generated image below the recommendation text.

hub/apps/windows-dotnet-maui/tutorial-maui-ai.md

@@ -25,6 +25,16 @@ In this tutorial, you learn how to:
 * The .NET MAUI [installation requirements](/dotnet/maui/get-started/installation)
 * If you are new to .NET MAUI on Windows, you should start with the [Build your first .NET MAUI app for Windows](/windows/apps/windows-dotnet-maui/walkthrough-first-app) tutorial.
 
+## Set your environment variable
+
+In order to use the OpenAI SDK, you'll need to set an environment variable with your API key. In this example, we'll use the `OPENAI_API_KEY` environment variable. Once you have your API key from the [OpenAI developer dashboard](https://platform.openai.com/api-keys), you can set the environment variable from the command line as follows:
+
+```powershell
+setx OPENAI_API_KEY <your-api-key>
+```
+
+Note that this method works for development on Windows, but you'll want to use a more secure method for production apps and for mobile support. For example, you can store your API key in a secure key vault that a remote service can access on behalf of your app. See [Best practices for OpenAI key safety](https://help.openai.com/articles/5112595-best-practices-for-api-key-safety) for more information.
+
 ## Create a new .NET MAUI project with the required UI elements
 
 We're going to start by creating a new .NET MAUI project in Visual Studio. We'll use the **.NET MAUI App** template and add some UI elements to the **MainPage** to provide users with some recommendations based on a provided location. The UI will have buttons to get recommendations for restaurants, hotels, and attractions.