@8base/web-auth0-auth-client 中文文档教程

发布于 3年前 浏览 23 项目主页 更新于 3年前

8base web auth0 auth client

AuthProvider 的 8base auth0 身份验证客户端。

WebAuth0AuthClient

Table of Contents

WebAuth0AuthClient

创建 web auth0 身份验证客户端的实例。

Parameters

  • workspaceId string Identifier of the 8base app workspace.
  • domain string Domain. See auth0 documentation.
  • clientId string Client id. See auth0 documentation.
  • redirectUri string Redurect uri. See auth0 documentation.

Usage

Without authentication profile

import { AuthContext, AuthProvider, type AuthContextProps } from '@8base/react-auth';
import { WebAuth0AuthClient } from '@8base/web-auth0-auth-client';

  const authClient = new WebAuth0AuthClient({
    domain: 'domain',
    clientId: 'client-id',
    redirectUri: `${window.location.origin}/auth/callback`,
    logoutRedirectUri: `${window.location.origin}/auth`,
  });

  const renderAuth = (auth) => {
    const authorize = async () => {
      const authData = await auth.authorize();

      await auth.setAuthState({
        token: authData.idToken,
        email: authData.email,
      });
    };

    const logout = async () => {
      await auth.purgeState();
      await auth.logout();
    };

    if (auth.isAuthorized) {
      return (
        <div>
          <p>Hi ${auth.authState.email} !</p>
          <button type='button' onClick={ logout }>Logout</button>
        </div>
      );
    }

    return (
      <div>
        <button type='button' onClick={ authorize }>Authorize with auth0<button/>
      </div>
    );
  };

  ...

  <AuthProvider authClient={ authClient }>
    ...
      <AuthContext.Consumer>
        { renderAuth }
      </AuthContext.Consumer>
    ...  
  </AuthProvider>

With custom authentication profile

...

import { WebAuth0AuthClient } from '@8base/web-auth0-auth-client';

  const authClient = new WebAuth0AuthClient({
    domain: 'domain',
    clientId: 'client-id',
    redirectUri: `${window.location.origin}/auth/callback`,
    logoutRedirectUri: `${window.location.origin}/auth`,
    workspaceId: 'workspace-id',
    profile: {
      id: 'profile-id',
    },
  });

...

With default authentication profile

...

import { WebAuth0AuthClient } from '@8base/web-auth0-auth-client';

  const authClient = new WebAuth0AuthClient({
    domain: 'domain',
    clientId: 'client-id',
    redirectUri: `${window.location.origin}/auth/callback`,
    logoutRedirectUri: `${window.location.origin}/auth`,
    workspaceId: 'workspace-id',
    profile: {
      id: 'profile-id',
      isDefault: true,
    },
  });

...

8base web auth0 auth client

The 8base auth0 auth client for the AuthProvider.

WebAuth0AuthClient

Table of Contents

WebAuth0AuthClient

Create an instance of the web auth0 auth client.

Parameters

  • workspaceId string Identifier of the 8base app workspace.
  • domain string Domain. See auth0 documentation.
  • clientId string Client id. See auth0 documentation.
  • redirectUri string Redurect uri. See auth0 documentation.

Usage

Without authentication profile

import { AuthContext, AuthProvider, type AuthContextProps } from '@8base/react-auth';
import { WebAuth0AuthClient } from '@8base/web-auth0-auth-client';

  const authClient = new WebAuth0AuthClient({
    domain: 'domain',
    clientId: 'client-id',
    redirectUri: `${window.location.origin}/auth/callback`,
    logoutRedirectUri: `${window.location.origin}/auth`,
  });

  const renderAuth = (auth) => {
    const authorize = async () => {
      const authData = await auth.authorize();

      await auth.setAuthState({
        token: authData.idToken,
        email: authData.email,
      });
    };

    const logout = async () => {
      await auth.purgeState();
      await auth.logout();
    };

    if (auth.isAuthorized) {
      return (
        <div>
          <p>Hi ${auth.authState.email} !</p>
          <button type='button' onClick={ logout }>Logout</button>
        </div>
      );
    }

    return (
      <div>
        <button type='button' onClick={ authorize }>Authorize with auth0<button/>
      </div>
    );
  };

  ...

  <AuthProvider authClient={ authClient }>
    ...
      <AuthContext.Consumer>
        { renderAuth }
      </AuthContext.Consumer>
    ...  
  </AuthProvider>

With custom authentication profile

...

import { WebAuth0AuthClient } from '@8base/web-auth0-auth-client';

  const authClient = new WebAuth0AuthClient({
    domain: 'domain',
    clientId: 'client-id',
    redirectUri: `${window.location.origin}/auth/callback`,
    logoutRedirectUri: `${window.location.origin}/auth`,
    workspaceId: 'workspace-id',
    profile: {
      id: 'profile-id',
    },
  });

...

With default authentication profile

...

import { WebAuth0AuthClient } from '@8base/web-auth0-auth-client';

  const authClient = new WebAuth0AuthClient({
    domain: 'domain',
    clientId: 'client-id',
    redirectUri: `${window.location.origin}/auth/callback`,
    logoutRedirectUri: `${window.location.origin}/auth`,
    workspaceId: 'workspace-id',
    profile: {
      id: 'profile-id',
      isDefault: true,
    },
  });

...
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
    原文