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

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

本文的所有源代碼均可從我們的GitHub存儲(chǔ)庫(kù)下載。

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

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

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

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

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

在開(kāi)始編寫(xiě)登錄門(mén)戶(hù)之前，需要考慮這些以及更多問(wèn)題。但是，有一種更好的方法。

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

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

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

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

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

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

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

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

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

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

用於生成令牌的策略也很重要。這些令牌可以是引用令牌，這意味著它們只不過(guò)是服務(wù)器用來(lái)查找真實(shí)詳細(xì)信息的標(biāo)識(shí)符?；蛘咄暾牧钆疲@意味著令牌已經(jīng)包含了所有必要的信息。

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

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

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

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

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

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

什麼是Passport？

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

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

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

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

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

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

為了成功使用該應(yīng)用，您需要在Google和Facebook註冊(cè)社交登錄憑據(jù)，並將憑據(jù)提供給該應(yīng)用。完整的說(shuō)明可在演示應(yīng)用的README文件中找到。這些憑據(jù)作為環(huán)境變量訪問(wè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

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

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

在閱讀本文時(shí)，您會(huì)經(jīng)常看到對(duì)作為應(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客戶(hù)端ID。這通過(guò)“GOOGLE_CLIENTID”環(huán)境變量提供給應(yīng)用。
• authentication.google.clientSecret – 用於Google身份驗(yàn)證的Google客戶(hù)端密鑰。這通過(guò)“GOOGLE_CLIENTSECRET”環(huán)境變量提供給應(yīng)用。
• authentication.facebook.clientId – 用於Facebook身份驗(yàn)證的Facebook客戶(hù)端ID。這通過(guò)“FACEBOOK_CLIENTID”環(huán)境變量提供給應(yīng)用。
• authentication.facebook.clientSecret – 用於Facebook身份驗(yàn)證的Facebook客戶(hù)端密鑰。這通過(guò)“FACEBOOK_CLIENTSECRET”環(huán)境變量提供給應(yīng)用。
• authentication.token.secret – 用於簽署我們身份驗(yàn)證令牌的JWT的密鑰。默認(rèn)為“mySuperSecretKey”。
• authentication.token.issuer – JWT中存儲(chǔ)的發(fā)行者。這表示哪個(gè)服務(wù)發(fā)出了令牌，在一種身份驗(yàn)證服務(wù)為許多應(yīng)用提供服務(wù)的情況下。
• authentication.token.audience – JWT中存儲(chǔ)的受眾。這表示令牌的目標(biāo)服務(wù)，在一種身份驗(yàn)證服務(wù)為許多應(yīng)用提供服務(wù)的情況下。

集成Passport

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

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

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

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

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

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

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

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

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

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

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

這現(xiàn)在可以連接到請(qǐng)求處理程序，以便請(qǐng)求需要身份驗(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處理請(qǐng)求的魔法。這會(huì)導(dǎo)致Passport在我們傳入的請(qǐng)求上運(yùn)行我們剛剛配置的“jwt”策略，並允許其繼續(xù)進(jìn)行或立即失敗。

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

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

我們沒(méi)有提供任何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)情況下，這會(huì)查找 "JWT " 前綴
  jwtFromRequest: passportJwt.ExtractJwt.fromAuthHeader(),
  // 用于簽署 JWT 的密鑰
  secretOrKey: config.get('authentication.token.secret'),
  // JWT 中存儲(chǔ)的發(fā)行者
  issuer: config.get('authentication.token.issuer'),
  // JWT 中存儲(chǔ)的受眾
  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í)行此測(cè)試，我通過(guò)訪問(wèn)https://www.jsonwebtoken.io並填寫(xiě)那裡的表單手動(dòng)生成了一個(gè)JWT。 “有效負(fù)載”是我使用的：

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

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

支持令牌生成

現(xiàn)在我們可以只使用有效令牌訪問(wèn)資源了，我們需要一種實(shí)際生成令牌的方法。這是使用jsonwebtoken模塊完成的，它構(gòu)建了一個(gè)包含正確詳細(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

請(qǐng)注意，我們?cè)谏蒍WT時(shí)使用完全相同的受眾、發(fā)行者和密鑰配置設(shè)置。我們還指定JWT的有效期為一小時(shí)。這可以是您認(rèn)為對(duì)您的應(yīng)用來(lái)說(shuō)合理的任何時(shí)間段，甚至可以從配置中提取，以便可以輕鬆更改。

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

社交登錄提供商

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

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

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

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

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

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

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

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

第二部分是在成功身份驗(yàn)證後要呈現(xiàn)的視圖。在這種情況下，我們?yōu)榱撕?jiǎn)單起見(jiàn)使用Mustache，但這將使用對(duì)您來(lái)說(shuō)最合適的任何視圖技術(shù)。

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

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

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

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

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

