403错误:access_denied，Errordescription:此来源的客户端无效

Question

Angular v12使用angularx-social-login进行Google身份验证，在本地运行正常。部署到Azure作为应用程序服务，将URL粘贴到Google Cloud的Authorized JavaScript origins和Authorized redirect URIs以及现有的localhost:4200中。

客户端ID被硬编码到下面的app.module.ts中，经过验证的系统变量GOOGLE_APPLICATION_CREDENTIALS无关紧要。

providers: 
[
{
provide: 'SocialAuthServiceConfig',
useValue:
{
autoLogin: false,
providers: 
[
{
id: GoogleLoginProvider.PROVIDER_ID,
provider: new GoogleLoginProvider('xyz123.apps.googleusercontent.com') 
}
]
} as SocialAuthServiceConfig,
},
...
],  

输入帐户和密码后获得403

{
"error" : "access_denied",
"error_description" : "Invalid client for this origin."
}

Answer 1

解决方法之一可以帮助解决上述问题：

看看你的代码，你似乎提供了uri而不是CLIENT ID

请确保为您在Azure中部署的应用程序添加客户端ID 。

要获取应用程序的ClientID：AAD>APP注册>创建新的(如果不是(>概述

示例代码示例：-

providers: [
{
provide: 'SocialAuthServiceConfig',
useValue: {
autoLogin: false,
providers: [
{
id: GoogleLoginProvider.PROVIDER_ID,
provider: new GoogleLoginProvider(
'clientId'
)
},

有关更多信息，请参阅以下链接：-

• 角度社交登录|NPMJS
• BLOG:为Web服务器应用程序使用OAuth 2.0