社交登录问题
Issues of Social Login
我可以独立使用 Gmail 登录、注销和“删除帐户”Chrome,与普通的非开发人员最终用户一样。
使用angularx-social-login
在VSC中启动骨架Angular项目,登录时遇到以下两个问题。
问题 1) 具有典型启动设置的 F5,在用户名和密码收到以下消息后(无论是否触发 logoutWithGoogle
。)
{
"type": "pwa-chrome",
"request": "launch",
"name": "F5 against localhost",
"url": "http://localhost:4200",
"webRoot": "${workspaceFolder}"
}
Couldn't sign you in This browser or app may not be secure Try using a
different browser. ...
问题 2) 使用附加进程进行调试,它会绕过 username/password 并在以下屏幕显示后让我进入(无论是否触发 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 window:
中列出的版本
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
此问题并非特定于 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 帐户安全设置,您可以选择允许安全性较低的应用程序访问您的帐户以进行调试。
F5调试的解决方法是更改launch.json的设置:
- 为
type
使用旧版 "chrome"
而不是 pwa-chrome
。
- 使用不同于默认 4200 或您的项目使用的任何端口的差异端口,只要这个新端口可用即可。例如 4201 我的 Angular.
以下是我的:
{
"type": "chrome",
"request": "launch",
"name": "F5 against localhost",
"port": 4201,
"url": "http://localhost:4200",
"webRoot": "${workspaceFolder}"
}
我可以独立使用 Gmail 登录、注销和“删除帐户”Chrome,与普通的非开发人员最终用户一样。
使用angularx-social-login
在VSC中启动骨架Angular项目,登录时遇到以下两个问题。
问题 1) 具有典型启动设置的 F5,在用户名和密码收到以下消息后(无论是否触发 logoutWithGoogle
。)
{
"type": "pwa-chrome",
"request": "launch",
"name": "F5 against localhost",
"url": "http://localhost:4200",
"webRoot": "${workspaceFolder}"
}
Couldn't sign you in This browser or app may not be secure Try using a different browser. ...
问题 2) 使用附加进程进行调试,它会绕过 username/password 并在以下屏幕显示后让我进入(无论是否触发 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 window:
中列出的版本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
此问题并非特定于 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 帐户安全设置,您可以选择允许安全性较低的应用程序访问您的帐户以进行调试。
F5调试的解决方法是更改launch.json的设置:
- 为
type
使用旧版"chrome"
而不是pwa-chrome
。 - 使用不同于默认 4200 或您的项目使用的任何端口的差异端口,只要这个新端口可用即可。例如 4201 我的 Angular.
以下是我的:
{
"type": "chrome",
"request": "launch",
"name": "F5 against localhost",
"port": 4201,
"url": "http://localhost:4200",
"webRoot": "${workspaceFolder}"
}