0

我想在他授权后显示用户的头像。我编写了一个显示其用户名的代码。但是我无法显示它的头像，有人可以帮帮我。谢谢

也有人可以告诉我如何连接两个 HTML 文件，因为我有两个 HTML 文件，所以我该怎么做：

else res.sendFile('index.html', { root: '.' });

这是我的 HTML 中的代码：

<script>
         function generateRandomString() {
            const rand = Math.floor(Math.random() * 10);
            let randStr = '';
 
            for (let i = 0; i < 20 + rand; i++) {
                randStr += String.fromCharCode(33 + Math.floor(Math.random() * 94));
            }
 
            return randStr;
        }
 
        window.onload = function () {
            const fragment = parseQuery(window.location.href);
            if (fragment.access_token) {
                const urlState = fragment.state;
                const stateParameter = localStorage.getItem('stateParameter');
                if (stateParameter !== atob(decodeURIComponent(urlState))) {
                    return console.log('You may have been clickjacked!');
                }
 
                const accessToken = fragment.access_token;
                const tokenType = fragment.token_type;
 
                fetch('https://discordapp.com/api/users/@me', {
                    headers: {
                        authorization: `${tokenType} ${accessToken}`
                    }
                })
                    .then(res => res.json())
                    .then(response => {
                        console.log(response);
                        const { username, discriminator } = response;
                         
                        console.log(username, discriminator);
                        document.getElementById('info').textContent = ` ${username}#${discriminator}`;
                    })
                    .catch(console.error);
            } else {
                const randStr = generateRandomString();
                localStorage.setItem('stateParameter', randStr);
 
                document.getElementById('login').href += `&state=${encodeURIComponent(btoa(randStr))}`;
                document.getElementById('login').style.display = 'block';
            }
        }
        function parseQuery(queryString) {
            var query = {};
            var pairs = (queryString[0] === '?' ? queryString.substr(1) : queryString).split('&');
            for (var i = 0; i < pairs.length; i++) {
                var pair = pairs[i].split('=');
                query[decodeURIComponent(pair[0])] = decodeURIComponent(pair[1] || '');
            }
            return query;
        }
    </script>

这是显示用户名的 HTML：

<h5 id="info">hi</h5>

这是我的 javascript 文件代码：

const app = require('express')();
const fetch = require('node-fetch');

app.get('/', async (req, res) => {
    let access_token;
    let token_type;
    if (req.query.code) {
        const accessCode = req.query.code;
        const data = {
            client_id     : 'My client id',
            client_secret : 'My client secret',
            grant_type    : 'authorization_code',
            redirect_uri  : 'http://localhost:3000',
            code          : accessCode,
            scope         : 'identify'
        };

        const res = await fetch('https://discordapp.com/api/oauth2/token', {
            method  : 'POST',
            body    : new URLSearchParams(data),
            headers : {
                'Content-Type' : 'application/x-www-form-urlencoded'
            }
        });
        const info = await res.json();
        token_type = info.token_type;
        access_token = info.access_token;
        const post = await fetch('https://discordapp.com/api/users/@me', {
            headers : {
                authorization : `${token_type} ${access_token}`
            }
        });
        const user = await post.json();
    }

    if (token_type && access_token && req.query.state) {
        res
            .status(200)
            .redirect(
                `http://localhost:3000/?code=${req.query.code}&state=${req.query
                    .state}&access_token=${access_token}&token_type=${token_type}`
            );
    } else res.sendFile('index.html', { root: '.' });
});

app.listen(3000);
4

0 回答 0