Asgardeo Auth 反应 SDK

[尖叫声] 折旧通知

Asgardeo Auth 反应 SDK 已经 已贬值 已经 不再维持。 。 。 .
现在改为: @asgardeo/反应,现在是官方的一部分 Asgardeo JavaScript SDK套件。 。 。 .

请将您的工程迁移到新的 SDK , 以获取最新的更新、 特性和安全改进 .

目录

• 导言
• 先决条件
• 开始
• 使用 APIs
  • 使用API的最佳做法
  • useAuthContext() 钩子
  • 添加登录/ 日志按钮
  • 显示认证用户信息
  • 添加运行
  • API 文档
• 应用程序样本
• 开发
• 贡献
• 许可证

导言

Asgardeo Auth React SDK 允许 React 应用程序使用 OpenID 连接 - OIDC 认证 阿斯加多语Name 作为消费者身份和获取管理提供商。 SDK 支持以下能力

• 认证用户
• 显示认证用户信息
• 获取额外的用户信息
• 安全组件
• 将 HTTP 请求发送到 Asgardeo

先决条件 - 在 Asgardeo 登记您的申请

1. 注册到 阿斯加多语Name 并创建一个组织 如果你还没有一个。 您选择的组织名称将被称为 <org_name> 本文件全文.
2. 在 Asgardeo 中注册一个单页应用程序 以获取必要的密钥来整合您的应用程序。 你会得到一个 client_ID 从Asgardeo的应用程序,需要嵌入您的整合申请的后期.

开始

遵循此指南将 Asgardeo 集成到您自己的反应应用中 。 试出试样的应用程序,使用 本指南。 。 。 .

1. 安装软件包

运行以下命令以安装 @asgardeo/auth-react 从 npm 注册.

npm install @asgardeo/auth-react --save

2. 进口 AuthProvider 提供 配置参数

Asgardeo 反应 SDK 曝光 AuthProvider 组件,它帮助您将 Asgardeo 与您的应用程序结合.

首先导入 AuthProvider 构成部分从 @asgardeo/auth-react. 中定义了应用程序根组件.

说明 通常反应app的根组件在索引.* 文件中被定义.

import { AuthProvider } from "@asgardeo/auth-react";

然后,用 AuthProvider。 。 。 .

import React from "react";
import { AuthProvider } from "@asgardeo/auth-react";

const config = {
     signInRedirectURL: "https://localhost:3000/sign-in",
     signOutRedirectURL: "https://localhost:3000/dashboard",
     clientID: "<client_ID>",
     baseUrl: "https://api.asgardeo.io/t/<org_name>",
     scope: [ "openid","profile" ]
};

export const MyApp = (): ReactElement => {
    return (
        <AuthProvider config={ config }>
            <App />
        </AuthProvider>
    )
}

说明 你可以提到 详细情况 AuthProvider config 这里

一旦根元件被AuthProvider所包裹, useAuthContext() 钩子 可以在应用程序的任何地方用于实施应用程序中的用户认证能力.

使用 APIs

使用API的最佳做法

Asgardeo Auth React SDK 建于顶部 阿斯加德奥特SPA SDK一个基础图书馆 因此,几乎所有来自 Auth SPA SDK 的可用API 都从 Asgardeo Auth React SDK 重新被输出,您不需要从基库导入依赖性到您的应用程序 .

• 应用程序依赖性中唯一应该列出的 SDK 是 @asgardeo/auth-react。 。 。 .
• 总是从中导入 API @asgardeo/auth-react。 。 。 .

3⁄4 ̄ ̧漯B IDE 或编辑器自动导入有时会导入某些 API @asgardeo/auth-spa手动把它们换回来.

import { AsgardeoSPAClient } from "@asgardeo/auth-react";

// In package.json

dependencies: {
    "@asgardeo/auth-react": "^2.0.0"
}

useAuthContext() 钩子

这个 useAuthContext() sDK提供的钩子可用于实施必要的认证功能并访问包含诸如认证用户唯一标识等信息的会话状态.

导入 useAuthContext() 钩从 @asgardeo/auth-react。 。 。 .

import { useAuthContext } from "@asgardeo/auth-react";

然后在您的组件中, 您可以访问上下文如下

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

在应用程序中执行认证能力时,您需要的常用方法很少.

• signIn - 启动对Asgardeo的登录请求,处理响应以获取认证响应.
• signOut - 从Asgardeo登录用户,并清除SDK存储中的任何认证数据.
• isAuthenticated - 检查是否有经过认证的用户会话 。 根据结果可以决定更改应用程序视图/行为.
• getBasicUserInfo - 从认证回复中获得认证用户的基本信息.
• getDecodedIDToken - 解码 id_token 在认证回复中获取。 您可以从中获取更多信息, 如额外的用户属性 .
• getIDToken - 拿来 id_token (JWT)在认证响应中获得.
• getAccessToken - 拿来 access_token 在认证回复中获取.
• refreshAccessToken - 拿来 refresh_token 在认证回复中获取.
• getHttpClient - 获取 Httpclient 实例, 以便您可以给后端打个电话, 客户端将在请求中附加必要的授权信头 .

这个 state 对象将包含诸如用户是否正在登录、当前登录用户的用户名等属性.

说明 你可以提到 这里详细的 API 文档

添加登录/ 日志按钮

你可以用这个 signIn() 方法从 useAuthContext() 易于执行 登录按钮。 。 。 .

<button onClick={ () => signIn() }>Login</button>

与上述步骤类似,我们可以使用 signOut() 方法从 useAuthContext() 执行 登录按钮。 。 。 .

<button onClick={() => signOut()}>Logout</button>

正在点击 登录按钮 将把用户带入 Asgardeo 登录页面。 成功时 signIn(),用户会被重定向到应用程序(根据指定的 signInRedirectURL)和 state.isAuthenticated 将设定为 true。 。 。 .

正在点击 注销按钮 并重新定向到 signOutRedirectURL 编辑 state.isAuthenticated 将设定为 false。 。 。 .

说明 而不是按钮,你可以使用 signIn() 打开 signOut() 从 SDK 执行应用程序中任何预设的用户经验的方法

你可以用这个 state.isAuthenticated 属性以检查用户的认证状态.

显示认证用户信息

下面的代码片段显示了该代码的用法: state 对象,连同 signIn() 财务报告和审定财务报表 signOut() 方法从上下文.

import React from "react";
import { useAuthContext } from "@asgardeo/auth-react";

function App() {

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

  return (
    <div className="App">
      {
        state.isAuthenticated
          ? (
            <div>
              <ul>
                <li>{state.username}</li>
              </ul>

              <button onClick={() => signOut()}>Logout</button>
            </div>
          )
          : <button onClick={() => signIn()}>Login</button>
      }
    </div>
  );
}

export default App;

添加运行

如果您的应用程序需要路由, SDK 提供多种方法来保障您的应用程序中的路径安全 。 你可以读更多关于 这里的阿斯加德奥的路由能力。 。 。 .

API 文档

除此之外,Asgardeo还提供一系列广泛的API,用于在您的反应应用中整合和使用Asgardeo. 你可以指一个 这里详细的 API 文档。 。 。 .

应用程序样本

Asgardeo提供的试样反应Apps可以让你带Asgardeo去旋转,而无需自己设置应用程序. 你看见了 如何在此设置样本应用程序。 。 。 .

开发

先决条件

• Node.js (第10版或以上).
• yarn 软件包管理器.

安装依赖关系

该寄存器是一个单发寄存器. SDK 存储器见于 独立 目录。 您可以在根部运行以下命令来安装依赖性 .

yarn build

贡献

请阅读 对守则基础的贡献 详细介绍我们的行为守则和向我们提交拉动请求的程序.

报告问题

我们鼓励您报告问题、改进和特性要求 Github 问题。 。 。 .

重要:请注意,安全问题必须报告给Security@wso2com,而不是作为GitHub问题,以便达到适当的受众。 我们强烈建议在报告安全问题时遵循《第二安全标准报告准则》.

许可证

这个项目根据Apache许可证2.0获得许可. 见 自由主义 详细文件.