單頁應(yīng)用架構(gòu)的Web應(yīng)用日益增多，這類應(yīng)用將整個應(yīng)用作為JavaScript加載到瀏覽器中，所有與服務(wù)器的交互都通過返回JSON文檔的基於HTTP的API進(jìn)行。這些應(yīng)用通常需要某種程度的用戶限制交互，例如存儲用戶個人資料詳細(xì)信息。在傳統(tǒng)的基於HTML的應(yīng)用中實(shí)現(xiàn)這一功能相對簡單，但在需要對每個API請求進(jìn)行身份驗(yàn)證的單頁應(yīng)用中，則更為棘手。

本文將演示一種使用Passport.js庫實(shí)現(xiàn)多種提供商的社交登錄，並由此實(shí)現(xiàn)後續(xù)API調(diào)用的基於令牌的身份驗(yàn)證的技術(shù)。

本文的所有源代碼均可從我們的GitHub存儲庫下載。

關(guān)鍵要點(diǎn)

• 使用Passport.js庫實(shí)現(xiàn)Google和Facebook的社交登錄，增強(qiáng)單頁應(yīng)用的用戶身份驗(yàn)證。
• 選擇JSON Web Tokens (JWT)進(jìn)行安全的基於令牌的API身份驗(yàn)證，避免基於會話和cookie的限制。
• 利用社交登錄功能：簡化的UI，無需存儲用戶憑據(jù)，以及跨站點(diǎn)密碼重置功能。
• 使用passport-google-oauth、passport-facebook和passport-jwt等特定模塊配置Passport，以管理身份驗(yàn)證和令牌生成。
• 使用passport-jwt模塊實(shí)現(xiàn)基於令牌的身份驗(yàn)證，通過驗(yàn)證Authorization標(biāo)頭中的JWT來保護(hù)API端點(diǎn)。
• 通過重定向模式和客戶端腳本處理社交登錄身份驗(yàn)證和令牌分發(fā)，簡化用戶體驗(yàn)。

為什麼在您的SPA中使用社交登錄？

在您的Web應(yīng)用中實(shí)現(xiàn)登錄機(jī)制時，需要考慮許多問題。

• 您的UI應(yīng)該如何處理身份驗(yàn)證本身？
• 您應(yīng)該如何存儲用戶信息？
• 您應(yīng)該如何最好地保護(hù)用戶憑據(jù)？

在開始編寫登錄門戶之前，需要考慮這些以及更多問題。但是，有一種更好的方法。

許多網(wǎng)站，主要是社交網(wǎng)絡(luò)，允許您使用它們的平臺來驗(yàn)證您自己的應(yīng)用。這是通過許多不同的API實(shí)現(xiàn)的——OAuth 1.0、OAuth 2.0、OpenID、OpenID Connect等。

通過使用這些社交登錄技術(shù)來實(shí)現(xiàn)您的登錄流程，可以提供許多優(yōu)勢。

• 您不再負(fù)責(zé)呈現(xiàn)用戶用來進(jìn)行身份驗(yàn)證的UI。
• 您不再負(fù)責(zé)存儲和保護(hù)敏感的用戶詳細(xì)信息。
• 用戶能夠使用單個登錄來訪問多個站點(diǎn)。
• 如果用戶覺得他們的密碼已被洩露，他們可以重置一次密碼，並在許多站點(diǎn)中受益。
• 通常，提供身份驗(yàn)證功能的服務(wù)將提供其他詳細(xì)信息。例如，這可以用於自動註冊從未使用過您網(wǎng)站的用戶，或者允許您代表他們發(fā)布更新到他們的個人資料。

為什麼對您的API使用基於令牌的身份驗(yàn)證？

每當(dāng)客戶端需要訪問您的API時，您都需要某種方法來確定它們是誰以及是否允許訪問。實(shí)現(xiàn)此目標(biāo)的方法有很多，但主要選項(xiàng)是：

• 基於會話的身份驗(yàn)證
• 基於cookie的身份驗(yàn)證
• 基於令牌的身份驗(yàn)證

