Angular 6, узел, паспорт и OAuth2 - PullRequest
Новая
       7

Angular 6, узел, паспорт и OAuth2

0 голосов
/ 13 сентября 2018

Я хочу разрешить пользователю моего приложения angular-cli v6 войти в систему с учетными данными github.Я использую passport и passport-github.

ключевые части на сервере узла это 

    passport.use(
        new Strategy(
            {
                clientID: '<clientID>',
                clientSecret: '<ClientSecret>',
                callbackURL: 'http://myapp/authenticated'
            },
            (accessToken, refreshToken, profile, cb) => {
                return cb(null, profile);
            }
        )
    );

    this.config.app.get(
        '/login',
        passport.authenticate('github', {
            scope: [
                'user',
                'notifications',
                'gist',
                'repo',
                'admin:org',
                'admin:public_key',
                'admin:repo_hook',
                'admin:org_hook'
            ]
        })
    );

    this.config.app.get(
        '/authenticated',
        passport.authenticate('github', {
            successRedirect: '/home',
            failureRedirect: '/signin',

            session: false
        }),
        (req, res) => {
            res.redirect('/home');
        }
    );
}

, поэтому я запускаю ng-serve и получаю форму для входа (on / signin)).Когда я нажимаю кнопку get, код делает это 

public async login(username: string, password: string) {
    const httpOptions = {
        headers: new HttpHeaders({
            'Content-Type': 'application/json'
        })
    };

    const result = await this.http
        .get<any>('/login', httpOptions)
        .toPromise();

, в этот момент я получаю ошибки сети и консоли 

404 https://github.com/login/oauth/authorize?response_type=code&redirect....

и 

Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://myapp' is therefore not allowed access.

, если я изменяю угловой код на чтение 

public async login(username: string, password: string) {
    window.open('/login', '_self');

, тогда приложение авторизуется на github, и пользователь перенаправляется на домашнюю страницу

что я делаю не так с угловым http-клиентомэто сгенерирует ошибку 404 и cors, когда тот же самый URL, введенный непосредственно из адресной строки браузера, работает нормально?

update # 1 : я заметил, что запрос к https://github.com/login/oauth/authorize для window.open('/login' - это GET , но угловой http-клиент - OPTIONS , который может объяснить 404

обновление # 2: Если я удаляю httpOptions из запроса, 404 пропадает ... но не ошибка CORS в консоли

публичный асинхронный вход в систему (имя пользователя: строка, пароль: строка) {

const result = await this.http
    .get<any>('/login')
    .toPromise();

update # 3 : если у меня есть href="'/login'" в кнопке html, то логин работает juSt хорошо, нет ошибки Cors.Итак, я полагаю, что я дошел до того, как имитировать вызов href в угловом методе

1 Ответ

0 голосов
/ 13 сентября 2018

Вы не можете смоделировать вызов href и не можете войти в систему в запросе XHR «за кадром».Для этого вам необходимо отправить пользователя на сайт.

Если вам нужно сделать это программно, выполните:

window.location.href = ...

...