Leptos OIDC 认证

leptos_oidc 是一个用于在 Leptos 框架中处理 OpenID Connect (OIDC) 认证的实用库。它简化了 OIDC 认证流程与基于 Leptos 的应用程序的集成，使管理用户认证和令牌变得更加容易。

目录

• Leptos 兼容性
• 功能
• 缺失的功能
• 测试后端及示例
• 使用方法
  • 初始化
  • 生成登录和注销 URL
  • 条件渲染组件
  • 刷新访问令牌
• 许可证

Leptos 兼容性

功能

leptos_oidc 提供以下功能

• 初始化 OIDC 认证过程。
• 生成登录和注销 URL，用于将用户重定向到 OIDC 提供商（例如，Keycloak）。
• 根据认证状态条件渲染组件。
• 刷新访问令牌并将其存储在本地存储中。
• 与客户端和服务器端渲染一起工作
• 在后台自动刷新访问令牌。
• PKCE 挑战

缺失的功能

• 使刷新令牌可选
• 一些微小的代码重构/清理

测试后端及示例

leptos_oidc 在各种后端上进行了测试。这并不意味着不支持其他后端。每个支持 oidc 的后端都应该工作。但请随时寻求建议或提供反馈！

测试后端

• KeyCloak
• rauthy

您可以在 docs/backends 下找到后端的设置指南。

Keycloak

Rauthy

安装

要在您的 Leptos 基于应用程序中使用 leptos_oidc，请将其添加到您的 Cargo.toml 文件中的依赖项

[dependencies]
leptos_oidc = "0.7"

注意：这至少需要 leptos v0.6。

使用方法

初始化和示例

要开始使用OIDC身份验证，请使用所需的身份验证参数初始化库。您可以使用AuthParameters结构体来指定OIDC端点、客户端ID、重定向URI和其他相关信息。

请注意，issuer url需要是基本url，不包括/.well-known/openid-configuration。

use leptos::*;
use leptos_oidc::{Auth, AuthParameters};

#[component]
pub fn App() -> impl IntoView {
    provide_meta_context();

    view! {
        <Stylesheet id="leptos" href="/pkg/main.css"/>

        <Link rel="shortcut icon" type_="image/ico" href="/favicon.ico"/>

        <Router>
            <AppWithRouter/>
        </Router>
    }
}

#[component]
pub fn AppWithRouter() -> impl IntoView {
    // Specify OIDC authentication parameters here.
    // Note: This is an example for keycloak, please change it to your needs
    let auth_parameters = AuthParameters {
        issuer: "https://ENDPOINT/auth/v1".to_string(),
        client_id: "CLIENT_ID".to_string(),
        redirect_uri: "https://127.0.0.1:3000/profile".to_string(),
        post_logout_redirect_uri: "https://127.0.0.1:3000/bye".to_string(),
        challenge: Challenge::S256,
        scope: Some("openid%20profile%20email"),
        audience: None,
    };
    let auth = Auth::init(auth_parameters);

    view! {
        // This is an example for a navbar where you have a login and logout
        // button, based on the state.
        <div>
            <Authenticated unauthenticated=move || {
                view! {
                    <LoginLink class="text-login">Sign in</LoginLink>
                }
            }>
                <LogoutLink class="text-logut">Sign Out</LogoutLink>
            </Authenticated>
        </div>

        <Routes>
            <Route path="/" view=move || view! { <Home/> }/>

            // This is an example route for your profile, it will render
            // loading if it's still loading, render unauthenticated if it's
            // unauthenticated and it will render the children, if it's
            // authenticated
            <Route
                path="/profile"
                view=move || {
                    view! {
                        <Authenticated
                            loading=move || view! { <Loading/> }
                            unauthenticated=move || view! { <Unauthenticated/> }
                        >
                            <Profile/>
                        </Authenticated>
                    }
                }
            />
        </Routes>
    }
}

#[component]
pub fn Home() -> impl IntoView {
    let auth = expect_context::<Auth>();

    view! {
        <Title text="Home"/>
        <h1>Home</h1>

        // Your Pome Page without authentication
    }
}

/// This will be rendered, if the authentication library is still loading
#[component]
pub fn Loading() -> impl IntoView {
    view! {
        <Title text="Loading"/>
        <h1>Loading</h1>

        // Your Loading Page/Animation
    }
}

/// This will be rendered, if the user is unauthenticated
#[component]
pub fn Unauthenticated() -> impl IntoView {
    view! {
        <Title text="Unauthenticated"/>
        <h1>Unauthenticated</h1>

        // Your Unauthenticated Page
    }
}

/// This will be rendered, if the user is authentication
#[component]
pub fn Profile() -> impl IntoView {
    view! {
        <Title text="Profile"/>
        <h1>Profile</h1>

        // Your Profile Page
    }
}

注意：请注意，Auth::init需要在Router内部。内部状态使用use_query，这仅在Router内部可用。

生成登录和注销 URL

leptos_oidc提供了生成登录和注销URL的功能，这些URL用于将用户重定向到OIDC提供者进行身份验证和注销。

use leptos::*;
use leptos_oidc::Auth;

#[component]
fn MyComponent() {
    let auth = expect_context::<Auth>();

    // Generate the login URL to initiate the authentication process.
    let login_url = move || auth.login_url();

    // Generate the logout URL for logging out the user.
    let logout_url = move || auth.logout_url();
}

条件渲染组件

库包含透明组件，可以根据身份验证状态有条件地渲染内容。这些组件简化了处理已认证用户和未认证用户时的用户界面。

use leptos::*;
use leptos_oidc::Auth;

#[component]
fn MyComponent() {

    view! {
        // Generate Sign In link
        <LoginLink class="optional-class-attributes">Sign in</LoginLink>

        // Generate Sign Out link
        <LogoutLink class="optional-class-attributes">Sign Out</LogoutLink>

        <AuthLoaded>"This will be rendered only when the auth library is not loading anymore"</AuthLoaded>

        <AuthLoading>"This will be rendered only when the auth library is still loading"</AuthLoading>

        <Authenticated>"This will only be rendered if the user is authenticated"</Authenticated>

        // A more complex example with optional fallbacks for the loading and unauthenticated state
        <Authenticated
            unauthenticated=move || view! { "this will only be renderd if the user is unauthenticated" }
            loading=move || view! { "this will only be renderd if the library is still loading" }
            >
                "This will only be rendered if the user is authenticated"
        </Authenticated>
    }
}

刷新访问令牌

现在这个库能够在后台刷新access_token :)。

许可证

leptos_oidc遵循MIT许可证分发。有关更多信息，请参阅LICENSE文件。