基於會話的身份驗(yàn)證需要您的API服務(wù)能夠?qū)捙c客戶端關(guān)聯(lián)起來。這通常非常容易設(shè)置，但是如果您在多個服務(wù)器上部署您的API，則可能會出現(xiàn)問題。您也受服務(wù)器用於會話管理和過期的機(jī)制的限制，這可能不受您的控制。

基於cookie的方法是，您只需在cookie中存儲一些標(biāo)識符，這將用於自動識別API請求。這意味著您首先需要某種設(shè)置cookie的機(jī)制，並且您有可能會在後續(xù)請求中洩露它，因?yàn)閏ookie會自動包含在對同一主機(jī)的所有（合適的）請求中。

基於令牌的方法是基於cookie的身份驗(yàn)證的一種變體，但它可以讓您更多地控制。本質(zhì)上，您生成令牌的方式與基於cookie的身份驗(yàn)證系統(tǒng)相同，但是您將自己包含在請求中——通常在“Authorization”標(biāo)頭中或直接在URL中。這意味著您可以完全控制存儲令牌、哪些請求將包含它等等。

注意：即使HTTP標(biāo)頭稱為“Authorization”，我們實(shí)際上也在使用它進(jìn)行身份驗(yàn)證。這是因?yàn)槲覀冋谑褂盟鼇泶_定客戶端“是誰”，而不是客戶端“被允許做什麼”。

用於生成令牌的策略也很重要。這些令牌可以是引用令牌，這意味著它們只不過是服務(wù)器用來查找真實(shí)詳細(xì)信息的標(biāo)識符。或者完整的令牌，這意味著令牌已經(jīng)包含了所有必要的信息。

引用令牌具有顯著的安全優(yōu)勢，因?yàn)榻^對不會向客戶端洩露用戶憑據(jù)。但是，由於您需要在每次發(fā)出的請求中將令牌解析為實(shí)際憑據(jù)，因此會產(chǎn)生性能損失。

完整令牌則相反。它們會將用戶憑據(jù)暴露給任何能夠理解令牌的人，但是由於令牌是完整的，因此在查找它時不會產(chǎn)生性能損失。

通常，完整令牌將使用JSON Web Tokens標(biāo)準(zhǔn)來實(shí)現(xiàn)，因?yàn)樵摌?biāo)準(zhǔn)允許改進(jìn)令牌的安全性。具體來說，JWT允許對令牌進(jìn)行加密簽名，這意味著您可以保證令牌沒有被篡改。還規(guī)定可以對它們進(jìn)行加密，這意味著如果沒有加密密鑰，甚至無法解碼令牌。

如果您想回顧一下在Node中使用JWT，請查看我們的教程：使用JSON Web Tokens與Node.js。

使用完整令牌的另一個缺點(diǎn)是大小。例如，引用令牌可以使用UUID來實(shí)現(xiàn)，其長度為36個字符。相反，JWT很容易長達(dá)數(shù)百個字符。

在本文中，我們將使用JWT令牌來演示它們?nèi)绾喂ぷ鳌５?，?dāng)您自己實(shí)現(xiàn)此功能時，您需要決定是否要使用引用令牌或完整令牌，以及將為此使用什麼機(jī)制。

什麼是Passport？

Passport是Node.js的一組模塊，用於在您的Web應(yīng)用中實(shí)現(xiàn)身份驗(yàn)證。它可以非常輕鬆地插入許多基於Node的Web服務(wù)器，並使用模塊化結(jié)構(gòu)來實(shí)現(xiàn)您需要的登錄機(jī)制，而不會產(chǎn)生過多的膨脹。

Passport是一個功能強(qiáng)大的模塊套件，涵蓋了大量的身份驗(yàn)證需求。使用這些模塊，我們可以創(chuàng)建一個可插入的設(shè)置，允許為不同的端點(diǎn)提供不同的身份驗(yàn)證需求。所使用的身份驗(yàn)證系統(tǒng)可以像簡單地檢查URL中的特殊值一樣簡單，也可以像依賴第三方提供商來完成所有工作一樣複雜。

在本文中，我們將使用passport-google-oauth、passport-facebook和passport-jwt模塊，以便為API端點(diǎn)實(shí)現(xiàn)社交登錄和基於JWT令牌的身份驗(yàn)證。

