2017-12-25 69 views
6

के साथ स्टीम प्रमाणीकरण मैं एंगुलर में होम पेज से स्टीम के साथ प्रमाणीकरण करने की कोशिश कर रहा हूं लेकिन जब भी मैं बटन पर क्लिक करता हूं (login() पर AppComponent में फ़ंक्शन 0), स्टीम पेज पर रीडायरेक्ट होने की बजाय, वर्तमान पृष्ठ ताज़ा किया गया है और कुछ भी नहीं होता है।कोणीय

यह वह जगह है सर्वर-साइड कोड:

'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.'); 
}); 

यह 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); 
    }); 
    } 

} 

दोनों सर्वर चल रहे हैं (कोणीय और नोड)।

संपादित करें: मैंने लिंक के बजाय बटन जोड़ा और लॉग दिखाया कि मुझे Same-origin policy के साथ एक त्रुटि है।

+1

बस भाप के साथ सामान करने के लिए, जोड़ना चाहता था। मैं ज्यादातर अंगुलर के साथ व्यापार/कॉर्पोरेट सामान के साथ ड्रोनिंग कर रहा हूं, और स्टैक ओवरव्लो ट्रैफिक द्वारा निर्णय ले रहा हूं, अधिकतर लोग हैं। आप कुछ ऐसा करने में विशिष्ट हैं जो मुझे लगता है, गेमिंग से संबंधित है! आप के लिए शुभकामनाएं, महोदय, और सभी मज़ेदार हैं, और फिर हमारे बाकी के लिए कुछ और मजेदार है :) – Zlatko

उत्तर

1

आप अपने कोड में क्या कर रहे हैं अपने सर्वर पर एक जीईटी अनुरोध कहते हैं। मुझे कोई पेज रीडायरेक्शन बिल्कुल नहीं दिख रहा है।

आप किसी बाहरी वेबसाइट करने के लिए उपयोगकर्ता अनुप्रेषित करने तुम वहाँ उपयोगकर्ता भेजने की जरूरत चाहते हैं, या तो:

HTML फ़ाइल से:

<a href="http://example.com">Link to steam</a> 

अपने घटक .ts फ़ाइल से:

window.location.href = 'http://www.example.com' 

आप अपनी वेबसाइट के किसी दूसरे पृष्ठ करने के लिए उपयोगकर्ता अनुप्रेषित चाहते हैं, यो

<a routerLink="/component-one">Component One</a> 

अपने घटक .ts फ़ाइल से::

this.router.navigate(['/component-one']); 

तो तुम घटक अब हो जाता है:

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

@Component({ 
    selector: 'app-root', 
    templateUrl: './app.component.html', 
    styleUrls: ['./app.component.css'], 
    providers: [ AuthenticationService ] // This should be provided by the module, not the component 
}) 
export class AppComponent { 

    constructor(private authService: AuthenticationService, private router: Router) { } 

    login(): void { 
    this.authService.login().subscribe(data => { 
     alert(data); 
     this.router.navigate('/to-some-page'); 
    }); 
    } 

} 

HTML फ़ाइल से: यू कोणीय रूटर उपयोग करने की आवश्यकता अधिक उदाहरण Google search के साथ मिल सकते हैं, जैसे 01 से नीचे

+0

रीडायरेक्शन स्वचालित रूप से पासपोर्ट की ''प्रमाणीकरण' विधि के माध्यम से किया जाता है। – Nikola

1

जहाँ तक मैं देख सकता हूं कि आप कभी भी स्टीम पेज पर उपयोगकर्ता को निर्देशित नहीं कर रहे हैं। क्लॉन्ग के लिए आपकी टिप्पणी: "पासपोर्ट के माध्यम से पुनर्निर्देशन किया जाता है"। यह हो सकता है, हालांकि आप कभी भी आपको किसी विशिष्ट पृष्ठ पर उपयोगकर्ता नहीं भेज रहे हैं। आप बस एक जीईटी अनुरोध फॉर्म बना रहे हैं जो आप आगे बढ़ते हैं।

समान मूल नीति त्रुटि के बारे में। मुझे लगता है कि यह पासपोर्ट के कारण होता है क्योंकि आप अपने एक्सप्रेस सर्वर पर कॉर्स का उपयोग करते हैं। मुझे लगता है कि एक सरल प्रॉक्सी बनाने का सबसे अच्छा समाधान होगा। यदि आप सीएलआई का उपयोग करते हैं तो आप this example का उपयोग कर सकते हैं।

1

सबसे पहले, आप बैकएंड व्यक्त करने के लिए अपना लॉगिन अनुरोध नहीं भेजते हैं। आपको स्टीम ओआईडीसी को एंडपॉइंट अधिकृत करने के लिए अपना लॉगिन अनुरोध भेजना होगा।देखें स्टीम कहता है:

