目次


Bluemix Single Sign On サービスを利用してソーシャル・ネットワークのログインを使用できるようにする

Bluemix と Single Sign On を利用する Node.js アプリケーションを作成する

Comments

このチュートリアルでは、Bluemix Single Sign On (SSO) サービスを利用することで、IBM Bluemix アプリケーションが Facebook、Google+、LinkedIn などのよく使われているソーシャル ID ソースや、統合されたカスタム ID ソースのユーザー認証を受け付けられるようにする方法を説明します。Bluemix SSO サービスは、単純なポリシー・ベースの構成を用いて、ユーザー認証を迅速に Bluemix アプリケーションに追加するために必要なメカニズムを提供しています。

このチュートリアルを最後まで終えると、SSO サービスを IBM Bluemix アプリケーションに追加してセットアップし、要件とユーザーのニーズに応じた ID ソースを有効にすることができるようになります。

アプリを実行するコードを入手する

アプリケーションを作成するために必要となるもの

読者に関する前提条件

以下に関する基礎知識が必要です。

  • HTML および JavaScript のコーディング
  • Node.js のプログラミング

また、次のものも必要になります。

さらに、認証に使用するソーシャル・ネットワークのアカウントも必要です。これらをお持ちでない場合は、該当するサイトにアクセスすることで、アカウントを登録および作成することができます。

ソフトウェアに関する前提条件

このチュートリアルで説明する SSO 認証方式を作成するには、以下のものをインストールしてセットアップしておく必要があります。

  • Java 7 実行環境
  • 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 アプリケーションを作成します。

  1. Eclipse を開き、新規 JavaScript プロジェクトを作成します。それには、「File (ファイル)」 > 「New (新規)」 > 「Project... (プロジェクト...)」の順に選択します。
  2. 「New Project (新規プロジェクト)」ウィンドウで、「Wizards: (ウィザード:)」入力フィールドに「javascript」と入力して、結果をフィルタリングします。
  3. 「Javascript Project (JavaScript プロジェクト)」を選択し、「Next (次へ)」をクリックします。
  4. プロジェクト名を入力して、「Finish (完了)」をクリックします。新規プロジェクトのパースペクティブを開くかどうか尋ねられたら、「Yes (はい)」を選択します。
  5. プロジェクトのタイトルを右クリックして、「Properties (プロパティー)」を選択します。
  6. 「Properties for <projectName> (<プロジェクト名> のプロパティー)」ウィンドウで、左側の列にある「Project Facets (プロジェクト・ファセット)」を選択し、右側で「Convert to faceted form... (ファセット・フォームへ変換…)」をクリックします。
  7. 「Node.js Application」にチェック・マークを付けてから「OK」をクリックします。

これで、プロジェクトの構造が変更されます。変更後のプロジェクトには、JavaScript リソースと app.js ファイルおよび package.json ファイルが含まれています。

Node.js プロジェクトの作成が完了したので、アプリケーションを Bluemix にデプロイします。

ステップ 2. 新規サーバーを定義する

  1. 「Servers (サーバー)」タブが表示されていない場合は、「Window (ウィンドウ)」 > 「Show view (ビューの表示)」 > 「Other... (その他...)」の順にクリックします。「Servers (サーバー)」を選択し、「OK」をクリックします。
  2. 空白のエリアを右クリックして、「New (新規)」 > 「Server (サーバー)」の順に選択します。
  3. 「IBM」の下にある「IBM Bluemix」を選択します。
  4. 「Next (次へ)」をクリックします。
  5. Bluemix アカウント情報を入力します。
  6. 「Next (次へ)」をクリックします。
  7. 「Organizations and Spaces (組織とスペース)」を選択します。デフォルトは「dev」です。
  8. 「Next (次へ)」をクリックします。
  9. 「Finish (完了)」をクリックします。

ステップ 3. アプリケーションをデプロイする

  1. 「Servers (サーバー)」タブをクリックし、始動済みの Bluemix サーバーを右クリックします。「Add and Remove (追加および除去)」を選択します。
  2. 左側でプロジェクトを選択してから、「Add (追加)」をクリックします。
  3. 「Finish (完了)」をクリックします。すると、「Application Details (アプリケーションの詳細)」ウィンドウが開きます。
  4. アプリケーションに名前を付けてから、「Next (次へ)」をクリックします。
  5. 「Launch Deployment (デプロイメントの開始)」には、デフォルトで情報が設定されているので、「Finish (完了)」をクリックします。