passport-jwt模塊將用於要求某些端點(diǎn)——我們實(shí)際需要身份驗(yàn)證才能訪問的API端點(diǎn)——在請求中必須存在有效的JWT。 passport-google-oauth和passport-facebook模塊將用於提供分別針對Google和Facebook進(jìn)行身份驗(yàn)證的端點(diǎn)，然後生成可用於訪問應(yīng)用中其他端點(diǎn)的JWT。

為您的單頁應(yīng)用實(shí)現(xiàn)社交登錄

從這裡開始，我們將逐步介紹如何獲取一個簡單的單頁應(yīng)用並為其實(shí)現(xiàn)社交登錄。此應(yīng)用使用Express編寫，一個簡單的API提供一個安全端點(diǎn)和一個不安全端點(diǎn)。如果您想繼續(xù)操作，可以從https://github.com/sitepoint-editors/social-logins-spa檢出此應(yīng)用的源代碼?？梢酝ㄟ^在下載的源代碼中執(zhí)行npm install來構(gòu)建此應(yīng)用——下載所有依賴項(xiàng)——然後通過執(zhí)行node src/index.js來運(yùn)行。

為了成功使用該應(yīng)用，您需要在Google和Facebook註冊社交登錄憑據(jù)，並將憑據(jù)提供給該應(yīng)用。完整的說明可在演示應(yīng)用的README文件中找到。這些憑據(jù)作為環(huán)境變量訪問。因此，應(yīng)用可以按如下方式運(yùn)行：

# Linux / OS X
$ export GOOGLE_CLIENTID=myGoogleClientId
$ export GOOGLE_CLIENTSECRET=myGoogleClientSecret
$ export FACEBOOK_CLIENTID=myFacebookClientId
$ export FACEBOOK_CLIENTSECRET=myFacebookClientSecret
$ node src/index.js

# Windows
> set GOOGLE_CLIENTID=myGoogleClientId
> set GOOGLE_CLIENTSECRET=myGoogleClientSecret
> set FACEBOOK_CLIENTID=myFacebookClientId
> set FACEBOOK_CLIENTSECRET=myFacebookClientSecret
> node src/index.js

此過程的最終結(jié)果是將令牌身份驗(yàn)證支持（使用JSON Web Tokens）添加到我們的安全端點(diǎn)，然後添加社交登錄支持（使用Google和Facebook）以獲取令牌供應(yīng)用的其餘部分使用。這意味著您需要使用社交提供商進(jìn)行一次身份驗(yàn)證，然後使用生成的JWT進(jìn)行應(yīng)用中所有未來的API調(diào)用。

JWT對於我們的場景來說是一個特別好的選擇，因?yàn)樗鼈兪峭耆园?，同時仍然是安全的。 JWT由JSON有效負(fù)載和加密簽名組成。有效負(fù)載包含已認(rèn)證用戶的詳細(xì)信息、認(rèn)證系統(tǒng)和令牌的有效期。然後，簽名確保惡意第三方無法偽造它——只有擁有簽名密鑰的人才能生成令牌。

在閱讀本文時，您會經(jīng)常看到對作為應(yīng)用一部分包含的config.js模塊的引用。此模塊用於配置應(yīng)用，並使用Node-convict模塊進(jìn)行外部配置。本文中使用的配置如下：

• http.port – 應(yīng)用運(yùn)行的端口。默認(rèn)為3000，並使用“PORT”環(huán)境變量覆蓋。
• authentication.google.clientId – 用於Google身份驗(yàn)證的Google客戶端ID。這通過“GOOGLE_CLIENTID”環(huán)境變量提供給應(yīng)用。
• authentication.google.clientSecret – 用於Google身份驗(yàn)證的Google客戶端密鑰。這通過“GOOGLE_CLIENTSECRET”環(huán)境變量提供給應(yīng)用。
• authentication.facebook.clientId – 用於Facebook身份驗(yàn)證的Facebook客戶端ID。這通過“FACEBOOK_CLIENTID”環(huán)境變量提供給應(yīng)用。
• authentication.facebook.clientSecret – 用於Facebook身份驗(yàn)證的Facebook客戶端密鑰。這通過“FACEBOOK_CLIENTSECRET”環(huán)境變量提供給應(yīng)用。
• authentication.token.secret – 用於簽署我們身份驗(yàn)證令牌的JWT的密鑰。默認(rèn)為“mySuperSecretKey”。
• authentication.token.issuer – JWT中存儲的發(fā)行者。這表示哪個服務(wù)發(fā)出了令牌，在一種身份驗(yàn)證服務(wù)為許多應(yīng)用提供服務(wù)的情況下。
• authentication.token.audience – JWT中存儲的受眾。這表示令牌的目標(biāo)服務(wù)，在一種身份驗(yàn)證服務(wù)為許多應(yīng)用提供服務(wù)的情況下。

