时间戳

首页 > 解决方案 > 使用 OpenID Connect 反应管理员

react-admin - 使用 OpenID Connect 反应管理员

问题描述

我正在尝试使用 gitlab 作为 OAuth2 服务提供者来实现一个简单的 OpenID Connect react-admin 登录。

大多数关于 OpenID 的 react-admin 示例都是简单的用户名/密码登录。但是 OpenID Connect 会做几次重定向，我带来的是让 python/flask 服务器重定向到http://example.com/#/login?token=<token>，并让 react-admin 解析 URL，并在 localStorage 中设置令牌。

基本上是这样的：


(({ theme, location, userLogin } ) => {
  let params = queryString.parse(location.search);
  if (params.token) {
    userLogin({token: params.token});
  }
  return (
    <MuiThemeProvider theme={ theme }>
      <Button href={ '/api/gitlab/login' }>
        Login via GitLab
      </Button>
    </MuiThemeProvider>
  );
});

显然，这还不够好，我想就如何改进这一点提出一些建议？

标签： react-admin

解决方案

我假设您遵循了这个示例https://marmelab.com/react-admin/Authentication.html，它不包括 OAuth2 密码授权。

// in src/authProvider.js
import { AUTH_LOGIN } from 'react-admin';

export default (type, params) => {
    if (type === AUTH_LOGIN) {
        const { username, password } = params;
        const request = new Request('https://mydomain.example.com/authenticate', {
            method: 'POST',
            body: JSON.stringify({ username, password }),
            headers: new Headers({ 'Content-Type': 'application/json' }),
        })
        return fetch(request)
            .then(response => {
                if (response.status < 200 || response.status >= 300) {
                    throw new Error(response.statusText);
                }
                return response.json();
            })
            .then(({ token }) => {
                localStorage.setItem('token', token);
            });
    }
    return Promise.resolve();
}

GitLab 男孩/女孩描述了他们提供的资助。 https://docs.gitlab.com/ee/api/oauth2.html#resource-owner-password-credentials-flow

以下是如何使用 curl 获取访问令牌的示例：

echo 'grant_type=password&username=<your_username>&password=<your_password>' > auth.txt
curl --data "@auth.txt" --request POST https://gitlab.com/oauth/token

使用访问令牌，您可以从这里也描述的用户那里获得一些信息：https ://docs.gitlab.com/ee/api/oauth2.html#access-gitlab-api-with-access-token

下面是一个示例，您如何使用从上一次调用 curl 中获得的访问令牌从 GitLab 获取信息：

curl --header "Authorization: Bearer OAUTH-TOKEN" https://gitlab.com/api/v4/user

通过在 react-admin 示例中进行一些小调整，您可以使用密码凭证流程。

在这里您可以找到适用于 GitLab 的示例：

https://gist.github.com/rilleralle/b28574ec1c4cfe10ec7b05809514344b

import { AUTH_LOGIN } from 'react-admin';

export default (type, params) => {
    if (type === AUTH_LOGIN) {
        const { username, password } = params;
        const oAuthParams = {
            grant_type: "password",
            username,
            password
        }
        const body = Object.keys(oAuthParams).map((key) => {
            return encodeURIComponent(key) + '=' + encodeURIComponent(oAuthParams[key]);
          }).join('&');
        const request = new Request('https://gitlab.com/oauth/token', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
              },
            body
        })
        return fetch(request)
            .then(response => {
                if (response.status < 200 || response.status >= 300) {
                    throw new Error(response.statusText);
                }
                return response.json();
            })
            .then(( {access_token} ) => {
                localStorage.setItem('token', access_token);
            });
    }
    return Promise.resolve();
}

我希望这可以帮助你。

干杯拉尔夫

推荐阅读