From c6ddc3c234aaf30210fdd61b64ce4ec94b4c2100 Mon Sep 17 00:00:00 2001
From: Amisha Agarwal <amiagarw@adobe.com>
Date: Mon, 4 Mar 2024 13:36:13 +0530
Subject: [PATCH] [CMGR-50790] update turotial to use oAuth instead of jwt

---
 .../tutorial/4-getting-an-access-token.md     | 50 ++++++++-----------
 src/pages/tutorial/index.md                   | 18 +++----
 2 files changed, 30 insertions(+), 38 deletions(-)

diff --git a/src/pages/tutorial/4-getting-an-access-token.md b/src/pages/tutorial/4-getting-an-access-token.md
index 5214c31e..887f87fd 100644
--- a/src/pages/tutorial/4-getting-an-access-token.md
+++ b/src/pages/tutorial/4-getting-an-access-token.md
@@ -16,46 +16,38 @@ import Glitch from "../../components/glitch"
 
 The JSON object sent to the webhook is very minimal -- it largely consists of event metadata (e.g. the timestamp of the event) and a URL to either the pipeline execution. In general, the webhook implementation will need to call the Cloud Manager API to get additional information. In the case of this tutorial, the webhook is actually going to make two API calls for more information. That, however, is for the next step...
 
-In this step, we're going to lay the groundwork for making those API calls by obtaining an _access token_ which will be passed to the API for the purpose of authentication. Adobe I/O uses JSON Web Tokens (JWT) to obtain access tokens. The webhook will create a signed JWT and then _exchange_ that with Adobe's identity management system for an access token.
+In this step, we're going to lay the groundwork for making those API calls by obtaining an _access token_ which will be passed to the API for the purpose of authentication. Adobe I/O uses OAuth Server-to-Server credential to obtain access tokens.
 
-## Setting up the Environment Variables
-
-The JWT token is created, signed and exchanged using the `CLIENT_ID`, `CLIENT_SECRET`, `ORGANIZATION`, and `TECHNICAL_ACCOUNT_ID` variables along with the `private.key` file in the `.data` directory, so the first step is to make sure the `.env` file has all of these variable populated and the `private.key` file is in place. You should have done this in Step 0, but if not (or if you are using Glitch), you will need to do this now.
-
-## Adding Dependencies
-
-For the exchange process, we'll use Adobe's <a href="https://github.com/adobe/jwt-auth" target="_new">jwt-auth</a> library. If you are editing the script locally, you'll need to install this package:
-
-```bash
-npm install @adobe/jwt-auth
-```
+<InlineAlert slots="text" variant="warning"/>
 
-If you are running the webhook in Glitch, you'll need to edit the `package.json` file manually and add these this package to the `dependencies` object. Take a look at the Remix link below if you need help doing this.
+Note that obtaining access token using JSON Web Tokens (JWT) is deprecated. [Learn More](https://developer.adobe.com/developer-console/docs/guides/authentication/JWT/).
 
-The header of the script also needs to be updated to include this dependency, along with the built-in `fs` library which will be used to load the private key.
+## Setting up the Environment Variables
 
-```javascript
-const auth = require('@adobe/jwt-auth')
-const fs = require('fs')
-```
+The access token is created using the `CLIENT_ID`, `CLIENT_SECRET`, `GRANT_TYPE` and `SCOPES` variables, so the first step is to make sure the `.env` file has all of these variable populated. You should have done this in Step 0, but if not (or if you are using Glitch), you will need to do this now.
 
 ## Writing the `getAccessToken` Function
 
-For clarity, it makes sense to organize obtaining the access token into a separate function. The function has assembles the configuration object needed by `jwt-auth` and then does the token exchange.
+For clarity, it makes sense to organize obtaining the access token into a separate function. The function makes an API call to an IMS endpoint for fetching the token.
 
 ```javascript
 async function getAccessToken () {
-  const config = {
-    clientId: process.env.CLIENT_ID,
-    technicalAccountId: process.env.TECHNICAL_ACCOUNT_ID,
-    orgId: process.env.ORGANIZATION_ID,
-    clientSecret: process.env.CLIENT_SECRET,
-    metaScopes: [ 'ent_cloudmgr_sdk' ]
+  const form = new FormData();
+  form.append('client_id', process.env.CLIENT_ID);
+  form.append('client_secret', process.env.CLIENT_SECRET);
+  form.append('grant_type', process.env.GRANT_TYPE);
+  form.append('scope', process.env.SCOPES);
+
+  const response = await fetch('https://ims-na1.adobelogin.com/ims/token/v3', {
+    'method': 'POST',
+    'headers': { 'Content-Type': 'application/x-www-form-urlencoded' },
+    'body': form
+  })
+  if (!response.ok) {
+    throw new Error('Failed to get access token');
   }
-  config.privateKey = fs.readFileSync('.data/private.key')
-
-  const { access_token } = await auth(config)
-  return access_token  
+  const responseData = await response.json();
+  return responseData.access_token;
 }
 ```
 
diff --git a/src/pages/tutorial/index.md b/src/pages/tutorial/index.md
index 926f5c4d..de67df46 100644
--- a/src/pages/tutorial/index.md
+++ b/src/pages/tutorial/index.md
@@ -35,27 +35,27 @@ Before starting the tutorial, you must first set up an project in the <a href="h
 
 ### Configuration Variables
 
-This tutorial does involved coding, so you're going to want to open up your favorite IDE now. Create a new project in your IDE with an empty folder. In this project, create a file named `.env`. This file is going to hold various configuration variables which should be kept out of the code.
+This tutorial does involve coding, so you're going to want to open up your favorite IDE now. Create a new project in your IDE with an empty folder. In this project, create a file named `.env`. This file is going to hold various configuration variables which should be kept out of the code.
 
 Populate this file with the following content:
 
-```
+```env
 PORT=4000
 ORGANIZATION_ID=
-TECHNICAL_ACCOUNT_ID=
 CLIENT_ID=
 CLIENT_SECRET=
+GRANT_TYPE=client_credentials
+SCOPES=
 ```
 
 Let's go through each of these and set them.
 
 1. `PORT` -- this is the port on which the webhook will listen. 4000 is a good default value, unless something else is using this port.
 2. `ORGANIZATION_ID` -- this can be found in the Credentials details section of the Adobe Developer Console.
-3. `TECHNICAL_ACCOUNT_ID` -- this can be found in the Credentials details section of the Adobe Developer Console.
-4. `CLIENT_ID` -- this can be found in the Credentials details section of the Adobe Developer Console.
-5. `CLIENT_SECRET` -- this can be found in the Credentials details section of the Adobe Developer Console. Note that you have to click the `Retrieve client secret` button to reveal this.
-
-You will also need to create a directory named `.data` and place the `private.key` file generated by OpenSSL or the Adobe Developer Console in this directory.
+3. `CLIENT_ID` -- this can be found in the Credentials details section of the Adobe Developer Console.
+4. `CLIENT_SECRET` -- this can be found in the Credentials details section of the Adobe Developer Console. Note that you have to click the `Retrieve client secret` button to reveal this.
+5. `GRANT_TYPE` -- this is equal to **client_credentials**.
+6. `SCOPES` -- this can be found in the Credentials details section of the Adobe Developer Console.
 
 ### Node.js Installation
 
@@ -73,4 +73,4 @@ from the Terminal or Shell.
 
 ### Next Step
 
-With all that done, you're ready to start the actual tutorial. Continue to [Step 1](1-a-basic-webhook.md).
\ No newline at end of file
+With all that done, you're ready to start the actual tutorial. Continue to [Step 1](1-a-basic-webhook.md).