哈囉大家好！
昨天簡單介紹完OAuth，今天要來分享實作的程式碼！

1. 設置環境變數

透過指令ng g environments environments建立environments檔案，
另外建立一個environments.d.ts檔定義environments的格式：

export interface Environment {
  production: boolean;
  googleOAuthClientId: string;
}

並且在檔案中定義在google cloud console中申請憑證時拿到的Client ID:

import { Environment } from './environment.model';

export const environment: Environment = {
  production: false,
  googleOAuthClientId:
    '此處替換成建立憑證時拿到的Client ID',
};

註：此處因為Client ID是公開的，所以可以寫在前端檔案裡面。像Client Secret就必須放在後端，由後端呼叫OAuth Provider來交換Token，因為任何打包在前端的內容使用者都看得到！

2. 匯入模組

首先安裝好套件angularx-social-login後，在app.module.ts檔中匯入模組：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { LoginComponent } from './components/login/login.component';
import {
  GoogleLoginProvider,
  SocialAuthServiceConfig,
  SocialLoginModule,
} from 'angularx-social-login';
import { environment } from './environments/environment.development';

@NgModule({
  declarations: [AppComponent, LoginComponent],
  imports: [BrowserModule, AppRoutingModule, SocialLoginModule], // 匯入模組
  providers: [ // 設置OAuth Provider
    {
      provide: 'SocialAuthServiceConfig',
      useValue: {
        autoLogin: false,
        lang: 'en',
        providers: [
          {
            id: GoogleLoginProvider.PROVIDER_ID,
            // 此處會用到在environments檔裡的Client ID
            provider: new GoogleLoginProvider(environment.googleOAuthClientId),
          },
        ],
        onError: (err) => {
          console.error(err);
        },
      } as SocialAuthServiceConfig,
    },
  ],
  bootstrap: [AppComponent],
})
export class AppModule {}