アプリケーションを Bluemix にプッシュした後、稼働中のアプリケーションを確認するには、同じサーバー内のプロジェクトを右クリックして、「Open Home Page (ホームページを開く)」をクリックします。ブラウザー・タブが開き、実行中のアプリケーションが「Generated Node.js application that runs on IBM Bluemix (生成された Node.js アプリケーションが IBM Bluemix 上で稼働しています)」というメッセージとともに表示されます。ホームページが開くと、Web ブラウザー・タブのアドレス・バーでアプリケーションの URL アドレスを確認することができます。

この時点で、アプリケーションは Bluemix にデプロイされて稼働状態になっています。次は、Single Sign On サービスを作成してセットアップし、アプリケーションにバインドします。

ステップ 4. Single Sign On サービスを作成する

  1. Bluemix にログインします。
  2. 「Services (サービス)」セクションで、「ADD A SERVICE OR API (サービスまたは API の追加)」をクリックします。
  3. 「Security (セキュリティー)」カテゴリーを見つけて、「Single Sign On」をクリックします (検索入力フィールドにサービスの名前を入力することで、結果をフィルタリングすることができます)。
  4. サービスだけを作成するために、「App (アプリ)」フィールドで「Leave unbound (アンバインドのまま)」をクリックします。
  5. 「Service name (サービス名)」フィールドに、サービスのデフォルト名が表示されます。デフォルトの名前をそのまま使用するのでも、変更するのでも構いません。
  6. 「Standard (標準)」プランを選択し、「CREATE (作成)」をクリックします。
  7. サービスが作成されると、「Welcome (ようこそ)」画面にリダイレクトされます。この画面で、サービスの名前を入力する必要があります。名前を入力したら、「Continue (続行)」をクリックします。

次に、Single Sign On のセットアップ・ページが表示されます。このページでは、プロバイダーを選択して、1 つ以上の ID ソースを追加することができます。追加できる ID ソースには、SAML エンタープライズ、クラウド・ディレクトリー、あるいはよく使われているソーシャル ID ソースである LinkedIn、Facebook、Google+ などがあります。

ステップ 5. Single Sign On サービスを構成する

この手順では、ID ソースとしてクラウド・ディレクトリー、LinkedIn、Facebook、および Google+ を構成します。

クラウド・ディレクトリー ID ソースを追加する

クラウド・ディレクトリー ID ソースは、クラウドでホストされたレジストリーを使用します。クラウド・ディレクトリーは ID ソースのパスワード・ポリシーとユーザー情報をホストします。

ユーザーは、クラウド・ディレクトリーのレジストリーに追加されていなければ、アプリケーションにアクセスすることができません。したがって、ユーザーの情報をレジストリーに入力する必要があります。それと同時に、ユーザーがアプリケーションにログインする際のパスワード・ポリシーを構成することもできます。

  1. 「Add New Identity Source (新規 ID ソースの追加)」メニューで、「Cloud Directory (クラウド・ディレクトリー)」をクリックします。
  2. ID ソースのデフォルト名が表示されます。デフォルトの名前をそのまま使用するか、変更します。「Save (保存)」をクリックします。
  3. Single Sign On セットアップ・ページが再び表示されます。このページで、クラウド・ディレクトリーが ID ソースとしてデフォルトで有効になっていることを確認することができます。
  4. リスト内で ID ソースの名前をクリックして選択します。
  5. プラス記号 (plus sign icon) をクリックして、新しいユーザーを追加します。フィールドにユーザーの情報を入力します。ユーザーを変更、削除、または無効にするには、ユーザーを選択してから、必要なアクションに対応するアイコンをクリックします。
  6. 「Save (保存)」をクリックして、ユーザーをクラウド・ディレクトリーに追加します。登録済みユーザーのリストに、前のステップで入力した情報が表示されます。
  7. 設定の構成を確認するために、設定ボタン () をクリックします。「Auto Consent (自動的に同意)」の設定を確認します。「Auto Consent (自動的に同意)」が「On (オン)」に設定されていると、ユーザーに同意を求めることなく、アプリケーションでユーザーの ID 情報を取得することができます。この設定をオフにすると、ID 情報を取得する前にユーザーに同意を促すようになります。
  8. 「Save (保存)」をクリックして、「Auto Consent (自動的に同意)」設定を保存します。

