转载

使用 Bluemix 单点登录服务实现社交网络登录

本教程将向您展示如何启用您的 IBM Bluemix 应用程序来接受用户身份验证，这些用户身份来自流行的社会身份来源，比如 Facebook、Google +、LinkedIn 和使用 Bluemix 单点登录 (SSO) 服务定制的联合身份。Bluemix SSO 服务使用简单的基于策略的配置，提供了将用户身份验证快速添加到 Bluemix 应用程序中的必要机制。

“ 在完成本教程之后，您应该能够将SSO 服务添加到您的 IBM Bluemix 应用程序并进行设置，根据您的需要和用户需求来启用身份来源。 ”

运行应用程序

获取代码

构建您的应用程序需要做的准备工作

用户前提条件

您需要对以下方面有基本的了解：

HTML 和 JavaScript 编码
Node.js 编程

您还需要：

一个 IBM ID
一个 Bluemix 帐户

您还需要有您想要访问的社交网络的帐户，用于进行身份验证。如果您没有这些，可以通过访问各个网站来注册和创建帐户。

软件前提条件

要创建在本教程中描述的 SSO 身份验证方案，必须安装和设置以下软件：

Java 7 Execution Environment
Eclipse Luna for Java EE Developers (4.4.1)
IBM Eclipse Tools for Bluemix
Node.js

本教程中使用的操作系统是 Windows 7，如果您使用的是 Mac 或 Linux 系统，本教程中的图形与和您使用的图形用户界面中的图形之间可能有所不同。除了每个平台的安装过程明显不同，这些图形之间的差异并不明显。

步骤 1. 创建一个 Node.js Bluemix 应用程序

首先，创建一个基本的 Node.js Bluemix 应用程序，如下所示：

打开 Eclipse 并创建一个新的 JavaScript Project： File > New > Project...
在 New Project 窗口中，在 Wizards: input 字段中输入 javascript 来过滤结果。
选择 JavaScript Project 并单击 Next 。
输入一个项目名称并单击 Finish 。如果系统询问您是否想要打开此透视图，请单击 Yes 。
右键单击项目的标题并选择 Properties 。
选择 <projectName> 窗口的 Properties 的左栏中的 Project Facets ，然后单击右边的 Convert to faceted form... 。
选中 Node.js Application 并单击 OK 。

项目的结构已发生更改。该项目现在包含 JavaScript 资源、app.js 文件和 package.json 文件。

现在，您已经创建了 Node.js 项目，是时候将应用程序部署到 Bluemix 了。

步骤 2. 定义一个新服务器

如果 Servers 选项卡不可见，请单击 Window > Show view > Other... 。然后选择 Servers 并单击 OK 。
右键单击空白区域并单击 New > Server 。
在 IBM 下，选择 IBM Bluemix 。
单击 Next 。
输入您的 Bluemix 帐户信息。
单击 Next 。
选择您的 Organizations and Spaces 。默认值是 dev 。
单击 Next 。
单击 Finish 。

步骤 3. 部署应用程序

单击 Servers 选项卡并右键单击已启动的 Bluemix 服务器。选择 Add and Remove 。
选择位于左边的您的项目并单击 Add 。
单击 Finish 。Application Details 窗口将会打开。
为应用程序命名，然后单击 Next 。
默认情况下，Launch Deployment 信息已被设置。单击 Finish 。

如果想在将应用程序推送到 Bluemix 后查看正在运行的应用程序，请右键单击相同服务器中的项目，然后单击 Open Home Page 。一个浏览器选项卡将会打开，其中显示了正在运行的应用程序以及消息 Generated Node.js application that runs on IBM Bluemix 。在打开主页后，您可以在 Web 浏览器选项卡的地址栏中看到您的应用程序的 URL 地址。

此时，应用程序已完成部署并正在 Bluemix 上运行。现在，您将创建和设置单点登录服务，并将它绑定到应用程序。

步骤 4. 创建单点登录服务

登录到 Bluemix 。
找到 Services 并单击 ADD A SERVICE 。
找到 Security 目录并单击 Single Sign-On 。您可以在 search input 字段中输入服务的名称来过滤结果。
在 App 字段中，单击 Leave unbound 来只创建服务。
服务的默认名称会显示在 service 字段中。您可以使用该默认名称或更改它。
选择 Standard plan 并单击 CREATE 。
在创建服务后，您被重定向到一个 Welcome 屏幕，在该屏幕中，您必须为服务提供一个名称。提供一个名称并单击 Continue 。

接下来，您会看到 Single Sign On 设置页面，在该页面上，您以选择一个提供商并添加一个或多个可用的身份来源，比如 SAML Enterprise、Cloud Directory 或一些流行的社会身份来源（比如 LinkedIn、Facebook 或 Google+）。

步骤 5. 配置单点登录服务

在这个过程中，您将配置 Cloud Directory、LinkedIn、Facebook 和 Google+ 身份来源。

添加一个 Cloud Directory 身份来源

Cloud Directory 身份来源使用了一个托管在云中的注册表。Cloud Directory 托管了身份来源的密码策略和用户信息。

在用户访问某个应用程序之前，必须将他们添加到 Cloud Directory 的注册表中。您需要使用用户的信息来填充该注册表。您还可以配置在用户登录应用程序时使用的密码策略。

在 Add New Identity Source 菜单上，单击 Cloud Directory 。
身份来源的默认名称将会显示。您可以使用该默认名称或更改它。单击 Save 。
您会返回到 Single Sign On 设置页面。您会看到，默认情况下，Cloud Directory 身份来源已被启用。
单击列表中的身份来源的名称来选中它。
通过单击加号 ( ) 添加一个新用户。为用户填充 information 字段。要验证、删除或禁用某个用户，请选择该用户，然后单击与您想要执行的操作对应的图标。
单击 Save 将用户添加到云目录中。您会在已注册用户的列表中看到前面步骤中提供的信息。
通过单击设置按钮 ( ) 来验证设置配置。审核 Auto Consent 设置。当 Auto Consent 被设置为 On 时，应用程序无需经过用户同意就可以检索用户的身份信息。
单击 Save 来保存 Auto Consent 设置。

SSO 服务已准备好绑定和用于应用程序。不过，在测试它之前，应该先完成剩余的身份来源。

添加 LinkedIn 作为一个社会身份来源

在 Add New Identity Source 页面上，单击 LinkedIn 。
身份来源的默认名称将会显示。使用该默认名称或替换它。
在 "Step 1" 下，选择 Click here 转到 LinkedIn Developer 站点。
点击查看大图

关闭 [x]
一个新的选项卡将会在您的 Web 浏览器中打开，并将您带到 LinkedIn Secure Developer 页面。进行登录（如果您已经注册）。在登录后，单击 + Add New Application 。
填充必须要填的字段并在 OAuth User Agreement 部分找到 "OAuth 2.0 Redirect URLs"。
返回到 Bluemix 页面。
在 Configured Identity Source 中，将 OAuth Redirect URI 复制到您的系统仪表板。
返回到 LinkedIn Secure Developer 页面，并将 OAuth Redirect URI 粘贴到 OAuth 2.0 Redirect URLs 字段中。
在填充了必填字段之后，同意服务条款并单击 Add Application 。
API Key 和 Secret Key 的位置将会显示。复制 API Key 和 Secret Key 。
返回到 Bluemix 页面并将 API Key 和 Secret Key 粘贴到 Configure Identity Source LinkedIn 设置页面的 "Step 2" 下的相应字段中。
单击 Bluemix 页面中的 Save 来保存 LinkedIn 身份来源配置。
返回到 LinkedIn Secure Developer 页面并单击 Done 。

添加 Facebook 作为一个社会身份来源

添加 Facebook 的过程非常类似于添加 LinkedIn 的过程。

在 Add New Identity Source 页面上，单击 Facebook 。
身份来源的默认名称将会显示。您可以使用默认名称或更改它。
在 "Step 1" 下，选择 Click here 来转到 Facebook Developer 站点。
一个新的选项卡会出现在您的 Web 浏览器中，并将您带到 Facebook Developer 页面。进行登录（如果您已注册）。
找到命名为 My Apps 的菜单并选择子菜单 Add a New App 。
选择 Website 。
输入您的应用程序的名称并单击 Create New Facebook App ID 。
如果系统询问您这是否是另一个应用程序的测试版，请单击 NO 。
选择一个 Category 并单击 Create App ID 。
在 Quick Start 页面显示后，完成 Site URL 和 Mobile Site URL 字段。您可以将第二个字段留白，或者对两个字段使用相同的值。单击 Next 。
转到 My Apps 菜单并选择您最近创建的应用程序。
选择 Settings 菜单，它位于页面的左边。
在 Contact Email 字段中输入一个电子邮件地址并单击 Save Changes 。
选择 Advanced 选项卡。
在 Bluemix 的 Configured Identity Source Facebook 页面中，复制 OAuth Redirect URI 。
将 OAuth Redirect URI 粘贴到 Valid OAuth redirect URIs 字段中，该字段位于 Facebook Developer 页面的底部。
单击 Save Changes 。如有必要，请完成必填字段的剩余部分。
返回到 Facebook 中的 Basic 选项卡。复制 App ID 和 App Secret 。（要查看 App Secret ，请单击 Show 。如有必要，请重新输入您的 Facebook 密码。）
在 Bluemix 中的 Configure Identity Source Facebook 页面上，粘贴 App ID 和 App Secret 。
单击 Bluemix 页面上的 Save 来保存更改。
返回到 Facebook Developer 页面并选择 Status & Review 菜单，该菜单位于页面的左边。
在 Status 选项卡中，单击 NO 按钮，让应用程序可提供给公众。
点击查看大图

关闭 [x]
单击 Confirm 。

Facebook SSO 服务现在已经准备就绪，可供使用。

添加 Google+ 作为一个社会身份来源

在 Add New Identity Source 页面上，单击 Google+ 。
身份来源的默认名称将会显示。您可以使用该默认名称或替换它。
在 "Step 1" 下，选择 Click here 转到 Google Developer 站点。
一个新的选项卡会在你的 Web 浏览器中打开，带您来到 Google 页面。进行登录（如果您已经注册）。
单击 Create Project 。
一个 Project Name 会出现。使用您项目的名称替换它。
一个 Project ID 会出现。您可以使用该默认名称或替换它。
单击 Create 。
在创建项目后，其仪表板会出现。在仪表板的左边，选择 APIs & auth 。
单击 Credentials 子菜单，然后单击 Create new Client ID 。
选择 Web application 类型并单击 Configure consent screen 。
在 Consent 屏幕上，输入一个 Product Name。剩余字段可以有选择地填写。
单击 Save 来保存产品名称。一个弹出窗口会出现。确保 Web Application 被选中。
在 AUTHORIZED JAVASCRIPT ORIGINS 字段中，输入您的 Bluemix 应用程序的 URL 路径。
返回到 Bluemix 中的 Google Identity Source 页面。复制 "Step 1" 下的 OAuth Redirect URI 。
粘贴 Google Developer 页面中的 AUTHORIZED REDIRECT URIS 字段中的 OAuth Redirect URI 。
确保您之前输入的值是正确的。页面看起来如下所示。如果一切正常，请单击 Create Client ID 。
Web 应用程序的详细信息将会限制。复制 Client ID 和 Client Secret 。
将 Client ID 和 Client Secret 粘贴到 Bluemix 中的 Configured Identity Source Google+ 页面的 Step 2 面板中。
单击 Save 。

您已经完成了对 SSO 服务的设置。下一步是将应用程序绑定到服务。

步骤 6. 将 SSO 服务绑定到应用程序

登录到 IBM Bluemix 并选择之前创建的应用程序。
在应用程序的 Overview 屏幕中，单击 BIND A SERVICE OR API 。
从列表中选择 SSO 服务并单击 ADD 。
单击 RESTAGE 。
该服务被添加到 Overview 屏幕作为一个较大的按钮。单击该按钮选定此服务。
包含之前配置的身份来源的 SSO 设置页面将会显示。单击 INTEGRATE 选项卡。
输入 Callback URL，您将在这里使用身份验证令牌和检索用户个人资料。建议使用的模式是：在您的应用程序的 URL 的使用一个路径，比如 /auth/sso/callback 。例如，完整的 URL 应如下所示： http://appname.mybluemix.net/auth/sso/callback
输入应用程序的显示名称。
检查您想在您的应用程序中使用身份来源。
单击 Save 。
应用程序现在已经被绑定到服务。但是，在您开始编码之前，必须执行一个额外的步骤。因为应用程序是一个 Node.js 应用程序，所以您必须下载一个模式，并将其内容解压缩到某个特定目录，如下所示：
1. 选择 Save 按钮旁边的 Click here 链接来下载 Node.js 模块。
2. 在 Eclipse 中，让您的项目处于打开状态，右键单击项目名称并选择 Show In > System Explorer 。在项目文件夹中，定位应用程序的 node_modules 目录。如果该目录不存在，请创建它。
3. 解压步骤 a 中下载的 Node.js 模块的内容。
4. 返回到 Eclipse，在 Project Explorer 中选择您的项目文件夹，并按下 F5 来刷新其内容，显示对该项目所做的更改。

