Skip to content

Commit

Permalink
Merge branch 'wso2:master' into ISv7.1.0
Browse files Browse the repository at this point in the history
  • Loading branch information
KaveeshaPiumini authored Oct 11, 2024
2 parents a2c28f7 + 95ce1de commit ab26b35
Show file tree
Hide file tree
Showing 64 changed files with 3,933 additions and 239 deletions.
2 changes: 2 additions & 0 deletions .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@

# Log file
*.log
broken-links-log.txt

# BlueJ files
*.ctxt
Expand All @@ -20,6 +21,7 @@
hs_err_pid*
.idea/
.DS_Store
node_modules
en/identity-server/*/site
en/asgardeo/site

Expand Down
2 changes: 1 addition & 1 deletion VERSION
Original file line number Diff line number Diff line change
@@ -1 +1 @@
0.0.198
0.0.205
2 changes: 1 addition & 1 deletion en/asgardeo/docs/apis/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ Follow the steps below to obtain an access token using OAuth-based authenticatio

### Step 1: Register an application

Follow the guide and create either a [standard-based (OIDC) application]({{base_path}}guides/applications/register-standard-based-app/) or an [M2M application]({{base_path}}/guides/applications/register-machine-to-machine-app/) based on the use case. Take note of the client ID and the client secret of the created application.
Follow the guide and create either a [standard-based (OIDC) application]({{base_path}}/guides/applications/register-standard-based-app/) or an [M2M application]({{base_path}}/guides/applications/register-machine-to-machine-app/) based on the use case. Take note of the client ID and the client secret of the created application.

### Step 2: Authorize the application to consume API resources

Expand Down
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions en/asgardeo/docs/assets/img/logo/salesforce.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
{% set product_name = "Asgardeo" %}
{% set product_domain = "api.asgardeo.io" %}
{% set product_url_format = "https://api.asgardeo.io/t/{organization_name}" %}
{% set localhost_warning_note = "" %}
{% include "../../../../../includes/guides/authentication/sso-integrations/add-google-workspace-template.md" %}
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
{% set product_name = "Asgardeo" %}
{% set product_domain = "api.asgardeo.io" %}
{% set product_url_format = "https://api.asgardeo.io/t/{organization_name}" %}
{% set localhost_warning_note = "" %}
{% include "../../../../../includes/guides/authentication/sso-integrations/add-microsoft-365-template.md" %}
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
{% set product_name = "Asgardeo" %}
{% set product_domain = "api.asgardeo.io" %}
{% set product_url_format = "https://api.asgardeo.io/t/{organization_name}" %}
{% set localhost_warning_note = "" %}
{% include "../../../../../includes/guides/authentication/sso-integrations/add-salesforce-template.md" %}
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
{% include "../../../../../includes/guides/authentication/sso-integrations/index.md" %}
Original file line number Diff line number Diff line change
Expand Up @@ -10,10 +10,12 @@ User impersonation involves an authorization server’s ability to temporarily g

1. On the {{ product_name }} Console, go to **Applications**.

2. Select the application and go to API Authorization tab of the application and click authorize API Resource.
2. Select the application and go to API Authorization tab of the application and click authorize on API Resource.

3. Search for User Impersonation under management APIs and subscribe to the application.

![Api-Authorization-Impersonation-Selection]({{base_path}}/assets/img/guides/authorization/impersonation/user-impersonation-selection.png){: width="700" style="display: block; margin: 0; border: 0.3px solid lightgrey;"}

![Api-Authorization-Impersonation]({{base_path}}/assets/img/guides/authorization/impersonation/api-authorization-impersonation.png){: width="700" style="display: block; margin: 0; border: 0.3px solid lightgrey;"}

4. Switch to the Roles tab, click on **+ New Role** to create a Role and assign the Impersonation Scope.
Expand Down Expand Up @@ -65,12 +67,12 @@ A security JWT token that represents the identity of both parties Impersonator a
**Request Format**

```
https://api.asgardeo.io/t/{organization_name}/oauth2/authorize?response_type=code&redirect_uri={redirect_uri}&client_id={client_id}state=<sample_state>&scope=internal_user_impersonate%20{Other_Required_Scopes}&response_type=id_token%20subject_token&requested_subject={User_id_of_the_end_user}&nonce={nonce}
https://api.asgardeo.io/t/{organization_name}/oauth2/authorize?redirect_uri={redirect_uri}&client_id={client_id}&state=<sample_state>&scope=internal_user_impersonate%20{Other_Required_Scopes}&response_type=id_token%20subject_token&requested_subject={User_id_of_the_end_user}&nonce={nonce}
```

**Sample Request**
```
https://api.asgardeo.io/t/bifrost/oauth2/authorize?client_id=jVcW4oLn1Jjb2T94H4gtPV9z5Y0a&state=sample_state&scope=internal_user_impersonate%20openid%20internal_org_user_mgt_view%20internal_org_user_mgt_list%20internal_user_mgt_delete%20internal_org_user_mgt_create%20internal_login%20internal_user_mgt_delete%20internal_user_mgt_view%20internal_user_mgt_list%20internal_user_mgt_update%20internal_user_mgt_create%20readBooking%0A&redirect_uri=https%3A%2F%2Foauth.pstmn.io%2Fv1%2Fcallback&response_type=id_token%20subject_token&requested_subject=32bc4697-ed0f-4546-8387-dcd6403e7caa&nonce=2131232
https://api.asgardeo.io/t/bifrost/oauth2/authorize?client_id=jVcW4oLn1Jjb2T94H4gtPV9z5Y0a&state=sample_state&scope=internal_user_impersonate%20openid%20internal_org_user_mgt_view%20internal_org_user_mgt_list%20internal_user_mgt_delete%20internal_org_user_mgt_create%20internal_login%20internal_user_mgt_delete%20internal_user_mgt_view%20internal_user_mgt_list%20internal_user_mgt_update%20internal_user_mgt_create&redirect_uri=https%3A%2F%2Foauth.pstmn.io%2Fv1%2Fcallback&response_type=id_token%20subject_token&requested_subject=32bc4697-ed0f-4546-8387-dcd6403e7caa&nonce=2131232
```

**Sample Response after sucessful authorization**
Expand Down
200 changes: 200 additions & 0 deletions en/asgardeo/docs/quick-starts/react.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,200 @@
---
template: templates/quick-start.html
heading: React Quickstart
description: Welcome to the React Quickstart guide! In this document, you will learn to build a React application, add user login and display user profile information using Asgardeo.
what_you_will_learn:
- Create new React app using Vite
- Install <a href="https://github.com/asgardeo/asgardeo-auth-react-sdk" target="_blank">@asgardeo/auth-react</a> package
- Add user login and logout
- Display user profile information
prerequisites:
- About 15 minutes
- <a href="{{ config.extra.base_path }}/get-started/create-asgardeo-account/">Asgardeo account</a>
- Install a JS package manager
- A favorite text editor or IDE
source_code: <a href="https://github.com/asgardeo/asgardeo-auth-react-sdk/tree/main/samples/asgardeo-react-app" target="_blank" class="github-icon">React Vite App Sample</a>
whats_next:
- Try out Asgardeo complete React guide
- Try out Asgardeo user onboarding complete guide for React
- Read Asgardeo security best practices for React app guide
---

## Configure an application Asgardeo

- Sign into Asgardeo console and navigate to Applications > New Application.

- Select Single Page Application and Complete the wizard popup by providing a suitable name and an authorized redirect URL
- Name - Asgardeo-React
- Authorized redirect URL - `https://localhost:5173`

!!! abstract

The authorized redirect URL determines where Asgardeo should send users after they successfully log in. Typically, this will be the web address where your application is hosted. For this guide, we'll use `https://localhost:5173`, as the sample application will be accessible at this URL.

!!! note

Note down the following values : you will need them during the **Step 4**

- `client-id`
- `base-url`
- `redirect-url`

## Create a React application using Vite

Create (a.k.a scaffold) your new React application using Vite.

=== "npm"

``` bash
npm create vite@latest asgardeo-react -- --template react

cd asgardeo-react

npm install

npm run dev
```

=== "yarn"

``` bash
yarn create vite@latest asgardeo-react -- --template react

cd asgardeo-react

yran install

yarn dev
```

=== "pnpm"

``` bash
pnpm create vite@latest asgardeo-react -- --template react

cd asgardeo-react

pnpm install

pnpm run dev
```

## Install @asgardeo/auth-react

Asgardeo React SDK provides all the components and hooks you need to integrate Asgardeo into your app. To get started, simply add the Asgardeo React SDK to the project.

=== "npm"

``` bash
npm install @asgardeo/auth-react
```

=== "yarn"

``` bash
yarn add @asgardeo/auth-react
```

=== "pnpm"

``` bash
pnpm add @asgardeo/auth-react
```

## Add <AuthProvider /> to your app

The `<AuthProvider />` serves as a context provider for user login in the app. You can add the AuthProvider to your app by wrapping the root component.

Add the following changes to the `main.jsx` file.

!!! note

Replace below placeholders with your registered organization name in Asgardeo and the generated `client-id` from the app you registered in Asgardeo.

- `<your-app-client-id>`
- `https://api.asgardeo.io/t/<your-organization-name>`

```javascript title="src/main.jsx" hl_lines="4 7-13 17 19" linenums="1"
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App.jsx';
import { AuthProvider } from '@asgardeo/auth-react';
import './index.css';

const config = {
signInRedirectURL: "http://localhost:5173",
signOutRedirectURL: "http://localhost:5173",
clientID: "<your-app-client-id>",
baseUrl: "https://api.asgardeo.io/t/<your-organization-name>",
scope: [ "openid","profile" ]
}

ReactDOM.createRoot(document.getElementById('root')).render(
<React.StrictMode>
<AuthProvider config={ config }>
<App />
</AuthProvider>
</React.StrictMode>,
);

```

## Add login and logout link to your app

Asgardeo provides `useAuthContext` hook to conveniently access user authentication data and sign-in and sign-out methods.

Replace the existing content of the `App.jsx` file with following content.

```javascript title="src/App.jsx" hl_lines="1 5 9-13" linenums="1"
import { useAuthContext } from "@asgardeo/auth-react";
import './App.css';

const App = () => {
const { state, signIn, signOut } = useAuthContext();

return (
<>
{
state.isAuthenticated
? <button onClick={() => signOut()}>Logout</button>
: <button onClick={() => signIn()}>Login</button>
}
</>
)
};

export default App;
```

Visit your app's homepage at [http://localhost:5173](http://localhost:5173).

!!! tip

You need to create a test user in Asgardeo by following this guide to tryout login and logout features.

## Display logged in user details

Modified the code as below to see logged in user details.

```javascript title="src/App.jsx" hl_lines="8-15" linenums="1"
...

const App = () => {
...

return (
<>
{
state.isAuthenticated ?
<>
<p>Welocme {state.username}</p>
<button onClick={() => signOut()}>Logout</button>
</>
: <button onClick={() => signIn()}>Login</button>
}
</>
)
};

...
```
Original file line number Diff line number Diff line change
Expand Up @@ -347,7 +347,13 @@ components:
name:
type: string
value:
type: string
oneOf:
- type: string
- type: integer
- type: boolean
- type: array
items:
type: string
Operations:
type: object
properties:
Expand Down
Loading

0 comments on commit ab26b35

Please sign in to comment.