angular - 社交登录问题

问题描述

我可以像普通的非开发人员最终用户一样在独立的 Chrome 中使用 Gmail 登录、注销和“删除帐户”。

在 VSC 中使用 Angular 启动一个骨架 Angular 项目angularx-social-login，登录时遇到以下两个问题。

问题 1) F5 具有典型启动设置，用户名和密码得到下面的消息后（无论logoutWithGoogle是否触发。）

{
    "type": "pwa-chrome",
    "request": "launch",
    "name": "F5 against localhost",
    "url": "http://localhost:4200",
    "webRoot": "${workspaceFolder}"
}

无法让您登录此浏览器或应用程序可能不安全尝试使用其他浏览器。...

问题2）使用附加过程进行调试，它绕过用户名/密码并在以下屏幕显示后让我进入（无论logoutWithGoogle是否触发）

{
    "name": "Attach to a running Chrome @4200",
    "type": "pwa-chrome",
    "request": "attach",
    "port": 9222,
    "urlFilter": "http://localhost:4200/*",
    "webRoot": "${workspaceFolder}"
},

app.modules.ts

import { GoogleLoginProvider, SocialAuthServiceConfig, SocialLoginModule } from 'angularx-social-login';
@ngModule({ ...
  providers: [ {provide: 'SocialAuthServiceConfig', useValue:{autoLogin: false, providers: [{id: GoogleLoginProvider.PROVIDER_ID, provider: new GoogleLoginProvider('my Google-Client-ID')}]} as SocialAuthServiceConfig,}, ]

app.component.ts

import { SocialAuthService, GoogleLoginProvider, SocialUser } from 'angularx-social-login';
...
constructor(private socialAuthService: SocialAuthService) {}
ngOnInit()
{
this.socialAuthService.authState.subscribe
    (
        user => 
        {
            this.socialUser = user;
            this.isLoggedin = (user != null);
            console.log(this.socialUser);
        },
        bad => 
        {
            console.log(bad);
        }
    );
}
loginWithGoogle(): void { this.socialAuthService.signIn(GoogleLoginProvider.PROVIDER_ID);}
logoutWithGoogle(): void { this.isLoggedin = false; this.socialAuthService.signOut(); }

由于独立 Chrome 运行良好，它应该与 Angular 包或 VSC 相关。以下是 cmd 窗口中列出的版本：

angularx-social-login@3.5.4
Angular CLI: 11.2.6
Node: 14.9.0
OS: win32 x64

Angular: 11.2.7
... animations, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router
Ivy Workspace: Yes

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1102.6
@angular-devkit/build-angular   0.1102.6
@angular-devkit/core            11.2.6
@angular-devkit/schematics      11.2.6
@angular/cli                    11.2.6
@schematics/angular             11.2.6
@schematics/update              0.1102.6
rxjs                            6.6.6
typescript                      4.0.7

VSC 关于：

Version: 1.56.2 (user setup)
Commit: 054a9295330880ed74ceaedda236253b4f39a335
Date: 2021-05-12T17:13:13.157Z
Electron: 12.0.4
Chrome: 89.0.4389.114
Node.js: 14.16.0
V8: 8.9.255.24-electron.0
OS: Windows_NT x64 10.0.19041

标签： angularvisual-studio-codeangular-social-login

此问题并非特定于 VSC 调试模式。每当您尝试在已启用调试的 Chrome 实例中登录 Google 时，都会发生这种情况。换句话说，如果您、您的自动化软件或 IDE 使用 chrome.exe --remote-debugging-port=9222 之类的命令启动 chrome。

在附加和启动模式下，vsc 附加一个远程端口来控制浏览器。

在铬问题上提出了同样的问题：- https://bugs.chromium.org/p/chromium/issues/detail?id=1173641

https://github.com/microsoft/vscode-js-debug/issues/918#issuecomment-771928066

要检查您的 google 帐户安全设置，您可以选择允许不太安全的应用程序访问您的帐户以进行调试。

https://support.google.com/accounts/answer/6010255?hl=en#zippy=%2Cif-less-secure-app-access-is-on-for-your-account

angular - 社交登录问题

问题描述

解决方案

推荐阅读