使用Angular进行Steam身份验证

发布时间：2020-12-17 17:43:30 所属栏目：安全来源：网络整理

导读：我正在尝试从Angular的主页中使用Steam进行身份验证,但每当我点击按钮(其中有(点击)事件指向AppComponent中的login()函数),而不是被重定向到Steam页面时,当前页面会刷新没有任何反应. 这是服务器端代码： 'use strict';const express = require('express');c

我正在尝试从Angular的主页中使用Steam进行身份验证,但每当我点击按钮(其中有(点击)事件指向AppComponent中的login()函数),而不是被重定向到Steam页面时,当前页面会刷新没有任何反应.

这是服务器端代码：

'use strict';

const express = require('express');
const app = express();
const server = require('http').createServer(app);
const io = require('socket.io').listen(server);
const jwt = require('express-jwt');
const cors = require('cors');
const passport = require('passport');
const SteamStrategy = require('passport-steam').Strategy;
const mongoose = require('mongoose');

app.use(cors());
mongoose.connect('mongodb://localhost:27017/database_test');

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

passport.deserializeUser((obj,obj);
});

passport.use(new SteamStrategy({
        returnURL: 'http://localhost:3000/auth/steam/return',realm: 'http://localhost:3000',apiKey: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxx'
    },(identifier,profile,done) => {
        process.nextTick(() => {
            profile.identifier = identifier;
            return done(null,profile);
        });
    }
));

app.use(passport.initialize());
app.use(passport.session());

app.get('/auth/steam',passport.authenticate('steam',{ failureRedirect: 'http://localhost:4200/home' }),(req,res) => {
        res.json({"success": true,"res": res});
    }
);

app.get('/auth/steam/return',"res": res});
    }
);

server.listen(3000,() => {
    console.log('Backend listening on port 3000.');
});

这是AuthenticationService：

import { Injectable } from '@angular/core';
import { Http,Headers,RequestOptions } from '@angular/http';
import { Observable } from 'rxjs';
import { JwtHelper,tokenNotExpired } from 'angular2-jwt';
import 'rxjs/add/operator/map';

@Injectable()
export class AuthenticationService {

  domain = 'http://localhost:3000';

  constructor(private http: Http) { }

  login() {
    return this.http.get(this.domain + '/auth/steam').map(res => res.json());
  }

}

这是AppComponent：

import { Component } from '@angular/core';
import { AuthenticationService } from './authentication.service';

@Component({
  selector: 'app-root',templateUrl: './app.component.html',styleUrls: ['./app.component.css'],providers: [ AuthenticationService ]
})
export class AppComponent {

  constructor(private authService: AuthenticationService) { }

  login(): void {
    this.authService.login().subscribe(data => {
      alert(data);
    });
  }

}

两台服务器都在运行(Angular和Node).

编辑：我添加了按钮而不是链接,日志显示我有一个错误与Same-origin policy.

解决方法

简单地说,您无法将Angular服务重定向到后端=> steam =>后端回调网址.您必须将用户重定向到那里.

因此,不要调用authService.login(),只需添加直接链接,就像在其他地方所说的那样.我没有在你的后端代码中看到第一个链接,但前端代码建议使用SteamStrategy docs中的/ auth / steam.

所以,第1步是这样的：

// change the login() method on AuthService
login() {
  window.location.href = "http://localhost:3000/auth/steam";
}

(您将希望从环境中获取该URL或稍后使用该URL.)

现在发生了什么：

>浏览器转到localhost：3000 / auth / steam
>节点将浏览器重定向到steam openId
> Steam,在成功登录和授权授权后,重定向回http：// localhost：3000 / auth / steam / return

接下来发生什么？

>首先,将Passport策略中的配置文件数据保存到用户的配置文件中,或者至少保存到用户的会话中.
>然后,将用户重定向回Angular应用程序.像这样的东西：

res.redirect(‘/公/#/ authcallback)`

(在这里使用HashLocationStrategy,以便清楚地看到我在哪里重定向你.)

>现在,Angular中的/ authcallback路由应该再次直接命中端点,以获取auth数据,然后再进行自己的重定向.

备择方案：

现在,最后一部分可以以不同方式完成.你可以做一些事情,比如从节点重定向到索引或原始路径(你可以将它们添加为params等).然后,有一个Angular服务,如果有auth数据,它总是用后端检查.

或者你可以让你的节点后端在Angular的index.html或你正在使用的任何页面中嵌入信息.你知道,老式的服务器端可能会在脚本标签中注入数据,例如ejs或jade.它会更快,但我仍然不会盲目地相信客户端(或服务器),并会仔细检查,也许在后台.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!