Question

我刚开始使用oidc-client-js，所以我真的很困惑，试图理解它。我有以下问题:)。

我已连接到运行OpenIDConnect的远程网络服务器，并专门使用https://github.com/mitreid-connect/OpenID-Connect-Java-Spring-Server 我已经构建了openid-connect-server-webapp 并正确创建了一个客户端。它托管在虚拟机上。

我遵循了本教程 - ＆gt; link
为我所遵循的教程修改的3个html文件的链接 - ＆gt; here

控制台上显示的错误：

一切都很好，你可以在下面的图片中看到，我授权简单的javascript应用程序，我正在返回access_token和id_token，虽然当我试图调用API，繁荣我得到错误，我不知道为什么吗？

我拥有的html索引代码是（如果它可以帮助你）：

<!DOCTYPE html>
<html>
<head>
    <title>JS Application</title>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.css" />
    <style>
        .main-container {
            padding-top: 70px;
        }

        pre:empty {
            display: none;
        }
    </style>
</head>
<body>
    <nav class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <a class="navbar-brand" href="#">JS Application</a>
            </div>
        </div>
    </nav>

    <div class="container main-container">
        <div class="row">
            <div class="col-xs-12">
                <ul class="list-inline list-unstyled requests">
                    <li><a href="index.html" class="btn btn-primary">Home</a></li>
                    <li><button type="button" class="btn btn-default js-login">Login</button></li>
                    <li><button type="button" class="btn btn-default js-call-api">Call API</button></li>
                    <li><button type="button" class="btn btn-danger js-logout">Logout</button></li>
                </ul>
            </div>
        </div>

        <div class="row">
            <div class="col-xs-6">
                <div class="panel panel-default">
                    <div class="panel-heading">User data</div>
                    <div class="panel-body">
                        <pre class="js-user"></pre>
                    </div>
                </div>
            </div>

            <div class="col-xs-6">
                <div class="panel panel-default">
                    <div class="panel-heading">API call result</div>
                    <div class="panel-body">
                        <pre class="js-api-result"></pre>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="node_modules/jquery/dist/jquery.js"></script>
    <script src="node_modules/bootstrap/dist/js/bootstrap.js"></script>
    <script src="node_modules/oidc-client/dist/oidc-client.js"></script>

    <script>
        // helper function to show data to the user
        function display(selector, data) {
            if (data && typeof data === 'string') {
                data = JSON.parse(data);
            }
            if (data) {
                data = JSON.stringify(data, null, 2);
            }

            $(selector).text(data);
        }


        var settings = {
            authority: 'http://snf-761523.vm.okeanos.grnet.gr:8080/openid-connect-server-webapp',
            client_id: 'client',
            client_secret: "secret",
            user_id: "user",
            popup_redirect_uri: 'http://localhost/jsApp/popup.html',
            silent_redirect_uri: 'http://localhost/jsApp/silent-renew.html',
            post_logout_redirect_uri: 'http://localhost/jsApp/index.html',

           response_type: 'token id_token',
           scope: 'openid profile email offline_access',

           filterProtocolClaims: false
        };

        var manager = new Oidc.UserManager(settings);
        var user;

        Oidc.Log.logger = console;

        manager.events.addUserLoaded(function (loadedUser) {
            user = loadedUser;
            display('.js-user', user);
        });

        manager.events.addSilentRenewError(function (error) {
            console.error('error while renewing the access token', error);
        });

        manager.events.addUserSignedOut(function () {
            alert('The user has signed out');
        });

        $('.js-login').on('click', function () {
            manager
                .signinPopup()
                .catch(function (error) {
                    console.error('error while logging in through the popup', error);
                });
        });

        $('.js-call-api').on('click', function () {
            var headers = {};
            if (user && user.access_token) {
                headers['Authorization'] = 'Bearer ' + user.access_token;
            }

            $.ajax({
                url: 'http://snf-761523.vm.okeanos.grnet.gr:8080/openid-connect-server-webapp/api/tokens/access',
                method: 'GET',
                dataType: 'json',
                headers: headers
            }).then(function (data) {
                display('.js-api-result', data);
            }).catch(function (error) {
                display('.js-api-result', {
                    status: error.status,
                    statusText: error.statusText,
                    response: error.responseJSON
                });
            });
        });

        $('.js-logout').on('click', function () {
            manager
                .signoutRedirect()
                .catch(function (error) {
                    console.error('error while signing out user', error);
                });
        });
    </script>
</body>
</html>

Answer 1

有一个临时解决方案仅适用于测试您的应用程序，而不适用于生产，禁用Google Chrome上的网络安全

首先你需要杀死所有的CHROME ，然后安装一个名为CORS Toggle的插件最后运行来自Terminal或Commant Prompt的轰鸣声commants

适用于Windows .\chrome --args --disable-web-security --user-data-dir

对于Ubuntu Linux（仅在那里测试） /opt/google/chrome/google-chrome --args --disable-web-security --user-data-dir

OpenID-Connect-Java-Spring-Server CORS禁用错误

1 个答案: