成人+免费+欧美,欧美三级a做爰在线观看,久久久久久一区国产精品

集成Passport

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

支持令牌生成

社交登錄提供商

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

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

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

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

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

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

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

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

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

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

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

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

首頁(yè)

web前端

js教程

您的水療中心的社交登錄：通過(guò)Google和Facebook來(lái)驗(yàn)證您的用戶

Joseph Gordon-Levitt

Feb 16, 2025 am 10:14 AM

Social Login for Your SPA: Authenticate Your Users via Google and Facebook

單頁(yè)應(yīng)用架構(gòu)的Web應(yīng)用日益增多，這類應(yīng)用將整個(gè)應(yīng)用作為JavaScript加載到瀏覽器中，所有與服務(wù)器的交互都通過(guò)返回JSON文檔的基于HTTP的API進(jìn)行。這些應(yīng)用通常需要某種程度的用戶限制交互，例如存儲(chǔ)用戶個(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)用的用戶身份驗(yàn)證。
選擇JSON Web Tokens (JWT)進(jìn)行安全的基于令牌的API身份驗(yàn)證，避免基于會(huì)話和cookie的限制。
利用社交登錄功能：簡(jiǎn)化的UI，無(wú)需存儲(chǔ)用戶憑據(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ò)重定向模式和客戶端腳本處理社交登錄身份驗(yàn)證和令牌分發(fā)，簡(jiǎn)化用戶體驗(yàn)。

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

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

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

在開(kāi)始編寫(xiě)登錄門(mén)戶之前，需要考慮這些以及更多問(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)用戶用來(lái)進(jìn)行身份驗(yàn)證的UI。
您不再負(fù)責(zé)存儲(chǔ)和保護(hù)敏感的用戶詳細(xì)信息。
用戶能夠使用單個(gè)登錄來(lái)訪問(wèn)多個(gè)站點(diǎn)。
如果用戶覺(jué)得他們的密碼已被泄露，他們可以重置一次密碼，并在許多站點(diǎn)中受益。
通常，提供身份驗(yàn)證功能的服務(wù)將提供其他詳細(xì)信息。例如，這可以用于自動(dòng)注冊(cè)從未使用過(guò)您網(wǎng)站的用戶，或者允許您代表他們發(fā)布更新到他們的個(gè)人資料。

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

每當(dāng)客戶端需要訪問(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ì)話與客戶端關(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)頭稱為“Authorization”，我們實(shí)際上也在使用它進(jìn)行身份驗(yàn)證。這是因?yàn)槲覀冋谑褂盟鼇?lái)確定客戶端“是誰(shuí)”，而不是客戶端“被允許做什么”。

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

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

完整令牌則相反。它們會(huì)將用戶憑據(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)完成所有工作一樣復(fù)雜。

在本文中，我們將使用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)用——下載所有依賴項(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)證用戶的詳細(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客戶端ID。這通過(guò)“GOOGLE_CLIENTID”環(huán)境變量提供給應(yīng)用。
authentication.google.clientSecret – 用于Google身份驗(yàn)證的Google客戶端密鑰。這通過(guò)“GOOGLE_CLIENTSECRET”環(huán)境變量提供給應(yīng)用。
authentication.facebook.clientId – 用于Facebook身份驗(yàn)證的Facebook客戶端ID。這通過(guò)“FACEBOOK_CLIENTID”環(huán)境變量提供給應(yīng)用。
authentication.facebook.clientSecret – 用于Facebook身份驗(yàn)證的Facebook客戶端密鑰。這通過(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í)行用戶查找。如果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)用的配置屬性。可以假設(shè)這些屬性已經(jīng)配置好，并且值可以隨時(shí)使用。
users.js – 這是應(yīng)用的用戶存儲(chǔ)。這允許加載和創(chuàng)建用戶——在這里，我們只是按其內(nèi)部ID加載用戶。

在這里，我們使用已知的密鑰、發(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í)的用戶。實(shí)際上，您可能會(huì)進(jìn)行額外的檢查，例如確保令牌未被吊銷。

如果找到用戶，我們將其提供給Passport，然后Passport將其提供給請(qǐng)求處理的其余部分作為req.user。如果找不到用戶，則我們不向Passport提供任何用戶，然后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。然后，這為您提供了一種吊銷令牌的方法，并在數(shù)據(jù)存儲(chǔ)中存儲(chǔ)吊銷ID的集合，并在處理Passport策略中的JWT時(shí)檢查JWT ID是否不在列表中。

社交登錄提供商

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

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

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

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

主頁(yè)面JavaScript只需要類似這樣的內(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)證。這需要提供三條信息：

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

客戶端ID和密鑰是通過(guò)在Google開(kāi)發(fā)者控制臺(tái)中注冊(cè)您的應(yīng)用獲得的。重定向URL是用戶在使用其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)用戶在成功身份驗(yàn)證后重定向回我們時(shí)，我們會(huì)得到他們?cè)贕oogle系統(tǒng)中的ID和一些個(gè)人資料信息。我們首先嘗試查看此用戶是否以前登錄過(guò)。如果是，那么我們獲取他們的用戶記錄，我們就完成了。如果不是，我們將為他們注冊(cè)一個(gè)新帳戶，然后我們將使用這個(gè)新帳戶。這為我們提供了一種透明的機(jī)制，用戶注冊(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í)將用戶重定向到的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)證，您還需要客戶端ID、客戶端密鑰和重定向URL?？蛻舳薎D和客戶端密鑰（Facebook稱為應(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路由也類似：

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

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

總結(jié)

使用社交登錄提供商可以快速輕松地將用戶登錄和注冊(cè)添加到您的應(yīng)用中。事實(shí)上，這使用瀏覽器重定向?qū)⒂脩舭l(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)化了用戶的注冊(cè)流程，因?yàn)樗麄兛梢允褂矛F(xiàn)有的社交媒體帳戶注冊(cè)，無(wú)需記住另一個(gè)用戶名和密碼。其次，它可以提高轉(zhuǎn)化率，因?yàn)楹?jiǎn)化的注冊(cè)流程可以鼓勵(lì)更多用戶注冊(cè)。最后，它可以讓您訪問(wèn)其社交媒體個(gè)人資料中的用戶數(shù)據(jù)，這些數(shù)據(jù)可用于個(gè)性化他們?cè)谀W(wǎng)站上的體驗(yàn)。

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

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