Merge pull request #1989 from dfinity/letmejustputthishere-patch-6

Update integrate-identity.md
dfinity · Oct 9, 2023 · 50b36ac · 50b36ac
2 parents f41e2a4 + 3e558f0
commit 50b36ac
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 30 deletions.
diff --git a/docs/developer-docs/integrations/_attachments/II_greet_1.png b/docs/developer-docs/integrations/_attachments/II_greet_1.png
diff --git a/docs/developer-docs/integrations/_attachments/II_greet_2.png b/docs/developer-docs/integrations/_attachments/II_greet_2.png
diff --git a/docs/developer-docs/integrations/internet-identity/integrate-identity.md b/docs/developer-docs/integrations/internet-identity/integrate-identity.md
@@ -100,35 +100,22 @@ import {
     ii_integration_backend,
 } from "../../declarations/ii_integration_backend";
 import { AuthClient } from "@dfinity/auth-client";
-import { HttpAgent, Actor } from "@dfinity/agent";
-
+import { HttpAgent } from "@dfinity/agent";
 let actor = ii_integration_backend;
-
 console.log(process.env.CANISTER_ID_INTERNET_IDENTITY);
-
-const greetButton = document.getElementById("greet");
-greetButton.onclick = async (e) => {
+const whoAmIButton = document.getElementById("whoAmI");
+whoAmIButton.onclick = async (e) => {
     e.preventDefault();
-
-    greetButton.setAttribute("disabled", true);
-
-    const greeting = await actor.greet(
-        (await Actor.agentOf(actor).getPrincipal()).toString()
-    );
-
-    greetButton.removeAttribute("disabled");
-
-    document.getElementById("greeting").innerText = greeting;
-
+    whoAmIButton.setAttribute("disabled", true);
+    const principal = await actor.whoami();
+    whoAmIButton.removeAttribute("disabled");
+    document.getElementById("principal").innerText = principal.toString();
     return false;
 };
-
 const loginButton = document.getElementById("login");
 loginButton.onclick = async (e) => {
     e.preventDefault();
-
     let authClient = await AuthClient.create();
-
     // start the login process and wait for it to finish
     await new Promise((resolve) => {
         authClient.login({
@@ -139,31 +126,29 @@ loginButton.onclick = async (e) => {
             onSuccess: resolve,
         });
     });
-
     const identity = authClient.getIdentity();
     const agent = new HttpAgent({ identity });
     actor = createActor(process.env.CANISTER_ID_II_INTEGRATION_BACKEND, {
         agent,
     });
-
     return false;
 };
 ```
 
 This code does the following:
 
-- Interacts with the backend actor to call the `greet` method.
+- Interacts with the backend actor to call the `whoami` method.
 - Creates an `auth` client.
-- Retrieves the Internet Identity from the `auth` client.
-- Uses the Internet Identity to create an agent that interacts with the IC.
+- Retrieves the identity from the `auth` client.
+- Uses the identity to create an agent that interacts with the IC.
 - Then, uses the interface description of the app to create an actor that's used to call the app's service methods.
 
-### Step 8: Insert the following code into the `src/ii_integration_frontend/src/index.html` file:
-
 :::info 
-If you used a project name other than `ii_integration`, you will need to rename the inputs in the code.
+If you used a project name other than `ii_integration`, you will need to rename the imports and environment variable in the code.
 :::
 
+### Step 8: Insert the following code into the `src/ii_integration_frontend/src/index.html` file:
+
 ```html
 <!DOCTYPE html>
 <html lang="en">
@@ -185,9 +170,9 @@ If you used a project name other than `ii_integration`, you will need to rename
       </form>
       <br />
       <form>
-        <button id="greet">Click Me!</button>
+        <button id="whoAmI">Who Am I</button>
       </form>
-      <section id="greeting"></section>
+      <section id="principal"></section>
     </main>
   </body>
 </html>
@@ -244,6 +229,12 @@ Once you save it, select the 'I saved it, continue' button.
 
 ![Local integration 4](../_attachments/II_greet_2.png)
 
+### Local Frontend Development
+
+When modifying this example's frontend, it is recommended to develop using a local development server instead of using the deployed frontend canister. This is because using a local develop server will enable Hot Module Reloading, allowing you to see any modifications made to your frontend instantaneously, rather than having to redeploy the frontend canister to see the changes. 
+
+To start a local development server, run `npm run start`. The output will contain the local address the project is running at, such as `127.0.0.1:8080`. 
+
 ## Resources
 
 - [Internet Identity dashboard](https://identity.ic0.app/).