ओपनआईडी का उपयोग करते समय, उपयोगकर्ता तीसरे पक्ष की वेबसाइट पर एक वेब ब्राउज़र में शुरू होता है। जब उपयोगकर्ता ओपनआईडी का उपयोग करके उस वेबसाइट पर अपने खाते को लॉगिन/लिंक करना चाहता है, तो साइट उपयोगकर्ता को भाप समुदाय वेबसाइट पर लॉगिन फॉर्म पर निर्देशित करती है। एक बार उपयोगकर्ता ने अपने स्टीम लॉगिन क्रेडेंशियल्स में प्रवेश करने के बाद, उपयोगकर्ता का वेब ब्राउज़र स्वचालित रूप से रिटर्न यूआरएल में जोड़े गए कुछ अतिरिक्त ओपनआईडी विशिष्ट डेटा के साथ तीसरे पक्ष की वेबसाइट पर रीडायरेक्ट हो जाता है। साइट की ओपनआईडी लाइब्रेरी तब उपयोगकर्ता के स्टीमआईड को सत्यापित करने और प्राप्त करने के लिए इस डेटा का उपयोग कर सकती है।

इसे ओडिक कहा जाता है और भाग्यशाली है कि आप कोणीय के लिए दो अच्छी पुस्तकालय हैं। This (Recommended) और This

आपके एक्सप्रेस सर्वर को क्या करने की आवश्यकता है अनुरोध से पहले अपने कोणीय ग्राहक से प्राप्त टोकन को सत्यापित करना है। मैं एक्सप्रेस से बहुत परिचित नहीं हूं लेकिन, मुझे यकीन है कि आपके लिए टोकन को सत्यापित करने के लिए कम से कम कुछ पुस्तकालय हैं।

इसके अलावा आपको इस विषय पर और अधिक शोध करने की आवश्यकता है।

2

बस कहा, आप अपनी कोणीय सेवा को अपने बैकएंड => स्टीम => बैकएंड कॉलबैक यूआरएल पर रीडायरेक्ट नहीं कर सकते हैं। आपको वहां उपयोगकर्ता को रीडायरेक्ट करना होगा।

तो authService.login() पर कॉल करने के बजाय, बस एक और लिंक जोड़ें, जैसा कि कहीं और कहा गया है। मुझे आपके बैकएंड कोड में पहला लिंक नहीं दिखाई देता है, लेकिन फ्रंटएंड कोड स्टीमस्ट्रेटी डॉक्स में /auth/steam सुझाता है।

तो, चरण 1 यह है:

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

(आप इस तरह बाद में environment या कुछ से उस URL को लेने के लिए चाहता हूँ।)

अब क्या होता है:

  1. ब्राउज़र localhost:3000/auth/steam
  2. नोड ब्राउज़र को स्टीम खोलने के लिए रीडायरेक्ट करता है ID
  3. स्टीम, सफल लॉगिन और ऑथ अनुदान पर, http://localhost:3000/auth/steam/return

पर क्या रीडायरेक्ट करता है, आगे क्या होता है?

  • ठीक है, पहले, उस प्रोफाइल डेटा को पासपोर्ट रणनीति में उपयोगकर्ता की प्रोफ़ाइल में सहेजें, या कम से कम उपयोगकर्ता के सत्र में सहेजें।
  • फिर, उपयोगकर्ता को कोणीय एप पर वापस रीडायरेक्ट करें। कुछ इस तरह:।

    res.redirect('/public/#/authcallback) `

(ताकि आप स्पष्ट रूप से देख जहां मैं तुम्हें पुनः निर्देशित किया गया था HashLocationStrategy का उपयोग करते हुए यहाँ)

  • अब, कोणीय में अपने /authcallback मार्ग शायद हिट करना चाहिए अपने स्वयं के रीडायरेक्ट करने से पहले, ऑथ डेटा प्राप्त करने के लिए सीधे एक बार और अधिक अंतराल।

विकल्प:

अब, यह अंतिम भाग को अलग ढंग से किया जा सकता है। आप कुछ ऐसा कर सकते हैं जैसे नोड वापस इंडेक्स या रीडायरेक्ट रूट जो भी हो (आप उन्हें पैराम्स आदि के रूप में जोड़ सकते हैं)। फिर, एक कोणीय सेवा है, हमेशा ऑथ डेटा होने पर बैकएंड के साथ वापस जांचता है।

या आप अपने नोड बैकएंड एम्बेड एंगुलर के index.html या जो भी पेज आप उपयोग कर रहे हैं, में जानकारी हो सकती है। आप जानते हैं, पुराने स्कूल, सर्वर-साइड शायद ejs या jade जैसे किसी स्क्रिप्ट टैग में डेटा इंजेक्ट करता है। यह तेज़ होगा, लेकिन मैं अभी भी क्लाइंट (या सर्वर) पर अंधेरे पर भरोसा नहीं करता और शायद पृष्ठभूमि में दोबारा जांच करूँगा।

+1

उत्तर ने मुझे भी मदद की। अच्छी तरह से लिखा, धन्यवाद Zlatko। – filipbarak