使用 OpenID Connect 反应管理员

Question

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

大多数关于 OpenID 的 react-admin 示例都是简单的 username/password 登录。但是 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>
  );
});

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

Answer 1

我假设您遵循了这个示例 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();
}

希望对您有所帮助。

干杯拉尔夫

Answer 2

这是一个在 react-admin 身份验证提供程序中使用 oauth 流程的好例子： https://github.com/marmelab/ra-example-oauth/blob/master/app/src/authProvider.js

使用 OpenID Connect 反应管理员

React Admin with OpenID Connect

react-admin

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