diff --git a/petcare-sample/b2c/web-app/petdesk/README.md b/petcare-sample/b2c/web-app/petdesk/README.md index 84aeb1d17..162070ade 100644 --- a/petcare-sample/b2c/web-app/petdesk/README.md +++ b/petcare-sample/b2c/web-app/petdesk/README.md @@ -34,13 +34,13 @@ Authorized redirect URLs: https://localhost:3000 (This will be updated with the 8. Use **Web App URL** in the step 3.3 as the **Authorized redirect URLs** and **Allowed origins**. 9. Keep the rest of the default configurations and click **Update**. 10. Create `acr` claim from `User Attributes & Stores/Attributes section. -11. Create a scope called `acr` and map it to the previously created `acr` claim. -12. Go to the **User Attributes** tab. +11. Create an OIDC scope called `acr` and map it to the previously created `acr` claim. +12. Go to the **User Attributes** tab in the created application in step 4. 13. Tick on the `acr`. 14. Tick on the **Email** section. 15. Expand the **Profile** section. 16. Add a tick on the Requested Column for the **Full Name** and click **Update**. -17. Then go to the **Sign-In Method** tab. +17. Then go to the **Login Flow** tab. 18. Configure **Google login** as described in https://wso2.com/asgardeo/docs/guides/authentication/social-login/add-google-login/ 19. As shown in the below, add **Username & Password** as an **Authentication** step. 20. To perform the acr-based step up authentication add the following conditional script to the login flow. @@ -241,7 +241,7 @@ In this step, you will play the role of the API developer. You will create and p Let's create your first Service. 1. On the **Home** page, click on the project you created. 2. To add a new component, select **Components** from the left-side menu and click **Create**. -3. Click **Create** in the **Service** card. +3. Under **Select a Type**, click on the **Service** card. 4. Enter a unique name and a description for the Service. For example, you can enter the name and the description given below: | Field | Value | @@ -258,7 +258,7 @@ Let's create your first Service. | GitHub Account | Your account | | GitHub Repository | samples-is| | Branch | master | - | Build Preset | Click **Ballerina** because you are creating the REST API from a Ballerina project and Choreo needs to run a Ballerina build to build it. | + | Buildpack | Click **Ballerina** because you are creating the REST API from a Ballerina project and Choreo needs to run a Ballerina build to build it. | | Path | /petcare-sample/b2c/web-app/petdesk/apis/ballerina/pet-management-service | 8. Click **Create** to initialize a Service with the implementation from your GitHub repository. @@ -381,8 +381,8 @@ If you are not connecting the service to a MySQL database and storing the servic 2. Go to the Set Up card and click **Endpoint Configurations**. This opens the Endpoint Configurations pane. 3. Select the **Pass Security Context To Backend** checkbox. 4. Optionally, specify an appropriate audience claim value for the backend service. -Click Apply. -5. To redeploy the component with the applied setting, go to the Set Up card and click Deploy. +5. Scroll down the **Endpoint Configurations** wizard and click **Apply**. +6. To redeploy the component with the applied setting, go to the Set Up card and click Deploy. ## Step 4.5: Test the Service @@ -390,6 +390,7 @@ Let's test the Pet Management Service via Choreo's Console by following the step 1. Navigate to the **Test** section in the component and click **Console**. This will open up the definition of the service. 2. Expand the **POST** method and click **Try it out**. 3. Update the request body as below: + ``` { "breed": "Golden Retriever", @@ -414,7 +415,7 @@ Similarly, you can expand and try out the other methods. Now that yourService is tested, let's publish it and make it available for applications to consume. -1. Navigate to the **Manage** section of the channel service and click **Lifecycle**. +1. Navigate to the **Manage** section of the created service and click **Lifecycle**. 2. Click **Publish** to publish the Service to the **Developer Portal**. External applications can subscribe to the API via the Developer Portal. 3. To access the Developer Portal, click **Go to DevPortal** in the top right corner. 4. The Pet Management Service will open in the Developer Portal. @@ -508,13 +509,13 @@ When deploying the webhook through choreo, provide the salesforce related config 8. Use **Web App URL** in the step 3.3 as the **Authorized redirect URLs** and **Allowed origins**. 9. Keep the rest of the default configurations and click **Update**. 10. Create `acr` claim from `User Attributes & Stores/Attributes section. -11. Create a scope called `acr` and map it to the previously created `acr` claim. -12. Go to the **User Attributes** tab. +11. Create an OIDC scope called `acr` and map it to the previously created `acr` claim. +12. Go to the **User Attributes** tab of the created app. 13. Tick on the `acr`. 14. Tick on the **Email** section. 15. Expand the **Profile** section. 16. Add a tick on the Requested Column for the **Full Name** and click **Update**. -17. Then go to the **Sign-In Method** tab. +17. Then go to the **Login Flow** tab. 18. Configure **Google login** as described in https://wso2.com/asgardeo/docs/guides/authentication/social-login/add-google-login/ 19. As shown in the below, add **Username & Password** as an **Authentication** step. 20. To perform the acr-based step up authentication add the following conditional script to the login flow. @@ -583,13 +584,11 @@ var onLoginRequest = function (context) { 3. Visit the sample application at http://localhost:3000. ## Run API Services -1. Navigate to /petcare-sample/b2c/web-app/petdesk/apis/ballerina/pet-management-service and start the - pet management service by executing the following command in the terminal. +1. Navigate to /petcare-sample/b2c/web-app/petdesk/apis/ballerina/pet-management-service and start the pet management service by executing the following command in the terminal. ``` bal run ``` -2. Navigate to /petcare-sample/b2c/web-app/petdesk/apis/ballerina/billing-management-service and start the - pet management service by executing the following command in the terminal. +2. Navigate to /petcare-sample/b2c/web-app/petdesk/apis/ballerina/billing-management-service and start the billing management service by executing the following command in the terminal. ``` bal run ``` diff --git a/petcare-sample/b2c/web-app/petdesk/web/react/public/config.js b/petcare-sample/b2c/web-app/petdesk/web/react/public/config.js index 21c2ca9bc..f4ad514ea 100644 --- a/petcare-sample/b2c/web-app/petdesk/web/react/public/config.js +++ b/petcare-sample/b2c/web-app/petdesk/web/react/public/config.js @@ -1,12 +1,12 @@ window.config = { - baseUrl: "", - clientID: "", - signInRedirectURL: "http://localhost:3000", - signOutRedirectURL: "http://localhost:3000", - myAccountAppURL: "", - petManagementServiceURL: "http://localhost:9090", - billingServerURL: "http://localhost:9091", - salesforceServerURL: "http://localhost:9092", - scope: ["openid", "email", "profile", "acr"], + baseUrl: "https://api.asgardeo.io/t/pavinduorg", + clientID: "6X_5VJHgFIQYU1OFepf3ubPbw0oa", + signInRedirectURL: "https://localhost:3000", + signOutRedirectURL: "https://localhost:3000", + petManagementServiceURL: "", + billingServerURL: "", + salesforceServerURL: "", + scope: ["openid", "email", "profile"], + myAccountAppURL: "https://myaccount.asgardeo.io/t/pavinduorg", enableOIDCSessionManagement: true -}; + }; \ No newline at end of file diff --git a/petcare-sample/b2c/web-app/petdesk/web/react/src/App.css b/petcare-sample/b2c/web-app/petdesk/web/react/src/App.css index 307cafdbb..573301698 100644 --- a/petcare-sample/b2c/web-app/petdesk/web/react/src/App.css +++ b/petcare-sample/b2c/web-app/petdesk/web/react/src/App.css @@ -608,6 +608,7 @@ code { border-color: #e2e2e2; border-width: 0; width: 200px; + cursor: pointer; } .home-wording { diff --git a/petcare-sample/b2c/web-app/petdesk/web/react/src/components/UserMenu.tsx b/petcare-sample/b2c/web-app/petdesk/web/react/src/components/UserMenu.tsx index ffbe18652..c25906115 100644 --- a/petcare-sample/b2c/web-app/petdesk/web/react/src/components/UserMenu.tsx +++ b/petcare-sample/b2c/web-app/petdesk/web/react/src/components/UserMenu.tsx @@ -25,7 +25,7 @@ import LogoutIcon from '@mui/icons-material/Logout'; import { BasicUserInfo, useAuthContext } from "@asgardeo/auth-react"; import { getNotification } from "./Notifications/get-notification"; import GetBilling from "../pages/billing"; -import { getBilling, getUpgrade } from "./Billing/billing"; +import { getBilling } from "./Billing/billing"; import { AddCard } from "@mui/icons-material"; import { getConfig } from "../util/getConfig"; diff --git a/petcare-sample/b2c/web-app/petdesk/web/react/src/pages/billing.tsx b/petcare-sample/b2c/web-app/petdesk/web/react/src/pages/billing.tsx index a3f6c8cbd..ab6763d23 100644 --- a/petcare-sample/b2c/web-app/petdesk/web/react/src/pages/billing.tsx +++ b/petcare-sample/b2c/web-app/petdesk/web/react/src/pages/billing.tsx @@ -22,7 +22,7 @@ import { Box, Grid, TextField } from "@mui/material"; import React, { Fragment, useEffect, useState } from "react"; import { AxiosResponse } from "axios"; import { BillingInfo } from "../types/billing"; -import { getUpgrade, postBilling, postUpgrade } from "../components/Billing/billing"; +import { postBilling, postUpgrade } from "../components/Billing/billing"; import { AddCard } from "@mui/icons-material"; interface BillingProps { diff --git a/petcare-sample/b2c/web-app/petdesk/web/react/src/pages/home.tsx b/petcare-sample/b2c/web-app/petdesk/web/react/src/pages/home.tsx index 5da2466f8..0a4927b92 100644 --- a/petcare-sample/b2c/web-app/petdesk/web/react/src/pages/home.tsx +++ b/petcare-sample/b2c/web-app/petdesk/web/react/src/pages/home.tsx @@ -180,11 +180,14 @@ export const HomePage: FunctionComponent = (): ReactElement => { .catch(() => setHasAuthenticationErrors(true)); }, [signIn]); - const handleBillingLogin = useCallback(() => { + const handleBillingLogin = useCallback(() => { signIn({ acr_values:"acr2" }) - .catch(() => setHasAuthenticationErrors(true)); + .catch((err) => { + console.error(err) + setHasAuthenticationErrors(true) + }); //set value in session storage sessionStorage.setItem("billing", "true"); }, []);