集成Passport

在您的應(yīng)用中使用Passport之前，需要進(jìn)行少量設(shè)置。這只不過是確保模塊已安裝，並在您的Express應(yīng)用中初始化中間件。

此階段所需的模塊是passport模塊，然後要設(shè)置中間件，我們只需將其添加到我們的Express應(yīng)用中即可。

// src/index.js
const passport = require('passport');
.....
app.use(passport.initialize());

如果您遵循Passport網(wǎng)站上的說明，則會讓您設(shè)置會話支持——通過使用passport.session()調(diào)用。我們在應(yīng)用中不使用任何會話支持，因此這是不必要的。這是因?yàn)槲覀冋趯?shí)現(xiàn)一個無狀態(tài)API，因此我們將對每個請求提供身份驗(yàn)證，而不是將其持久化到會話中。

為安全端點(diǎn)實(shí)現(xiàn)JWT令牌身份驗(yàn)證

使用Passport設(shè)置JWT令牌身份驗(yàn)證相對簡單。我們將使用passport-jwt模塊，它將為我們完成所有繁重的工作。此模塊查找值為“JWT ”開頭的“Authorization”標(biāo)頭，並將標(biāo)頭的其餘部分視為用於身份驗(yàn)證的JWT令牌。然後，它解碼JWT並將其中存儲的值提供給您自己的代碼進(jìn)行操作——例如，執(zhí)行用戶查找。如果JWT無效，例如簽名無效、令牌已過期……則請求將未經(jīng)身份驗(yàn)證，而無需您自己的代碼額外參與。

然後，配置JWT令牌身份驗(yàn)證的方法如下：

# Linux / OS X
$ export GOOGLE_CLIENTID=myGoogleClientId
$ export GOOGLE_CLIENTSECRET=myGoogleClientSecret
$ export FACEBOOK_CLIENTID=myFacebookClientId
$ export FACEBOOK_CLIENTSECRET=myFacebookClientSecret
$ node src/index.js

在上面，我們使用了一些內(nèi)部模塊：

• config.js – 包含我們整個應(yīng)用的配置屬性?？梢约僭O(shè)這些屬性已經(jīng)配置好，並且值可以隨時使用。
• users.js – 這是應(yīng)用的用戶存儲。這允許加載和創(chuàng)建用戶——在這裡，我們只是按其內(nèi)部ID加載用戶。

在這裡，我們使用已知的密鑰、發(fā)行者和受眾配置JWT解碼器，並且我們告知策略它應(yīng)該從Authorization標(biāo)頭獲取JWT。如果發(fā)行者或受眾中的任何一個與JWT中存儲的內(nèi)容不匹配，則身份驗(yàn)證將失敗。這為我們提供了另一層防偽造保護(hù)，儘管這是一個非常簡單的保護(hù)。

令牌解碼完全由passport-jwt模塊處理，我們只需要提供與最初用於生成令牌的配置相對應(yīng)的配置即可。因?yàn)镴WT是一個標(biāo)準(zhǔn)，所以任何遵循該標(biāo)準(zhǔn)的模塊都能完美地協(xié)同工作。

成功解碼令牌後，它將作為有效負(fù)載傳遞給我們的回調(diào)。在這裡，我們只是嘗試查找由令牌中的“主題”標(biāo)識的用戶。實(shí)際上，您可能會進(jìn)行額外的檢查，例如確保令牌未被吊銷。

如果找到用戶，我們將其提供給Passport，然後Passport將其提供給請求處理的其餘部分作為req.user。如果找不到用戶，則我們不向Passport提供任何用戶，然後Passport將認(rèn)為身份驗(yàn)證失敗。

