Angular Google登录如何传递Google Cloud同意屏幕的scopes

Google Cloud控制台同意屏幕配置的scope不会自动同步到前端登录请求，你用的社交登录库在初始化GoogleLoginProvider时如果不手动传入scope配置，默认只会请求openid、profile、email三个基础身份权限，不会带上你需要的其他API权限，所以登录弹窗里不会显示对应权限申请项。

初始化GoogleLoginProvider时，在第二个配置参数里显式传入你需要的全量scope列表，多个scope用空格分隔即可。
修改后的模块配置代码：

// 确认导入路径和你安装的库版本匹配，旧版angularx-social-login的导入路径为angularx-social-login
import { SocialAuthServiceConfig, GoogleLoginProvider } from '@abacritt/angularx-social-login';

// 替换成你在GCP后台配置的实际需要的scopes，示例包含了云盘文件读写、日历事件编辑的常用scope
const REQUIRED_GOOGLE_SCOPES = 'openid profile email https://www.googleapis.com/auth/drive.file https://www.googleapis.com/auth/calendar.events';

@NgModule({
  declarations: [AppComponent],
  imports: [
    // 保留你原有的BrowserModule、SocialLoginModule等导入项，不要删除
  ],
  providers: [
    {
      provide: 'SocialAuthServiceConfig',
      useValue: {
        autoLogin: false,
        providers: [
          {
            id: GoogleLoginProvider.PROVIDER_ID,
            provider: new GoogleLoginProvider(
              '你的Google Web端Client ID',
              {
                scopes: REQUIRED_GOOGLE_SCOPES
                // 可按需追加其他配置，比如prompt: 'select_account' 强制每次选择账号
              }
            )
          }
        ]
      } as SocialAuthServiceConfig,
    },
    { provide: MAT_DATE_LOCALE, useValue: 'fr-FR' }
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

• 前端传入的scope必须和GCP同意屏幕中配置的scope完全一致，未在GCP后台添加的scope传入后会直接报错，不会出现在同意弹窗里
• 如果测试账号之前已经授权过该应用的基础权限，新增scope后不会自动弹授权，需要先去Google账号的「第三方应用授权管理」页面删掉当前应用的授权记录，再重新触发登录流程，才能看到新的权限申请提示
• 生产环境发布前，如果请求的是敏感/受限scope，必须通过Google的OAuth审核流程，否则测试账号之外的用户登录时会看到「应用未验证」的风险提示，且对应权限不会正常授予
• 你代码里标注my secret key的位置配置错误：Google OAuth前端流程里只能使用公开的Web端Client ID，Client Secret是服务端接口调用用的密钥，绝对不能写在前端代码里，否则会有安全风险。

内容的提问来源于stack exchange，提问作者Arthur