angular - 403 错误：access_denied，Error_description：此来源的客户端无效

Question

Angular v12angularx-social-login用于 Google 身份验证，在本地运行良好。作为应用服务部署到 Azure，将 URL 粘贴复制到 Google CloudAuthorized 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 中部署的应用程序添加 clientID。

要获取应用程序的 ClientID： AAD>APP REGISTRATION>CREATE NEW(IF NOT)>OVERVIEW

示例代码示例：-

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

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

• 角度社交登录| NPMJS
• 博客：将 OAuth 2.0 用于 Web 服务器应用程序