SSO サービスをアプリケーションにバインドして使用する準備ができました。ただし、これをテストする前に、まずは残りの ID ソースの追加を完了してください。

LinkedIn をソーシャル ID ソースとして追加する

  1. 「Add New Identity Source (新規 ID ソースの追加)」ページで、「LinkedIn」をクリックします。
  2. ID ソースのデフォルト名が表示されます。デフォルトの名前をそのまま使用するか、変更します。
  3. 「Step 1 (ステップ 1)」の下にある「Click here (ここをクリック)」をクリックして、LinkedIn 開発者サイトにアクセスします。ID ソースを構成する画面のスクリーンショット
    ID ソースを構成する画面のスクリーンショット
  4. Web ブラウザーに新しいタブが開き、LinkedIn Secure Developer ページが表示されるので、サインインします (まだ登録していない場合は、登録してください)。サインインした後、「+ Add New Application (+ 新規アプリケーションの追加)」をクリックします。
  5. 必須フィールドに入力して、「OAuth User Agreement (OAuth ユーザー同意)」セクションで「OAuth 2.0 Redirect URLs (OAuth 2.0 リダイレクト URL)」を見つけます。
  6. Bluemix ページに戻ります。
  7. 「Configure Identity Source (ID ソースの構成)」で、OAuth リダイレクト URI をシステムのクリップボードにコピーします。
  8. LinkedIn Secure Developer ページに戻り、OAuth リダイレクト URI を「OAuth 2.0 Redirect URLs (OAuth 2.0 リダイレクト URL)」フィールドに貼り付けます。LinkedIn セットアップ画面のスクリーンショット
    LinkedIn セットアップ画面のスクリーンショット
  9. 必須フィールドの入力が完了したら、「Terms of Service (サービス使用条件)」に同意してから「Add Application (アプリケーションの追加)」をクリックします。
  10. 割り当てられた「API Key (API キー)」「Secret Key (秘密鍵)」が表示されます。API キー秘密鍵をコピーします。
  11. Bluemix ページに戻り、LinkedIn セットアップ・ページの「Configure Identity Source (ID ソースの構成)」で、API キー秘密鍵を「Step 2 (ステップ 2)」の下にある、それぞれに対応するフィールドに貼り付けます。
  12. Bluemix ページで「Save (保存)」をクリックし、LinkedIn ID ソースの構成を保存します。
  13. LinkedIn Secure Developer ページに戻り、「Done (完了)」をクリックします。

Facebook をソーシャル ID ソースとして追加する

