xychenxy / pirate-shopping

pirate-shopping

The pirate shopping project is one of my side projects that allows me to keep adding some tech to advance my skillset.

To do list breakdown

Deploy to AWS instead of Netlify, https://www.pirate-in-melbourne.com/ [down]
设置GitHub动作，将Docker Images推向AWS ECR [完成]
auth0 [完成]

技术

前端

React 18，vite，TypeScript，Redux，Hooks，Firebase，Auth0 Login，Auth0 Login，CSS-in-JS

后端

Node/Express framework

其他

AWS，Docker，GitHub Action，Netlify

如何运行

请确保 docker 已经安装了。

运行./run_docker.sh dev|prod

生产

docker build . -t xychenxy/pirate-shopping docker run -it -p 5000:5000 -e "NODE_ENV=production" xychenxy/pirate-shopping

View on GitHub

OAuth 2.0 是授权的行业标准协议。 OAuth 2.0专注于客户开发人员的简单性，同时为Web应用程序，桌面应用程序，手机和客厅设备提供特定的授权流。来自https://oauth.net/2/
的参考
auth0 是实现OAuth 2.0协议的软件产品。

流

从下图我们可以轻松地判断客户端将从授权服务器中获得2种类型的令牌（访问和刷新）。访问令牌用于保护您的资源，刷新令牌用于获得新的访问令牌和刷新令牌。

让我们看看如何在React和Node中实现AUTH0

反应一面

在React Codebase中，安装 @auth0/auth0-react

<Auth0Provider
    domain={import.meta.env.VITE_AUTH0_DOMAIN}
    clientId={import.meta.env.VITE_AUTH0_CLIENT_ID}
    authorizationParams={{
        redirect_uri: window.location.origin,
        audience: import.meta.env.VITE_AUTH0_AUDIENCE,
    }}
    onRedirectCallback={onRedirectCallback}
    // scope="read:current_user"
>
    {children}
</Auth0Provider>;

您还可以使用getAccessTokenSilently()获取新的访问令牌。

对于某些受保护的资源请求，请确保添加标头：{授权：Bearer token}在您的请求中

useEffect(() => {
try {
    const fetchAccessToken = async () => {
        const newAccessToken = await getAccessTokenSilently({
            authorizationParams: {
                audience: import.meta.env.VITE_AUTH0_AUDIENCE,
                scope: "read:current_user",
            },
        });

        localStorage.setItem("token", newAccessToken);
    };
    if (isAuthenticated) {
        fetchAccessToken();
    }
} catch (e: any) {
    console.log("error", e.message);
}
}, [getAccessTokenSilently, isAuthenticated]);

节点侧

在节点代码库中，express-jwt和jwks-rsa对于使用Auth00进行JWT检查很有用

const jwtCheck = jwt({
    secret: jwks.expressJwtSecret({
        cache: true,
        rateLimit: true,
        jwksRequestsPerMinute: 5,
        jwksUri: `https://${process.env.auth0_domain}/.well-known/jwks.json`,
    }),
    audience: process.env.audience,
    issuer: `https://${process.env.auth0_domain}/`,
    algorithms: ["RS256"],
});

有时，如果您想获取用户信息，那么将用户信息放入您的请求中不是一个好主意，我们可以这样做


const userInfo = await axios
    .get(`https://${process.env.auth0_domain}/userinfo`, {
        headers: {
            Authorization: req.headers.authorization,
        },
    })
    .then((response) => {
        return response.data;
    });

概括

auth0是一个很棒的产品，它使我们能够快速实施身份验证过程。为什么不尝试一下？