步骤 7. 配置 Node.js 应用程序

要使用具有 SSO 服务的应用程序，必须对代码执行一些修改。使用上面的 获取代码 按钮来复制 IBM DevOps Services Single Sign On 项目，以便创建您自己的应用程序副本。然后执行以下更改。

将以下依赖关系添加到 package.json 文件：

express
passport
body-parser
cookie-parser
express-session

您的代码现在看起来应该如下所示：

... "description": "Insert description here",  "dependencies": {   "express": "latest",   "passport": "latest",   "body-parser": "latest",   "cookie-parser": "latest",   "express-session": "latest"  },  "scripts": { ...

删除整个 app.js 文件的内容。复制以下代码并将它们粘贴到相同的文件中。该代码定义了一些变量，以便使用前面步骤中添加的模块。

var express = require('express'); var passport = require('passport'); var cookieParser = require('cookie-parser'); var session = require('express-session'); var OpenIDConnectStrategy = require('passport-idaas-openidconnect').IDaaSOIDCStrategy; var app = express();

复制以下代码并将它们粘贴到 var app = express(); 行下面。该代码将会初始化模块的使用。

app.use(cookieParser()); app.use(session({ secret: 'keyboard cat', resave: false, saveUninitialized: true })); app.use(passport.initialize()); app.use(passport.session());  passport.serializeUser(function(user, done) {    done(null, user); });  passport.deserializeUser(function(obj, done) {    done(null, obj); });

以下代码将会获得被绑定到应用程序的服务的凭证。这些凭证都包含在 VCAP_SERVICES 中，用于定义和初始化开放 ID 策略，以便对应用程序中的用户进行身份验证。复制代码并将它们粘贴到您的 app.js 文件的最后一行代码的下面。

var services = JSON.parse(process.env.VCAP_SERVICES || "{}"); var ssoConfig = services.SingleSignOn[0]; var client_id = ssoConfig.credentials.clientId; var client_secret = ssoConfig.credentials.secret; var authorization_url = ssoConfig.credentials.authorizationEndpointUrl; var token_url = ssoConfig.credentials.tokenEndpointUrl; var issuer_id = ssoConfig.credentials.issuerIdentifier; var callback_url = 'PUT_CALLBACK_URL_HERE'; var OpenIDConnectStrategy = require('passport-idaas-openidconnect').IDaaSOIDCStrategy; var Strategy = new OpenIDConnectStrategy({   authorizationURL : authorization_url,   tokenURL : token_url,   clientID : client_id,   scope: 'openid',   response_type: 'code',   clientSecret : client_secret,   callbackURL : callback_url,   skipUserProfile: true,   issuer: issuer_id  }, function(accessToken, refreshToken, profile, done) {   process.nextTick(function() {   profile.accessToken = accessToken;   profile.refreshToken = refreshToken;   done(null, profile);  }); }); passport.use(Strategy); app.get('/login', passport.authenticate('openidconnect', {})); function ensureAuthenticated(req, res, next) {  if(!req.isAuthenticated()) {   req.session.originalUrl = req.originalUrl;   res.redirect('/login');  } else {   return next();  } }

在前面的代码中，定位 PUT_CALLBACK_URL_HERE 。插入您的应用程序的回调 URL。
为您的回调编写您自己的代码，以便指定在用户登录后应用程序应该做什么。您可以使用以下示例代码作为指导。该回调对应于您在步骤 6. 将 SSO 服务绑定到应用程序中的步骤 7 中定义的路径模式。

app.get('/auth/sso/callback', function(req, res, next) {                    var redirect_url = req.session.originalUrl;                     passport.authenticate('openidconnect', {         successRedirect: '/hello',                                         failureRedirect: '/failure',                             })(req,res,next); });

在本示例中，在用户成功登录后，他们被重定向到 /hello 页面。

app.get('/hello', ensureAuthenticated, function(request, response) {     request.send('Hello, '+ request.user['id'] + '!/n' + '<a href="/logout">Log Out</a>'); });

前面代码中的 ensureAuthenticated 回调要求经过身份验证的用户使用 SSO 进行登录，但会将所请求的页面显示给经过身份验证的用户。如果用户在访问页面时未经过身份验证，那么他们会并定向到登录页面。如果他们经过了身份验证，则会向他们显示一个页面，该页面中包含消息 Hello, <user_name> （其中的 <user_name> 可以使用请求值中包含的用户名称进行替换）和一个注销链接，该链接会将用户重定向到注销页面，让用户返回到主页。

app.get('/logout', function(req, res){     req.logout();     res.redirect('/'); });

如果登录失败，用户会被重定向到 /failure 页面，如下面代码所示，一个 Login failed 消息将会显示。

app.get('/failure', function(req, res) {     res.send('Login failed'); });

在前面所示的示例中，如果用户成功登录，那么他们会被定向到 /hello 页面。不过，如果您想将用户定向到最初请求的路径，则必须对代码进行稍微修改。在本示例中，回调被重定向到用户最初请求的页面，在这里，我们使用了属性 req.session.originalUri ，它会将路径存储到最初请求的资源。

app.get('/auth/sso/callback',function(req,res,next) {   var redirect_url = req.session.originalUrl;   passport.authenticate('openidconnect', {   successRedirect: redirect_url,   failureRedirect: '/failure',   })(req,res,next); });

对于要求进行身份验证的每个页面，可以在 app.get 函数中添加 ensureAuthenticated 回调。
最后，运行应用程序的代码如下所示。复制该代码，将它粘贴到 app.js 文件中的代码的最后一行的后面，并保存更改。

点击查看代码清单

关闭 [x]

app.get('/', function (req, res) {  res.send('<h1>Bluemix Service: Single Sign On</h1>' + '<p>Sign In with a Social Identity Source (SIS): Cloud directory, Facebook, Google+ or LinkedIn.</p>' + '<a href="/auth/sso/callback">Sign In with a SIS</a>'); }); var appport = process.env.VCAP_APP_PORT || 8888; var host = (process.env.VCAP_APP_HOST || 'localhost'); var server = app.listen(appport, function () {  var host = server.address().address  var port = server.address().port  console.log('Example app listening at http://%s:%s', host, port); });

步骤 8. 测试应用程序

单击 Servers 选项卡并单击 Bluemix 服务器图标旁边的 + 来展开其内容（如果它尚未展开）。
右键单击您之前创建的 Node.js 应用程序。
单击 Update and Restart 。等待更新完成和应用程序重启。要查看进度，请单击 Progress 选项卡。当消息更改为 No operations to display at this time 时，工作就完成了。如果 Progress 选项卡不可见，请单击 Window > Show view > Other... > General > Progress 。
在重启应用程序之后，右键单击 Server 选项卡中的 "Bluemix server" 下的项目。单击 Open Home Page 。
一个新的选项卡会在 Eclipse 中打开，向您显示正在 Bluemix 上运行的应用程序。
单击 Sign In with a SIS 。
一个 Sign In 页面将会显示，您可以从该页面中选择一个可用的身份来源，被选定的服务会将您重定向到其 Sign In 页面。
让我们测试一下 Facebook。单击 Sign in with Facebook 。其登录页面将会打开。
使用您的 Facebook 帐户进行登录。
一个警告消息将会告诉您将提供给请求应用程序的消息。单击 Okay 。
现在，SSO 服务会要求您同意授权访问您的信息。单击 Allow 。
最后，您会看到 hello 页面，它显示了您登录的时候所用的电子邮件地址。
备注：如果您的电子邮件地址没有显示，那么您会在 "Hello," 与 "! Log Out" 之间看到文本。这很正常，可能是因为受欢迎的身份来源的 API 发生了改变，这在 SSO 服务可以承受的范围内。
单击 Log Out 。您会被重定向到主页。