Facebook を追加するプロセスは、LinkedIn の追加プロセスと非常によく似ています。

  1. 「Add New Identity Source (新規 ID ソースの追加)」ページで、「Facebook」をクリックします。
  2. ID ソースのデフォルト名が表示されます。デフォルトの名前をそのまま使用するのでも、変更するのでも構いません。
  3. 「Step 1 (ステップ 1)」の下にある「Click here (ここをクリック)」をクリックして、Facebook Developer サイトにアクセスします。
  4. Web ブラウザーに新しいタブが開き、Facebook Developers ページが表示されるので、サインインします (まだ登録していない場合は、登録してください)。
  5. 「My Apps (マイ・アプリ)」というメニューを見つけて、「Add a New App (新規アプリの追加)」サブメニューを選択します。
  6. 「Website (Web サイト)」を選択します。
  7. アプリケーションの名前を入力して、「Create New Facebook App ID (新規 Facebook アプリ ID の作成)」をクリックします。
  8. 別のアプリケーションのテスト・バージョンであるかどうかを尋ねられたら、「NO (いいえ)」をクリックします。
  9. 「Category (カテゴリー)」を選択し、「Create App ID (アプリ ID の作成)」をクリックします。
  10. 「Quick Start (クイック・スタート)」ページが表示されるので、「Site URL (サイト URL)」および「Mobile Site URL (モバイル・サイト URL)」フィールドに入力します。後者のフィールドは、空白のままにするのでも構いません。あるいは、両方のフィールドに同じ値を使用することもできます。「Next (次へ)」をクリックします。
  11. 「My Apps (マイ・アプリ)」メニューで、最近作成したアプリケーションを選択します。
  12. ページの左側にある「Settings (設定)」メニューを選択します。
  13. 「Contact Email (連絡先メールアドレス)」フィールドに e-メール・アドレスを入力し、「Save Changes (変更を保存)」をクリックします。
  14. 「Advanced (詳細設定)」タブを選択します。
  15. Bluemix の Facebook を対象とした「Configure Identity Source (ID ソースの構成)」ページから、OAuth リダイレクト URI をコピーします。
  16. コピーした OAuth リダイレクト URI を、Facebook Developers ページの下のほうにある「Valid OAuth redirect URIs (有効な OAuth リダイレクト URI)」フィールドに貼り付けます。OAuth リダイレクトをセットアップするページのスクリーンショット
    OAuth リダイレクトをセットアップするページのスクリーンショット
  17. 「Save Changes (変更を保存)」をクリックします。必要に応じて、残りの必須フィールドに該当する情報を入力します。
  18. Facebook の「Basic (基本データ)」タブに戻ります。アプリケーション ID (App ID) とアプリのシークレットキー (App Secret) をコピーします (アプリのシークレットキー (App Secret) を表示するには、「Show (表示)」をクリックします。必要に応じて、Facebook のパスワードを再入力してください)。
  19. Bluemix の Facebook を対象とした「Configure Identity Source (ID ソースの構成)」ページで、アプリケーション ID (App ID) とアプリのシークレットキー (App Secret) を貼り付けます。
  20. Bluemix ページで「Save (保存)」をクリックし、変更内容を保存します。
  21. Facebook Developers ページに戻り、ページの左側にある「Status & Review」メニューを選択します。
  22. 「Status (ステータス)」タブで「NO (いいえ)」ボタンをクリックして、アプリケーションが一般公開されるようにします。「Status (ステータス)」タブ
    「Status (ステータス)」タブ
  23. 「Confirm (確定)」をクリックします。

Facebook SSO サービスが使用可能になりました。

Google+ をソーシャル ID ソースとして追加する

  1. 「Add New Identity Source (新規 ID ソースの追加)」ページで、「Google+」をクリックします。
  2. ID ソースのデフォルト名が表示されます。デフォルトの名前をそのまま使用するのでも、変更するのでも構いません。
  3. 「Step 1 (ステップ 1)」の下にある「Click here (ここをクリック)」をクリックして、Google Developers サイトにアクセスします。
  4. Web ブラウザーに新しいタブが開き、Google ページが表示されるので、サインインします (まだ登録していない場合は、登録してください)。
  5. 「Create Project (プロジェクトを作成)」をクリックします。
  6. 「Project Name (プロジェクト名)」と表示されるので、プロジェクトの名前を入力してください。
  7. プロジェクト ID が表示されます。デフォルトの名前をそのまま使用するのでも、変更するのでも構いません。
  8. 「Create (作成)」をクリックします。
  9. プロジェクトが作成されると、プロジェクトのダッシュボードが表示されます。ダッシュボードの左側で、「APIs & auth (API と認証)」を選択します。
  10. 「Credentials (認証情報)」サブメニューをクリックし、「Create new Client ID (新しいクライアント ID を作成)」をクリックします。
  11. タイプとして「Web application (Web アプリケーション)」を選択し、「Configure consent screen (同意画面を構成)」をクリックします。
  12. 「Consent (同意)」画面で、製品名を入力します。残りのフィールドはオプションです。
  13. 「Save (保存)」をクリックして製品名を保存します。ポップアップ・ウィンドウが表示されます。「Web Application (Web アプリケーション)」が選択されていることを確認します。
  14. 「AUTHORIZED JAVASCRIPT ORIGINS (認可された JavaScript 生成元)」フィールドに、Bluemix アプリケーションの URL パスを入力します。
  15. Bluemix の Google を対象とした「Configure Identiry Source (ID ソースの構成)」ページに戻ります。「Step 1 (ステップ 1)」の下にある OAuth リダイレクト URI (OAuth Redirect URI) をコピーします。
  16. コピーした OAuth リダイレクト URI (OAuth Redirect URI) を、Google Developers ページの「AUTHORIZED REDIRECT URIS (認可されたリダイレクト URI)」フィールドに貼り付けます。
  17. これまでに入力した値が正しいことを確認します。このページは、次のような内容になっているはずです。すべて正しいことを確認したら、「Create Client ID (クライアント ID を作成)」をクリックします。認可されたリダイレクト URI をセットアップする画面のスクリーンショット
    認可されたリダイレクト URI をセットアップする画面のスクリーンショット
  18. Web アプリケーションの詳細が表示されます。クライアント ID (Client ID) とクライアント・シークレット (Client Secret) をコピーします
  19. コピーしたクライアント ID (Client ID) とクライアント・シークレット (Client Secret) を、Bluemix の Google+ を対象とした「Configure Identity Source (ID ソースの構成)」の「Step 2 (ステップ 2)」パネルに貼り付けます。
  20. 「Save (保存)」をクリックします。