這現(xiàn)在可以連接到請求處理程序，以便請求需要身份驗(yàn)證才能成功：

# Windows
> set GOOGLE_CLIENTID=myGoogleClientId
> set GOOGLE_CLIENTSECRET=myGoogleClientSecret
> set FACEBOOK_CLIENTID=myFacebookClientId
> set FACEBOOK_CLIENTSECRET=myFacebookClientSecret
> node src/index.js

上面第3行是使Passport處理請求的魔法。這會導(dǎo)致Passport在我們傳入的請求上運(yùn)行我們剛剛配置的“jwt”策略，並允許其繼續(xù)進(jìn)行或立即失敗。

我們可以通過運(yùn)行應(yīng)用——通過執(zhí)行node src/index.js——並嘗試訪問此資源來查看其運(yùn)行情況：

// src/index.js
const passport = require('passport');
.....
app.use(passport.initialize());

我們沒有提供任何Authorization標(biāo)頭，它不允許我們繼續(xù)進(jìn)行。但是，如果您提供有效的Authorization標(biāo)頭，您將獲得成功的響應(yīng)：

// src/authentication/jwt.js
const passport = require('passport');
const passportJwt = require('passport-jwt');
const config = require('../config');
const users = require('../users');

const jwtOptions = {
  // 從 "Authorization" 標(biāo)頭獲取 JWT。
  // 默認(rèn)情況下，這會查找 "JWT " 前綴
  jwtFromRequest: passportJwt.ExtractJwt.fromAuthHeader(),
  // 用于簽署 JWT 的密鑰
  secretOrKey: config.get('authentication.token.secret'),
  // JWT 中存儲的發(fā)行者
  issuer: config.get('authentication.token.issuer'),
  // JWT 中存儲的受眾
  audience: config.get('authentication.token.audience')
};

passport.use(new passportJwt.Strategy(jwtOptions, (payload, done) => {
  const user = users.getUserById(parseInt(payload.sub));
  if (user) {
      return done(null, user, payload);
  }
  return done();
}));

為了執(zhí)行此測試，我通過訪問https://www.jsonwebtoken.io並填寫那裡的表單手動生成了一個JWT。 “有效負(fù)載”是我使用的：

// src/index.js
app.get('/api/secure',
  // 此請求必須使用 JWT 進(jìn)行身份驗(yàn)證，否則我們將失敗
  passport.authenticate(['jwt'], { session: false }),
  (req, res) => {
    res.send('Secure response from ' + JSON.stringify(req.user));
  }
);

“簽名密鑰”是“mySuperSecretKey”，取自配置。

支持令牌生成

現(xiàn)在我們可以只使用有效令牌訪問資源了，我們需要一種實(shí)際生成令牌的方法。這是使用jsonwebtoken模塊完成的，它構(gòu)建了一個包含正確詳細(xì)信息並使用與上面相同的密鑰簽名的JWT。

# Linux / OS X
$ export GOOGLE_CLIENTID=myGoogleClientId
$ export GOOGLE_CLIENTSECRET=myGoogleClientSecret
$ export FACEBOOK_CLIENTID=myFacebookClientId
$ export FACEBOOK_CLIENTSECRET=myFacebookClientSecret
$ node src/index.js

請注意，我們在生成JWT時使用完全相同的受眾、發(fā)行者和密鑰配置設(shè)置。我們還指定JWT的有效期為一小時。這可以是您認(rèn)為對您的應(yīng)用來說合理的任何時間段，甚至可以從配置中提取，以便可以輕鬆更改。

在這種情況下，沒有指定JWT ID，但這可以用來為令牌生成一個完全唯一的ID——例如使用UUID。然後，這為您提供了一種吊銷令牌的方法，並在數(shù)據(jù)存儲中存儲吊銷ID的集合，並在處理Passport策略中的JWT時檢查JWT ID是否不在列表中。

社交登錄提供商

現(xiàn)在我們有能力生成令牌了，我們需要一種讓用戶實(shí)際登錄的方法。這就是社交登錄提供商發(fā)揮作用的地方。我們將添加一項(xiàng)功能，讓用戶重定向到社交登錄提供商，並在成功後生成JWT令牌並將其提供給瀏覽器的JavaScript引擎以供將來請求使用。我們已經(jīng)具備了幾乎所有這方面的組件，我們只需要將它們組合在一起即可。

