使用 passport.js 进行 Twitter 身份验证

Question

这是一个关于 Twitter OAuth 的小众问题 passport.js ()

我有一个控制器可以使用他们的 Twitter 更新用户的头像 "avatar":

const signInViaTwitter = (twitterProfile) => {
  return new Promise((resolve, reject) => {

    console.log(twitterProfile);

    // find if user exist on in
    User.findOne({ username: twitterProfile.username }, (error, user) => {
      if (error) { console.log(error); reject(error); }
      else {

        // user existed on db
        if (user) {
          // update the user with latest git profile info
          user.name = twitterProfile.displayName;
          user.username = twitterProfile.username;
          user.avatarUrl = twitterProfile.photos.value;
          user.email = '';

          // save the info and resolve the user doc
          user.save((error) => {
            if (error) { console.log(error); reject(error); }
            else { resolve(user); }
          });
        }

        // user doesn't exists on db
        else {
          // check if it is the first user (Adam/Eve) :-p
          // assign him/her as the admin
          User.count({}, (err, count) => {
            console.log('usercount: ' + count);

            let assignAdmin = false;
            if (count === 0) assignAdmin = true;

            // create a new user
            const newUser = new User({
              name: twitterProfile.displayName,
              username: twitterProfile.username,
              avatarUrl: twitterProfile.photos.value,
              email: '',
              role: assignAdmin ? 'admin' : 'user',
            });

            // save the user and resolve the user doc
            newUser.save((error) => {
              if (error) { console.log(error); reject(error); }
              else { resolve(newUser); }
            });

          });
        }
      }
    });
  });
};

用户身份验证有效 - 但由于某种原因，头像不会显示...这里是以下控制台输出：

Refused to load the image 'https://api.twitter.com/favicon.ico' because it violates the following Content Security Policy directive: "img-src https://abs.twimg.com https://*.twimg.com https://pbs.twimg.com data:".

有人知道这是什么意思吗？我认为这可能是由于处于开发模式 - 即 http://localhost:8080/ ...并且它不接受 https？或者不会传回去？

更新: ^我认为上述错误与图像未显示无关...

稍微看一下 html 源代码：

<img class="styles__userAvatar___2x2U9" src="{unknown}" alt="Wind Up Lord Vexxos Avatar">

所以它显然为 src 传递了一个未知变量 - 而不是用户的显示头像...

所以，对我来说，违规行是：

user.avatarUrl = twitterProfile.photos.value;

我应该将其设置为什么？

Answer 1

想想，twitterProfile.photos不就是数组吗？也许你应该尝试访问 twitterProfile.photos[0].value

使用 passport.js 进行 Twitter 身份验证

Twitter authentication with passport.js

javascript

node.js

twitter

twitter-oauth

passport.js