通信[服务器]节点js和[客户端] vue js与护照js进行认证

问题描述

我正在尝试使用护照js进行客户端/服务器身份验证。我的服务器是使用节点js并在8082端口上进行序列化的Express js，我的客户端是使用8084上的路由器和axios的vue js。

我正在服务器端用twitch执行认证：

路由[服务器]

Im使用来自身份验证的数据（id，角色，令牌...）渲染json

app.get('/twitchAuth',passport.authenticate('twitch',{ scope: 'user_read' })
);


app.get('/twitchAuth/callback',function(req,res,next) {

// generate the authenticate method and pass the req/res
passport.authenticate('twitch',function(err,userTemp,info) {
console.log(userTemp);
 if (err) { return next(err); }
 if (!userTemp) { return res.redirect('/'); }

 // req / res held in closure
 req.logIn(userTemp,function(err) {
   if (err) { return next(err); }
   User.findOne({
     where: {
       username: userTemp.login
     }
   }).then(user => {
     return res.status(200).send({
       id: user.id,username: user.username,email: user.email,roles: 'ROLE_MODERATOR',token: user.access_token
     });
   });
   });
  })(req,next);
 });

护照js身份验证[服务器]

我正在数据库中插入内容

passport.use( new twitchStrategy(
    {
      clientID: keys.twitch.clientID,clientSecret: keys.twitch.clientSecret,callbackURL: "http://localhost:8082/twitchAuth/callback",scope: "user_read"
    },function(accessToken,refreshToken,profile,done) {
    User.findOrCreate({
       where: { username: profile.login},defaults: { id: profile.id,username: profile.login,email: profile.email,display_name: profile.display_name,type: profile.type,brodcaster_type: profile.brodcaster_type,description: profile.description,profile_image_url: profile.profile_image_url,offline_image_url: profile.offline_image_url,view_count: profile.view_count,provider: profile.provider
       }
    });

    UserRoles.findOrCreate({
       where: { userId: profile.id},defaults: { userId: profile.id,roleId: 2
       }
    });


    User.update({ access_token: accessToken,refresh_token : refreshToken},{
      where: {
        username: profile.login
      }
    });

    done( null,accessToken );
  }
));

passport.serializeUser(function(user,done) {
    done(null,user);
});

passport.deserializeUser(function(user,user);
});

我的客户端是使用模板vue js的带有抽动按钮的连接页面。当用户单击它时，我必须调用身份验证路由，即“ http：// locahost：8082 / twitchAuth”。然后，用户继续进行抽搐验证，并使用返回的json调用回调。

我想从服务器回调到vue js客户端访问回调json数据。而且我不知道该怎么办。

vue js抽搐认证[客户端]

我正在调用重定向到auth twitch服务器，这正在工作，但是我不知道如何获取回调

<template>
<div class="col-md-12">
<div class="card card-container">
<img
  id="profile-img"
  src="//ssl.gstatic.com/accounts/ui/avatar_2x.png"
  class="profile-img-card"
 />
 <hr>
 <form name="form" @submit.prevent="submit" >
  <div class="form-group">
    <button id="btnTwitch" class="btn btn-block">Twitch authentication <img class="icones"    src="@/assets/icone/twitch.svg" /></button>
  </div>
</form>


<div
  v-if="message"
  class="alert"
  :class="successful ? 'alert-success' : 'alert-danger'"
>{{info}}</div>
 </div>
 </div>
 </template>

 <script>
 import User from '../models/user';
 import axios from 'axios';

 const API_URL_TWITCH = 'http://localhost:8082/twitchAuth';
 const API_URL_TWITCH_CALLBACK = 'http://localhost:8082/twitchAuth/callback';

 export default {
 name: 'Twitch',data() {
 return {
  user: new User('','',''),submitted: false,successful: false,message: ''
  };
  },computed: {
loggedIn() {
  return this.$store.state.auth.status.loggedIn;
}
},mounted() {
if (this.loggedIn) {
  this.$router.push('/profile');
}
},beforeMount(){
this.getCallBack()
},methods: {
 submit() {
  this.loading = true;

  window.location.href = API_URL_TWITCH;

},getCallBack: function() {
axios
  .get(API_URL_TWITCH_CALLBACK)
  .then(response => alert(response))
}
}
};
</script>

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）