Passport中的社交登錄提供商分為兩部分。首先，需要使用適當(dāng)?shù)牟寮?shí)際為社交登錄提供商配置Passport。其次，需要用戶被定向到的Express路由才能啟動身份驗(yàn)證，以及用戶在身份驗(yàn)證成功後被重定向到的路由。

我們將在新的子瀏覽器窗口中打開這些URL，我們可以在完成後關(guān)閉這些窗口，並且能夠調(diào)用打開它的窗口內(nèi)的JavaScript方法。這意味著該過程對於用戶來說相對透明——最多他們會看到一個新的窗口打開，要求他們提供憑據(jù)，但最好他們除了現(xiàn)在已登錄的事實(shí)外什麼也看不到。

此瀏覽器的方面需要由兩部分組成。彈出窗口的視圖以及在主窗口中處理此視圖的JavaScript。這可以很容易地與任何框架集成，但在此示例中，我們將為了簡單起見使用vanilla JavaScript。

主頁面JavaScript只需要類似這樣的內(nèi)容：

# Windows
> set GOOGLE_CLIENTID=myGoogleClientId
> set GOOGLE_CLIENTSECRET=myGoogleClientSecret
> set FACEBOOK_CLIENTID=myFacebookClientId
> set FACEBOOK_CLIENTSECRET=myFacebookClientSecret
> node src/index.js

這在窗口上註冊一個全局函數(shù)對象（名為authenticateCallback），它將存儲訪問令牌，然後打開我們的路由以啟動身份驗(yàn)證，我們正在訪問/api/authentication/{provider}/start。

然後，可以使用您希望啟動身份驗(yàn)證的任何方式觸發(fā)此函數(shù)。這通常是標(biāo)題區(qū)域中的登錄鏈接，但詳細(xì)信息完全取決於您的應(yīng)用。

第二部分是在成功身份驗(yàn)證後要呈現(xiàn)的視圖。在這種情況下，我們?yōu)榱撕唵纹鹨娛褂肕ustache，但這將使用對您來說最合適的任何視圖技術(shù)。

# Linux / OS X
$ export GOOGLE_CLIENTID=myGoogleClientId
$ export GOOGLE_CLIENTSECRET=myGoogleClientSecret
$ export FACEBOOK_CLIENTID=myFacebookClientId
$ export FACEBOOK_CLIENTSECRET=myFacebookClientSecret
$ node src/index.js

在這裡，我們只有一個簡單的JavaScript代碼，它在該窗口的打開程序（即主應(yīng)用窗口）上調(diào)用上面的authenticateCallback方法，然後我們關(guān)閉自己。

此時，JWT令牌將在主應(yīng)用窗口中可用，用於您想要的任何目的。

實(shí)現(xiàn)Google身份驗(yàn)證

使用passport-google-oauth模塊將針對Google進(jìn)行身份驗(yàn)證。這需要提供三條信息：

• 客戶端ID
• 客戶端密鑰
• 重定向URL

客戶端ID和密鑰是通過在Google開發(fā)者控制臺中註冊您的應(yīng)用獲得的。重定向URL是用戶在使用其Google憑據(jù)登錄後將被發(fā)送回您的應(yīng)用中的URL。這將取決於應(yīng)用的部署方式和位置，但現(xiàn)在我們將對其進(jìn)行硬編碼。

然後，我們的Google身份驗(yàn)證Passport配置將如下所示：

# Windows
> set GOOGLE_CLIENTID=myGoogleClientId
> set GOOGLE_CLIENTSECRET=myGoogleClientSecret
> set FACEBOOK_CLIENTID=myFacebookClientId
> set FACEBOOK_CLIENTSECRET=myFacebookClientSecret
> node src/index.js

