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

Question

我正在尝试使用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>
  );
});

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

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 auth provider 中使用 oauth 流程的一个很好的例子： https://github.com/marmelab/ra-example-oauth/blob/master/app/src/authProvider.js

使用OpenID Connect反应管理员

2 个答案:

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