SSO サービスのセットアップは、これで完了です。次のステップでは、SSO サービスをアプリケーションにバインドします。

ステップ 6. SSO サービスをアプリケーションにバインドする

  1. IBM Bluemix にログインし、前に作成したアプリケーションを選択します。
  2. アプリケーションの「Overview (概要)」画面で、「BIND A SERVICE OR API (サービスまたは API のバインド)」をクリックします。
  3. リストから SSO サービスを選択してから、「ADD (追加)」をクリックします。
  4. 「RESTAGE (再ステージ)」をクリックします。
  5. サービスが大きなボタンとして「Overview (概要)」画面に追加されます。そのボタンをクリックしてサービスを選択します。
  6. SSO のセットアップ・ページが開き、前に構成した ID ソースが表示されます。「INTEGRATE (統合)」タブをクリックします。
  7. コールバック URL を入力します。ここで、認証トークンが使用されて、ユーザー・プロファイルが取得されることになります。推奨されるパターンは、アプリケーションの URL の後に /auth/sso/callback のようなパスを続けることです。例えば、完全な URL は http://appname.mybluemix.net/auth/sso/callback のようになります。
  8. アプリケーションの表示名を入力します。
  9. アプリケーションで有効にする ID ソースにチェック・マークを付けます。
  10. 「Save (保存)」をクリックします。
  11. これで、アプリケーションにサービスがバインドされました。ただし、コーディングを始める前に、必要なステップがもう 1 つあります。このアプリケーションは Node.js アプリケーションなので、Node.js モジュールをダウンロードして、そのコンテンツを特定のディレクトリーに解凍する必要があります。それには、以下の手順に従ってください。
    1. 「Save (保存)」ボタンの横にある「Click here (ここをクリック)」リンクをクリックして、Node.js モジュールをダウンロードします。
    2. Eclipse で、プロジェクトを開いた状態にして、プロジェクト名を右クリックし、「Show In (表示)」 > 「System Explorer (システム・エクスプローラー)」の順に選択します。プロジェクト・フォルダー内にある、アプリケーションの node_modules ディレクトリーを見つけます。ディレクトリーが存在しない場合は、作成してください。
    3. ステップ a でダウンロードした Node.js モジュールの中身を解凍します。
    4. Elipse に戻り、「Project Explorer (プロジェクト・エクスプローラー)」でプロジェクト・フォルダーを選択し、F5 キーを押します。これで、フォルダーの中身が最新の表示に更新されて、プロジェクトの変更が反映されます。

ステップ 7. Node.js アプリケーションを構成する