當(dāng)用戶在成功身份驗(yàn)證後重定向回我們時，我們會得到他們在Google系統(tǒng)中的ID和一些個人資料信息。我們首先嘗試查看此用戶是否以前登錄過。如果是，那麼我們獲取他們的用戶記錄，我們就完成了。如果不是，我們將為他們註冊一個新帳戶，然後我們將使用這個新帳戶。這為我們提供了一種透明的機(jī)制，用戶註冊在第一次登錄時完成。如果需要，我們可以以不同的方式進(jìn)行此操作，但現(xiàn)在沒有必要。

接下來是設(shè)置路由處理程序以管理此登錄。這些將如下所示：

// src/index.js
const passport = require('passport');
.....
app.use(passport.initialize());

請注意/api/authentication/google/start和/api/authentication/gogle/redirect的路由。如上所述，/start變體是我們打開的URL，/redirect變體是Google在成功時將用戶重定向到的URL。然後，這將呈現(xiàn)我們上面顯示的已認(rèn)證視圖，提供生成的JWT供其使用。

實(shí)現(xiàn)Facebook身份驗(yàn)證

現(xiàn)在我們有了第一個社交登錄提供商，讓我們擴(kuò)展並添加第二個。這次將是Facebook，使用passport-facebook模塊。

此模塊的工作方式與Google模塊幾乎相同，需要相同的配置和相同的設(shè)置。唯一的真正區(qū)別在於它是不同的模塊，並且訪問它的URL結(jié)構(gòu)不同。

為了配置Facebook身份驗(yàn)證，您還需要客戶端ID、客戶端密鑰和重定向URL?？蛻舳薎D和客戶端密鑰（Facebook稱為應(yīng)用ID和應(yīng)用密鑰）可以通過在Facebook開發(fā)者控制臺中創(chuàng)建Facebook應(yīng)用獲得。您需要確保將“Facebook登錄”產(chǎn)品添加到您的應(yīng)用中才能使其正常工作。

我們的Facebook身份驗(yàn)證Passport配置將是：

// src/authentication/jwt.js
const passport = require('passport');
const passportJwt = require('passport-jwt');
const config = require('../config');
const users = require('../users');

const jwtOptions = {
  // 從 "Authorization" 標(biāo)頭獲取 JWT。
  // 默認(rèn)情況下，這會查找 "JWT " 前綴
  jwtFromRequest: passportJwt.ExtractJwt.fromAuthHeader(),
  // 用于簽署 JWT 的密鑰
  secretOrKey: config.get('authentication.token.secret'),
  // JWT 中存儲的發(fā)行者
  issuer: config.get('authentication.token.issuer'),
  // JWT 中存儲的受眾
  audience: config.get('authentication.token.audience')
};

passport.use(new passportJwt.Strategy(jwtOptions, (payload, done) => {
  const user = users.getUserById(parseInt(payload.sub));
  if (user) {
      return done(null, user, payload);
  }
  return done();
}));

這與Google的配置幾乎相同，只是使用了“facebook”而不是“google”。 URL路由也類似：

// src/index.js
app.get('/api/secure',
  // 此請求必須使用 JWT 進(jìn)行身份驗(yàn)證，否則我們將失敗
  passport.authenticate(['jwt'], { session: false }),
  (req, res) => {
    res.send('Secure response from ' + JSON.stringify(req.user));
  }
);

在這裡，我們不需要指定我們要使用的範(fàn)圍，因?yàn)槟J(rèn)集已經(jīng)足夠好。否則，Google和Facebook之間的配置幾乎相同。

總結(jié)

使用社交登錄提供商可以快速輕鬆地將用戶登錄和註冊添加到您的應(yīng)用中。事實(shí)上，這使用瀏覽器重定向?qū)⒂脩舭l(fā)送到社交登錄提供商，然後發(fā)送回您的應(yīng)用，這使得將其集成到單頁應(yīng)用中可能會很棘手，即使將其集成到更傳統(tǒng)的應(yīng)用中相對容易。

本文展示了一種將這些社交登錄提供商集成到單頁應(yīng)用中的方法，這種方法有望既易於使用，又易於擴(kuò)展到您可能希望使用的未來提供商。 Passport有很多模塊可以與不同的提供商一起工作，這只是找到合適的模塊並像我們上面對Google和Facebook所做的那樣對其進(jìn)行配置的問題。

