最近我尝试使用IdentityServer4和React客户端设置身份验证 . 我遵循了IdentityServer文档的 Adding a JavaScript client （部分）教程：https://media.readthedocs.org/pdf/identityserver4/release/identityserver4.pdf也使用 Quickstart7_JavaScriptClient 文件 .

缺点是我使用React作为我的前端，而我对React的了解并不足以实现使用React的教程中使用的相同功能 .

尽管如此，我开始阅读并试图开始使用它 . 我的IdentityServer项目和API已设置好，并且似乎正常工作（也与其他客户端一起测试） .

我首先将oidc-client.js添加到我的Visual Code项目中 . 接下来，我创建了一个在开始时呈现的页面（将其命名为Authentication.js），这是包含Login，Call API和Logout按钮的位置 . 此页面（Authentication.js）如下所示：

import React, { Component } from 'react';
import {login, logout, api, log} from '../../testoidc'
import {Route, Link} from 'react-router';

export default class Authentication extends Component {
    constructor(props) {
      super(props);
    }

    render() {
      return (
        <div>
            <div>  
                <button id="login" onClick={() => {login()}}>Login</button>
                <button id="api" onClick={() => {api()}}>Call API</button>
                <button id="logout" onClick={() => {logout()}}>Logout</button>

                <pre id="results"></pre>

            </div>  

            <div>
                <Route exact path="/callback" render={() => {window.location.href="callback.html"}} />

                {/* {<Route path='/callback' component={callback}>callback</Route>} */}
            </div>
        </div>
      );
    }
  }

在testoidc.js文件中（上面导入了）我添加了所有使用的oidc函数（示例项目中的app.js） . 路由部分应该使callback.html可用，我已经保留了该文件（这可能是错误的） .

testoidc.js文件包含以下函数：

import Oidc from 'oidc-client'


export function log() {
  document.getElementById('results').innerText = '';

  Array.prototype.forEach.call(arguments, function (msg) {
      if (msg instanceof Error) {
          msg = "Error: " + msg.message;
      }
      else if (typeof msg !== 'string') {
          msg = JSON.stringify(msg, null, 2);
      }
      document.getElementById('results').innerHTML += msg + '\r\n';
  });
}

var config = {
  authority: "http://localhost:5000",
  client_id: "js",
  redirect_uri: "http://localhost:3000/callback.html",
  response_type: "id_token token",
  scope:"openid profile api1",
  post_logout_redirect_uri : "http://localhost:3000/index.html",
};
var mgr = new Oidc.UserManager(config);

mgr.getUser().then(function (user) {
  if (user) {
      log("User logged in", user.profile);
  }
  else {
      log("User not logged in");
  }
});

export function login() {
  mgr.signinRedirect();
}

export function api() {
  mgr.getUser().then(function (user) {
      var url = "http://localhost:5001/identity";

      var xhr = new XMLHttpRequest();
      xhr.open("GET", url);
      xhr.onload = function () {
          log(xhr.status, JSON.parse(xhr.responseText));
      }
      xhr.setRequestHeader("Authorization", "Bearer " + user.access_token);
      xhr.send();
  });
}

export function logout() {
  mgr.signoutRedirect();
}

有很多事情出错了 . 当我单击登录按钮时，我被重定向到identityServer的登录页面（这很好） . 当我使用有效凭据登录时，我将被重定向到我的反应应用程序：http://localhost:3000/callback.html#id_token=Token

Identity项目中的此客户端定义如下：

new Client
                {
                    ClientId = "js",
                    ClientName = "JavaScript Client",
                    AllowedGrantTypes = GrantTypes.Implicit,
                    AllowAccessTokensViaBrowser = true,

                    // where to redirect to after login
                    RedirectUris = { "http://localhost:3000/callback.html" },

                    // where to redirect to after logout
                    PostLogoutRedirectUris = { "http://localhost:3000/index.html" },

                    AllowedCorsOrigins = { "http://localhost:3000" },
                    AllowedScopes =
                    {
                        IdentityServerConstants.StandardScopes.OpenId,
                        IdentityServerConstants.StandardScopes.Profile,
                        "api1"
                    }

                }

虽然，似乎永远不会调用回调函数，但它只是留在回调网址上，背后有一个很长的令牌 .

此外，getUser函数在登录后仍然显示“用户未登录”，并且Call API按钮一直表示没有令牌 . 显然事情没有正常工作 . 我只是不知道它出了什么问题 . 检查时，我可以看到本地存储中生成了令牌：

enter image description here

此外，当我单击注销按钮时，我会被重定向到身份主机的注销页面，但是当我单击注销时，我不会被重定向到我的客户端 .

My questions are:

  • 我是否在与IdentityServer4结合使用oidc-client的正确轨道上？

  • 我使用正确的库还是做出反应需要不同于oidc-client.js的库 .

  • 是否有任何教程将反应前端与IdentityServer4和oidc-client（没有redux）结合使用，我找不到任何教程 .

  • 如何/在哪里添加callback.html，是否应该重写？

有人能指出我正确的方向，这里很可能会出现更多错误，但目前我只是陷入了甚至开始的地方 .

reactjs authentication identityserver4