reactjs - 如何从回调发送 JWT 到 React 客户端？

Question

我正在尝试使用 Facebook 等社交媒体和邮件创建一个具有无密码身份验证的应用程序。

我愚蠢地卡住了一点，也许我还没有明白一些事情。

让我们将我的项目命名为 MyApp:

如果用户尝试从 myapp.com/ 登录 facebook，他将被重定向到 facebook.com/login，然后 facebook 将他重定向到 myapp.com/callback.

因此，在我的服务器上，路由 / 和 /callback 完全相同:它们只是将我的 React 应用程序发送给用户，但是 /callback 生成 JWT token 。

这里是我的问题:如何在 React 应用程序的同时将 JWT token 发送到客户端？

也许我错过了其他提供商的某些内容，但是邮件的无密码原则是一样的:只是一个用于验证用户身份的链接，并且只是重定向到 /callback，没有外部提供商.

我完全迷失了:(

谢谢!

Answer 1

您可以将 JWT 放入要将用户重定向到的 URL 的查询字符串中。然后，您通过访问查询字符串来获取客户端中的 JWT，并将其保存到本地存储。我最近自己完成了它，查看我的存储库 server here , client here

编辑:我在服务器中发布了回调路由的代码，并在客户端中获取 token 以了解更多详细信息，请检查上面我的存储库的链接

回调路由

app.get('/auth/github/callback', (req,res) => {
githubAuth.code.getToken(req.originalUrl)
    .then(user => {
        console.log(user.data);
        return fetch('https://api.github.com/user?access_token=' + user.accessToken);
    })
    .then(result => {
        return result.json();
    })
    .then(json => {
        //console.log(json);
        //res.send(json);
        return User.findOne({githubId: json.id})
            .then(currentUser => {
                if(currentUser){  // user already exists
                    console.log('User exists with GitHub Login: ' + currentUser);
                    return currentUser;
                }
                else{  // User doesn't exist
                // saved automatically using mongoose, returns Promise
                    return new User({
                        username: json.login,
                        githubId: json.id
                    }).save()
                        .then(newUser => {
                            console.log('New User created with GitHub Login: ' + newUser);
                            return newUser;
                        });
                }
            });
    })
    .then(user => {
        // Now use user data to create a jwt
        const token = jwt.sign({id: user._id}, process.env.JWT_ENCRYPTION_KEY, {
            expiresIn: 86400  // expires in 24 hours
        });

        const encodedToken = encodeURIComponent(token);
        res.status(200);
        res.redirect('/profile?token=' + encodedToken);
    })
    .catch(err => console.log(err));
});

客户端中的 token 检索

class UserProfile extends React.Component{
    constructor(props){
        super(props);
        this.state = {username: ''};
    }

    componentDidMount(){
        const query = new URLSearchParams(this.props.location.search)

        // When the URL is /the-path?some-key=a-value ...
        let token = query.get('token')
        console.log(token)

        if(token){  // it's the first time we receive the token
            // we save it
            console.log('Saving token');
            localStorage.setItem('userjwt', token);
        }
        else{
            // if qrstring is empty we load the token from storage
            token = localStorage.userjwt;
            console.log('Loading token: ' + token);
        }

        if(token){
            const headers = new Headers({
                'x-access-token': token
            });

            const reqOptions = {
                method: 'GET',
                headers: headers
            };

            fetch('/user', reqOptions)
                .then(res => res.json())
                .then(user => {
                    console.log(user);
                    console.log(user.username);
                    this.setState({username: user.username});
                })
        }
    }

    render(){
        if(this.state.username === ''){
            return(
                <div className="social-profile">
                    <h2>Login first</h2>
                </div>
            );
        }
        else{
            return(
                <div className="social-profile">
                    <h2>User: {this.state.username}</h2>
                </div>
            );
        }
    }
}