如何将动态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 动态。使用接口

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`);
    }
}

Answer 2

我还没有尝试过这个，但它应该可以工作

// define your social login details
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')
 }
]);

constructor(private authService: AuthService) { 
    this.authService(this.config); // pass your social details directly here
}