Question

我想允许我的angular-cli v6应用程序的用户使用github凭据登录。我正在使用护照，以及护照-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并获取了我的登录表单（在/ signin上）。当我按下获取按钮时，代码会执行此操作

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的授权，并且用户重定向到了首页

当直接从浏览器地址栏中输入的相同网址正常工作时，会产生404和cors错误的有角度的http客户端我怎么了？

更新＃1 ：我注意到window.open('/login'到https://github.com/login/oauth/authorize的请求是 GET ，但是有角度的http客户端是一个选项，可以解释404

更新＃2 ：如果我从请求中删除了httpOptions，则404消失了……但是控制台中没有CORS错误

公共异步登录（用户名：字符串，密码：字符串）{

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

更新＃3 ：如果我在HTML按钮中有href="'/login'"，则登录正常，没有错误。所以我想我已经到了如何在角度方法中模拟href调用的地步了

Answer 1

您无法模拟href呼叫，也无法在“幕后” XHR请求中进行登录。要进行这种登录，您必须将用户实际发送到该站点。

如果您需要以编程方式执行此操作，请执行以下操作：

window.location.href = ...

角度6，节点，通行证和OAuth2

1 个答案: