angular - 如何将动态 Facebook 和谷歌客户 ID 放在 angularx-social-login 上？

Question

我用过 angularx-social-login以 facebook 和 google 身份登录。但我的要求是:- 我已经通过 API 的响应获得了客户端 ID。使用这个包在 app.module.ts 上传递客户端 ID。像这样:-

import { SocialLoginModule, AuthServiceConfig } from "angularx-social-login";
import { GoogleLoginProvider, FacebookLoginProvider } from "angularx-social-login";

let config = new AuthServiceConfig([
 {
  id: GoogleLoginProvider.PROVIDER_ID,
  provider: new GoogleLoginProvider("Google-OAuth-Client-Id")
 },
 {
  id: FacebookLoginProvider.PROVIDER_ID,
  provider: new FacebookLoginProvider('Facebook-App-Client-Id')
 }
]);

export function provideConfig() {
  return config;
}

@NgModule({
  declarations: [
   AppComponent
  ],
  imports: [
    SocialLoginModule
  ],
  providers: [
  {
    provide: AuthServiceConfig,
    useFactory: provideConfig
  }
 ],
  entryComponents: [],
  bootstrap: []
})
export class AppModule { }

所以请告诉我如何传递客户端 ID 动态。使用 Api

Answer 1

以下是如何从服务器加载 clienId 的示例。

const socialConfigFactory = (restService: MyRestService) => {
    return restService.getClientConfig().pipe(map(config => {
        let providers = [];

        if (config.clientId.length > 0) {
            providers.push({
                id: GoogleLoginProvider.PROVIDER_ID,
                provider: new GoogleLoginProvider(
                    config.clientId
                ),
            });
        }

        return {
            autoLogin: false,
            providers: providers,
        } as SocialAuthServiceConfig;
    })).toPromise();
};

@NgModule({
    imports: [
        BrowserAnimationsModule,
        BrowserModule,
        CoreModule,
        SocialLoginModule,
        AppRoutingModule
    ],

    declarations: [
        AppComponent
    ],
    bootstrap: [AppComponent],
    providers: [
        {
            provide: 'SocialAuthServiceConfig',
            useFactory: socialConfigFactory,
            deps: [MyRestService]
        }
    ]
})
export class AppModule {
}

服务可能如下所示:

class ClientConfig {
    clientId: string;
}

@Injectable({providedIn: 'root'})
export class MyRestService {

    constructor(private http: HttpClient) {}
    /*
    * server returns { clientId: "client-id" }
    */
    getClientConfig() {
        return this.http.get<ClientConfig>(`${environment.apiUrl}/config/from-server`);
    }
}