アプリケーションで SSO サービスを使用するには、コードにいくつかの変更を加える必要があります。このチュートリアルの始めのほうにある「コードを入手」ボタンを使用して、IBM DevOps Services Single Sign On プロジェクトをフォークし、このアプリケーションのコピーを皆さん専用に作成してください。その後、次のように変更を加えます。

  1. Add the following dependencies to the package.json file:
    • 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": {
    ...
  2. 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();
  3. 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);
    });
  4. 以下のコードで、アプリケーションにバインドされたサービスの資格情報をすべて取得します。資格情報は 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();
        }
    }
  5. 上記のコードでは、PUT_CALLBACK_URL_HERE を見つけて、アプリケーションのコールバック URL を挿入します。
  6. コールバックには、ユーザーがログインした後にアプリケーションが実行するアクションを指定するコードを独自に作成します。以下のサンプル・コードを参考にしてください。このコールバックは、「ステップ 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> は、リクエストの値に含まれるユーザーの名前で置き換えられます) と、「Log Out (ログアウト)」リンクが示されます。このリンクは、ユーザーをホームページに戻すログアウト・ページにリダイレクトします。

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);
});
  1. 認証を必要するページごとに、app.get 関数に ensureAuthenticated コールバックを追加してください。
  2. 最終的に、アプリケーションを実行するコードは以下のようになります。このコードをコピーして、app.js ファイルの最後のコード行の後に貼り付け、変更内容を保存します。
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. アプリケーションをテストする

  1. 「Servers (サーバー)」タブをクリックします。Bluemix サーバー・アイコンの横にある「+」をクリックして、その内容を展開します (まだ展開されていない場合)。
  2. 前に作成した Node.js アプリケーションを右クリックします。
  3. 「Update and Restart (更新して再起動)」をクリックします。更新が完了してアプリケーションが再起動するまで待ちます。進行状況を確認するには、「Progress (進行状況)」タブをクリックします。メッセージが「No operations to display at this time (現在、表示する操作はありません)」に変わったら、プロセスは完了です。「Progress (進行状況)」タブが表示されていない場合は、「Window (ウィンドウ)」 > 「Show view (ビューの表示)」 > 「Other... (その他...)」 > 「General (一般)」 > 「Progress (進行状況)」の順にクリックします。
  4. アプリケーションが再起動したら、「Servers (サーバー)」タブの「Bluemix server (Bluemix サーバー)」の下に表示されているプロジェクトを右クリックし、「Open Home Page (ホームページを開く)」をクリックします。
  5. Eclipse に新しいタブが開き、Bluemix 上で実行中のアプリケーションが表示されます。実行中のアプリケーション
    実行中のアプリケーション
  6. 「Sign In with a SIS (SIS でサインイン)」をクリックします。
  7. 「Sign In (サインイン)」ページが表示されます。このページで、利用可能な ID ソースのいずれかを選択することができます。どの ID ソースを選択しても構いません。選択したサービスが、「Sign In (サインイン)」ページにリダイレクトします。利用可能な SSO サービス
    利用可能な SSO サービス
  8. Facebook でテストしてみましょう。「Sign In with Facebook (Facebook でサインイン)」をクリックします。Facebook のログイン・ページが開きます。
  9. Facebook アカウントを使用してログインします。
  10. 要求側アプリケーションに提供される情報に関する警告メッセージが表示されます。「OK」をクリックします。
  11. SSO サービスから、ユーザー情報へのアクセスを許可することに同意するかどうか尋ねられます。「Allow (許可する)」をクリックします。
  12. 最後に、ログインに使用した e-メール・アドレスが示された hello ページが表示されます。

    : e-メール・アドレスが示されない場合は、「Hello」と「! Log Out (ログアウト)」の間にテキストが示されます。これで問題ありません。e-メール・アドレスが表示されないのは、よく使われている ID ソースの API が変更されたことが理由として考えられますが、これは SSO サービスのスコープ外です。

    hello ページのスクリーンショット
    hello ページのスクリーンショット
  13. 「Log Out (ログアウト)」をクリックします。これで、メイン・ページにリダイレクトされます。

別のサービスをテストする場合のプロセスも同じです。

まとめ

このチュートリアルでは、以下の内容を説明しました。

  • IBM Bluemix 上で Node.js アプリケーションを作成してデプロイする方法
  • IBM Bluemix 上で SSO サービスを作成してセットアップし、Node.js アプリケーションにバインドする方法
  • クラウド・ディレクトリー ID ソースを追加、セットアップし、その中でユーザーを作成する方法
  • LinkedIn、Google+、Facebook などのよく使われている ID ソースを追加してセットアップする方法

これで、皆さん独自の Node.js アプリケーションに IBM Bluemix SSO サービスを追加してセットアップできるようになったはずです。1 つ以上の ID ソースを使用可能にすれば、ユーザーがアプリケーションで使用するログイン・タイプを好みに応じて選択できるようになります。

JazzHub でホストされているこのチュートリアルのソース・コードをダウンロードして、アプリケーションの要件に合わせて変更し、適応させてください。


ダウンロード可能なリソース


関連トピック


コメント

コメントを登録するにはサインインあるいは登録してください。

static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=60
Zone=セキュリティ, Web development, Cloud computing
ArticleID=1010025
ArticleTitle=Bluemix Single Sign On サービスを利用してソーシャル・ネットワークのログインを使用できるようにする
publish-date=07092015