本文由James Kolce進(jìn)行同行評審。感謝所有SitePoint的同行評審人員，使SitePoint內(nèi)容達(dá)到最佳狀態(tài)

關(guān)於社交登錄集成的常見問題解答 (FAQs)

將社交登錄集成到我的Web應(yīng)用中有哪些好處？

將社交登錄集成到您的Web應(yīng)用中可以帶來多項(xiàng)好處。首先，它簡化了用戶的註冊流程，因?yàn)樗麄兛梢允褂矛F(xiàn)有的社交媒體帳戶註冊，無需記住另一個用戶名和密碼。其次，它可以提高轉(zhuǎn)化率，因?yàn)楹喕脑]冊流程可以鼓勵更多用戶註冊。最後，它可以讓您訪問其社交媒體個人資料中的用戶數(shù)據(jù)，這些數(shù)據(jù)可用於個性化他們在您網(wǎng)站上的體驗(yàn)。

使用社交登錄時，如何確保用戶數(shù)據(jù)的安全？

在集成社交登錄時，確保用戶數(shù)據(jù)的安全至關(guān)重要。您可以通過使用安全的協(xié)議（如OAuth 2.0）進(jìn)行身份驗(yàn)證來實(shí)現(xiàn)這一點(diǎn)，這確保用戶密碼不會與您的應(yīng)用共享。此外，您應(yīng)該隻請求應(yīng)用所需的最小數(shù)量的用戶數(shù)據(jù)，並確保安全地存儲這些數(shù)據(jù)。

我可以在我的Web應(yīng)用中集成多個社交登錄嗎？

是的，您可以在您的Web應(yīng)用中集成多個社交登錄。這可以為用戶提供更多選擇，並增加他們註冊的可能性。但是，重要的是要確保無論用戶選擇使用哪個社交登錄，用戶體驗(yàn)都能保持無縫銜接。

如何處理擁有多個社交媒體帳戶的用戶？

處理擁有多個社交媒體帳戶的用戶可能具有挑戰(zhàn)性。一種解決方案是允許用戶將多個社交媒體帳戶鏈接到您的應(yīng)用上的單個帳戶。這樣，他們可以選擇使用任何已鏈接的帳戶登錄。

如果用戶停用其社交媒體帳戶會發(fā)生什麼？

如果用戶停用其社交媒體帳戶，他們將無法再使用該帳戶登錄您的應(yīng)用。為了處理這種情況，您可以為用戶提供添加電子郵件地址或電話號碼到其帳戶的選項(xiàng)，如果他們停用其社交媒體帳戶，則可以使用這些信息登錄。

如何自定義社交登錄按鈕的外觀？

可以使用CSS自定義社交登錄按鈕的外觀。但是，務(wù)必遵守社交媒體平臺提供的品牌指南。例如，F(xiàn)acebook的“f”徽標(biāo)應(yīng)始終以其原始形式使用，並且不應(yīng)以任何方式修改。

我可以將社交登錄用於移動應(yīng)用嗎？

是的，社交登錄可用於Web和移動應(yīng)用。在移動應(yīng)用中集成社交登錄的過程與Web應(yīng)用類似，但您可能需要使用社交媒體平臺提供的特定SDK。

如何測試社交登錄功能？

您可以通過在社交媒體平臺上創(chuàng)建測試帳戶並使用這些帳戶登錄您的應(yīng)用來測試社交登錄功能。這可以幫助您在應(yīng)用啟動之前識別任何問題或錯誤。

如果用戶忘記使用哪個社交媒體帳戶註冊，我該怎麼辦？

如果用戶忘記使用哪個社交媒體帳戶註冊，您可以提供一個恢復(fù)選項(xiàng)，讓他們可以輸入其電子郵件地址或電話號碼以接收與其帳戶鏈接的社交媒體帳戶列表。

我可以在不進(jìn)行編碼的情況下集成社交登錄嗎？

雖然可以使用某些工具和插件在不進(jìn)行編碼的情況下集成社交登錄，但了解一些編碼知識會很有益。這可以為您提供更多靈活性和對集成過程的控制，還可以幫助您解決可能出現(xiàn)的任何問題。

以上是您的水療中心的社交登錄：通過Google和Facebook來驗(yàn)證您的用戶的詳細(xì)內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！