I'm trying to do authentication with Steam from the home page in Angular but whenever I click on button (which has (click) event pointing at login() function in AppComponent), instead of being redirected to Steam page, current page is refreshed and nothing happens.
This is server-side code:
'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, done) => {
done(null, 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',
passport.authenticate('steam', { failureRedirect: 'http://localhost:4200/home' }),
(req, res) => {
res.json({"success": true, "res": res});
}
);
server.listen(3000, () => {
console.log('Backend listening on port 3000.');
});
This is 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());
}
}
This is 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);
});
}
}
Both servers are running (Angular and Node).
Edit: I added button instead of link and log showed me there is an error with Same-origin policy.