• 客戶(hù)端ID
• 客戶(hù)端密鑰
• 重定向URL

客戶(hù)端ID和密鑰是通過(guò)在Google開(kāi)發(fā)者控制臺(tái)中註冊(cè)您的應(yīng)用獲得的。重定向URL是用戶(hù)在使用其Google憑據(jù)登錄後將被發(fā)送回您的應(yīng)用中的URL。這將取決於應(yīng)用的部署方式和位置，但現(xiàn)在我們將對(duì)其進(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)用戶(hù)在成功身份驗(yàn)證後重定向回我們時(shí)，我們會(huì)得到他們?cè)贕oogle系統(tǒng)中的ID和一些個(gè)人資料信息。我們首先嘗試查看此用戶(hù)是否以前登錄過(guò)。如果是，那麼我們獲取他們的用戶(hù)記錄，我們就完成了。如果不是，我們將為他們?cè)]冊(cè)一個(gè)新帳戶(hù)，然後我們將使用這個(gè)新帳戶(hù)。這為我們提供了一種透明的機(jī)制，用戶(hù)註冊(cè)在第一次登錄時(shí)完成。如果需要，我們可以以不同的方式進(jìn)行此操作，但現(xiàn)在沒(méi)有必要。

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

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

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

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

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

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

為了配置Facebook身份驗(yàn)證，您還需要客戶(hù)端ID、客戶(hù)端密鑰和重定向URL?？蛻?hù)端ID和客戶(hù)端密鑰（Facebook稱(chēng)為應(yīng)用ID和應(yīng)用密鑰）可以通過(guò)在Facebook開(kāi)發(fā)者控制臺(tái)中創(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)情況下，這會(huì)查找 "JWT " 前綴
  jwtFromRequest: passportJwt.ExtractJwt.fromAuthHeader(),
  // 用于簽署 JWT 的密鑰
  secretOrKey: config.get('authentication.token.secret'),
  // JWT 中存儲(chǔ)的發(fā)行者
  issuer: config.get('authentication.token.issuer'),
  // JWT 中存儲(chǔ)的受眾
  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路由也類(lèi)似：

// src/index.js
app.get('/api/secure',
  // 此請(qǐng)求必須使用 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é)

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

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

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

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

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

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

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

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

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

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

如何處理?yè)碛卸鄠€(gè)社交媒體帳戶(hù)的用戶(hù)？

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

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

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

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

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

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

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

如何測(cè)試社交登錄功能？

您可以通過(guò)在社交媒體平臺(tái)上創(chuàng)建測(cè)試帳戶(hù)並使用這些帳戶(hù)登錄您的應(yīng)用來(lái)測(cè)試社交登錄功能。這可以幫助您在應(yīng)用啟動(dòng)之前識(shí)別任何問(wèn)題或錯(cuò)誤。

如果用戶(hù)忘記使用哪個(gè)社交媒體帳戶(hù)註冊(cè)，我該怎麼辦？

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

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

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

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