原文：https://akveo.github.io/nebular/docs/auth/configuring-google-oauth2#strategy
認證策略
使用 NbOAuth2AuthStrategy 給予配置第三方認證提供者認證的可能性，像是 Google、Facebook 等。
不需要任何後端的實作像是 OAuth2 協定，實現完全無伺服器的認證流程作為選項之一。
這篇文章我們將以 Implicit flow 為基礎的 Google 認證 設定與配置 NbOAuth2AuthStrategy 。
第一步驟： 獲得金鑰
第一步驟我們需要設定一個應用程式並取得它在認證伺服器（我們的例子使用 Goolge 作為認證伺服器）上的金鑰。
更多細節可以參考 為您的專案啟用 Google API 網頁。
我們不會複製該篇文章在這邊，但一個結果您必須要有 client_id － 唯一應用程式識別碼。
Step 2. 啟用策略
下一步可以註冊 NbOAuth2AuthStrategy 到您的 app.module.ts :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
| @NgModule({
imports: [
NbAuthModule.forRoot({
strategies: [
NbOAuth2AuthStrategy.setup({
name: 'google',
}),
],
}),
],
})
export class YourModule {
}
|
我們匯入 NbAuthModule 並提供我們想用的策略。如果您已經有一些策略的設定，別擔心，您只要加入一個新的到 策略 陣列中。
我們將它命名為 google ，之後我們將使用這個暱稱來呼叫這個策略。
Step 3. 配置設定
讓我們填寫一些設定在我們的策略上。 我們加入從第一步驟中獲得的 client_id 。在這個認證流程我們不需要 client_secret ，所以我們留白。
然後我們設定 authorize endpoint、response_type （我們的例子是 token ）以及這個認證的 scope：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
| @NgModule({
imports: [
NbAuthModule.forRoot({
strategies: [
NbOAuth2AuthStrategy.setup({
name: 'google',
clientId: 'YOUR_CLIENT_ID',
clientSecret: '',
authorize: {
endpoint: 'https://accounts.google.com/o/oauth2/v2/auth',
responseType: NbOAuth2ResponseType.TOKEN,
scope: 'https://www.googleapis.com/auth/userinfo.profile',
},
}),
],
}),
],
})
export class YourModule {
}
|
Step 4. 路由
我至少須要兩個路由能夠組織 OAuth2 流程。第一個，登入路由，我們可以先簡單有一個按鈕以初始認證程序。第二個，callback 路由，我們需要處理 OAuth2 伺服器的回應。
讓我們加入這兩者到我們的路由並參考到一些空元件：
1
2
3
4
5
6
7
8
9
10
| RouterModule.forChild([
{
path: '',
component: NbOAuth2LoginComponent,
},
{
path: 'callback',
component: NbOAuth2CallbackComponent,
},
]),
|
Step 5. 重新導向 URI
最後一個配置是設定 redirect_uri 參數。確認您已經依據文件加入這個 URL 到 Google Console。
Now let’s complete the setup:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
| @NgModule({
imports: [
NbAuthModule.forRoot({
strategies: [
NbOAuth2AuthStrategy.setup({
name: 'google',
clientId: 'YOUR_CLIENT_ID',
clientSecret: '',
authorize: {
endpoint: 'https://accounts.google.com/o/oauth2/v2/auth',
responseType: NbOAuth2ResponseType.TOKEN,
scope: 'https://www.googleapis.com/auth/userinfo.profile',
redirectUri: 'http://localhost:4100/example/oauth2/callback',
},
}),
],
}),
],
})
export class YourModule {
}
|
Step 6. 完整您的元件
最後，我們加入程式碼到我們的元件以初始認證。首先是 NbOAuth2LoginComponent 元件：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
| @Component({
selector: 'nb-oauth2-login',
template: `
<button class="btn btn-success" *ngIf="!token" (click)="login()">Sign In with Google</button>
`,
})
export class NbOAuth2LoginComponent implements OnDestroy {
alive = true;
login() {
this.authService.authenticate('google')
.pipe(takeWhile(() => this.alive))
.subscribe((authResult: NbAuthResult) => {
});
}
ngOnDestroy(): void {
this.alive = false;
}
}
|
這程式碼非常簡單 - 我們呼叫 NbAuthService.authenticate 方法並傳入我們的策略暱稱 - google 以訂閱結果。
這將準備 授權 請求 url 並重新導向我們到 Google 認證伺服器。
現在，我們須要配置 “callback” URL 以能夠正確處理回應：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
| @Component({
selector: 'nb-playground-oauth2-callback',
template: `
<nb-layout>
<nb-layout-column>Authenticating...</nb-layout-column>
</nb-layout>
`,
})
export class NbOAuth2CallbackPlaygroundComponent implements OnDestroy {
alive = true;
constructor(private authService: NbAuthService, private router: Router) {
this.authService.authenticate('google')
.pipe(takeWhile(() => this.alive))
.subscribe((authResult: NbAuthResult) => {
if (authResult.isSuccess()) {
this.router.navigateByUrl('/pages/dashboard');
}
});
}
ngOnDestroy(): void {
this.alive = false;
}
}
|
這裡我們呼叫同一個 authenticate 方法，將決定我們處於 redirect 狀態，處理回應；儲存您的通行證並且重新導向您回到您的應用程式。
範例完成
完整的程式碼範例可以在 GitHub 上找到。
這裡有練習場可以使用 OAuth2 Nebular 範例 試玩看看。
相關文章