Yew 的 OAuth2（及 OIDC）组件

将其添加到您的 Cargo.toml

yew-oauth2 = "0.11"

默认情况下，yew-nested-router 与 yew-nested-router 的集成是禁用的。您可以使用以下方法启用它：

yew-oauth2 = { version = "0.10", features = ["yew-nested-router"] }

OpenID Connect

OpenID Connect 需要额外的依赖项，并且可以通过使用功能 openid 来启用。

示例

快速使用示例（更多完整示例见下文）

use yew::prelude::*;
use yew_oauth2::prelude::*;
use yew_oauth2::oauth2::*; // use `openid::*` when using OpenID connect

#[function_component(MyApplication)]
fn my_app() -> Html {
    let config = Config::new(
        "my-client",
        "https://my-sso/auth/realms/my-realm/protocol/openid-connect/auth",
        "https://my-sso/auth/realms/my-realm/protocol/openid-connect/token"
    );

    html!(
    <OAuth2 {config}>
      <MyApplicationMain/>
    </OAuth2>
  )
}

#[function_component(MyApplicationMain)]
fn my_app_main() -> Html {
    let agent = use_auth_agent().expect("Must be nested inside an OAuth2 component");

    let login = use_callback(agent.clone(), |_, agent| {
        let _ = agent.start_login();
    });
    let logout = use_callback(agent, |_, agent| {
        let _ = agent.logout();
    });

    html!(
    <>
      <Failure><FailureMessage/></Failure>
      <Authenticated>
        <button onclick={logout}>{ "Logout" }</button>
      </Authenticated>
      <NotAuthenticated>
        <button onclick={login}>{ "Login" }</button>
      </NotAuthenticated>
    </>
  )
}

此存储库还有一些完整示例

yew-oauth2-example

一个完整示例，隐藏在“登录”页面之后的一切，并在用户登录后显示内容。

与 OpenID Connect 或 OAuth2 一起使用。

yew-oauth2-redirect-example

一个完整示例，显示完整的菜单结构，但在需要时自动将用户重定向到登录服务器。

与 OpenID Connect 或 OAuth2 一起使用。

测试

使用本地 Keycloak 实例和 trunk 可以在本地测试示例项目。

使用以下命令启动 Keycloak 实例：

podman-compose -f develop/docker-compose.yaml up

然后使用本地开发实例启动 trunk

cd yew-oauth2-example # or yew-oauth2-redirect-example
trunk serve

并在浏览器中导航到 http://127.0.0.1:8080。

注意：重要的是要使用 http://127.0.0.1:8080 而不是例如 http://127.0.0.1:8080，因为 Keycloak 默认配置为在开发模式下使用 http://127.0.0.1:* 作为有效的重定向 URL。否则，您将从 Keycloak 获得一个“无效的重定向”错误。